Zoom Pan images with d3.js - Javascript Canvas

Javascript examples for Canvas:image

  1. HOME
  2. Javascript
  3. Canvas
  4. image

Description

Zoom Pan images with d3.js

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <script type="text/javascript" src="http://d3js.org/d3.v3.min.js"></script> 
      <style id="compiled-css" type="text/css">

svg {/*from w ww  .ja  va2s.  co m*/
   font: 10px sans-serif;
}
.overlay {
   fill: none;
   pointer-events: all;
}
.axis path,
.axis line {
   fill: none;
   stroke: #000;
   shape-rendering: crispEdges;
}


      </style> 
      <script type="text/javascript">
    window.onload=function(){
var width = 960,
  height = 500;
var randomX = d3.random.normal(width / 2, 80),
  randomY = d3.random.normal(height / 2, 80);
var data = d3.range(2000).map(function() {
  return [
    randomX(),
    randomY()
  ];
});
var x = d3.scale.linear()
  .domain([0, width])
  .range([0, width]);
var y = d3.scale.linear()
  .domain([0, height])
  .range([height, 0]);
var canvas = d3.select("canvas")
  .attr("width", width)
  .attr("height", height)
  .call(d3.behavior.zoom().x(x).y(y).scaleExtent([1, 8]).on("zoom", zoom))
  .node().getContext("2d");
function zoom() {
  canvas.clearRect(0, 0, width, height);
  draw();
}
function draw() {
  for (var i = 0; i <= 500; i += 50) {
    canvas.drawImage(img, x(i), 10, 50, 40);
  }
}
var img = new Image();
img.onload = function() {
  draw();
}
img.src = "https://www.java2s.com/style/demo/Google-Chrome.png";
    }

      </script> 
   </head> 
   <body> 
      <canvas id="canvas"></canvas>  
   </body>
</html>

Related Tutorials