pkerpedjiev/.PixiJsGeometricZooming

## .PixiJsGeometricZooming
license: gpl-3.0

## README.md

      
    Raw
  

              README.md
            
          
    A series of related examples:

Pixi.js geometric zooming
Canvas geometric zooming
Canvas semantic zooming
SVG geometric zooming
SVG semantic zooming


## index.html
<!DOCTYPE html>
<meta charset="utf-8">
<title>Pixi!!!</title>
<style>

.overlay {
  fill: none;
  pointer-events: all;
}

</style>
<body>
<canvas id='pixiCanvas' />
<script src="//d3js.org/d3.v3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/3.0.11/pixi.min.js"></script>
<script>

var width = 960,
    height = 500;

var numCircles = 10000;

var pixiCanvas = d3.select('#pixiCanvas');
var renderer = PIXI.autoDetectRenderer(width, height, { backgroundColor: 0xffffff,
                                       antialias: true, view: pixiCanvas.node() });

document.body.appendChild(renderer.view);

pixiCanvas.call(d3.behavior.zoom().scaleExtent([1, 8]).on("zoom", zoom))

function zoom() {
    graphics.position.x = d3.event.translate[0];
    graphics.position.y = d3.event.translate[1];
    graphics.scale.x = d3.event.scale;
    graphics.scale.y = d3.event.scale;
}

var randomX = d3.random.normal(width / 2, 80),
    randomY = d3.random.normal(height / 2, 80);

// Create the main stage for your display objects
var stage = new PIXI.Container();

// Start animating
animate();
function animate() {
    //Render the stage
    renderer.render(stage);
    requestAnimationFrame(animate);
}

var graphics = new PIXI.Graphics();

graphics.beginFill(0xe74c3c); // Red
d3.range(numCircles).map(function() {
    graphics.drawCircle(randomX(), randomY(), 1);
});

stage.addChild(graphics);

</script>
	<!DOCTYPE html>
	<meta charset="utf-8">
	<title>Pixi!!!</title>
	<style>

	.overlay {
	fill: none;
	pointer-events: all;
	}

	</style>
	<body>
	<canvas id='pixiCanvas' />
	<script src="//d3js.org/d3.v3.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/3.0.11/pixi.min.js"></script>
	<script>

	var width = 960,
	height = 500;

	var numCircles = 10000;

	var pixiCanvas = d3.select('#pixiCanvas');
	var renderer = PIXI.autoDetectRenderer(width, height, { backgroundColor: 0xffffff,
	antialias: true, view: pixiCanvas.node() });

	document.body.appendChild(renderer.view);

	pixiCanvas.call(d3.behavior.zoom().scaleExtent([1, 8]).on("zoom", zoom))

	function zoom() {
	graphics.position.x = d3.event.translate[0];
	graphics.position.y = d3.event.translate[1];
	graphics.scale.x = d3.event.scale;
	graphics.scale.y = d3.event.scale;
	}

	var randomX = d3.random.normal(width / 2, 80),
	randomY = d3.random.normal(height / 2, 80);

	// Create the main stage for your display objects
	var stage = new PIXI.Container();

	// Start animating
	animate();
	function animate() {
	//Render the stage
	renderer.render(stage);
	requestAnimationFrame(animate);
	}

	var graphics = new PIXI.Graphics();

	graphics.beginFill(0xe74c3c); // Red
	d3.range(numCircles).map(function() {
	graphics.drawCircle(randomX(), randomY(), 1);
	});

	stage.addChild(graphics);

	</script>