使用d3.js縮放平移圖像

嗨我正在嘗試縮放和平移一些圖像。我從這個鏈接中得到了例子：http://bl.ocks.org/mbostock/3681006主要的區別是他們繪製的形狀不是圖像。這裏有一個劇本，我做了什麼使用d3.js縮放平移圖像

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";

，如果有人可以幫助將是巨大的。先謝謝你。

來源

2016-09-21 Alex

您的問題是？ –

使繪圖函數成爲全局函數，以便可以從縮放函數以及圖像加載函數中調用繪圖函數。

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

來源

2016-09-21 10:01:30 Cyril

TY爲這個快速的答案。這很奇怪。這固定了拖動部分，但圖像現在不縮放，它們將彼此脫離。我的想法是放大實際圖像，因爲它們保持在一起，也許我選擇了錯誤的例子。 – Alex

你錯誤的例子，如果你想它變得很大，那麼你應該使用幾何縮放而不是對稱縮放的例子：http://bl.ocks.org/mbostock/3680958 – Cyril

使用d3.js縮放平移圖像

回答

相關問題