使用 d3.js 缩放平移图像

Question

您好，我正在尝试对某些图像进行缩放和平移。我有这个链接的例子：http://bl.ocks.org/mbostock/3681006 主要区别在于他们绘制形状而不是图像。这是一个脚本，我做了什么

https://jsfiddle.net/t1gqg1m6/1/

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();
}

var img = new Image();
img.onload = function () {
    function draw(){
    for(var i=0;i<=500;i+=50){
        canvas.drawImage(img, i, 10, 50, 40);
    }
  }
  draw();
}

img.src = "http://static.dnaindia.com/sites/default/files/styles/half/public/2016/04/02/444652-google-photos-emoji-google-image-search-using-emoji-coolkengzz-shutterstock.jpg?itok=b1lBccFF";

如果有人可以提供帮助，那就太好了。提前谢谢你。

Answer 1

使您的绘图函数全局化，以便可以从缩放函数和图像加载函数调用它。

function draw() {
  for (var i = 0; i <= 500; i += 50) {
    canvas.drawImage(img, x(i), 10, 50, 40);
  }
}

下一个而不是：

canvas.drawImage(img, i, 10, 50, 40);

应该是：

canvas.drawImage(img, x(i), 10, 50, 40);

以便缩放/平移正确计算新位置。

工作代码here