확대/축소 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";

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

를 무슨 짓을했는지하는 스크립트입니다. 미리 감사드립니다.

출처

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

타이입니다. 흠. 이상 하네. 이것은 끌기 부분을 고쳤지만 이미지가 확대되지 않고 서로 빠져 나갑니다. 내 생각은 실제 이미지가 함께있을 때 확대/축소하는 것이 었습니다. 아마도 잘못된 예를 들었을 것입니다. – Alex

yeh 틀린 예를 원한다면 기하학적 확대/축소 및 대칭 확대/축소 예제를 사용해야합니다. http://bl.ocks.org/mbostock/3680958 – Cyril

확대/축소 d3.js가있는 이미지 팬

답변

관련 문제