Question

您好我正在尝试缩放和平移某些图像。我从这个链接得到了一个例子：http://bl.ocks.org/mbostock/3681006主要区别在于他们绘制的形状不是图像。这是一个脚本，我已经完成了

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

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

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

使用d3.js缩放平移图像

1 个答案: