저자는 자신의 스크립트를 도와, 인터넷의 얼굴에서 사라졌다

Question

제가 이야기 확장은 라파엘 - 근접 발달이다 : http://pohjoisespoo.net84.net/src/raphael-zpd.js

/* 편집 스크립트가 추가됩니다 이 명령을 사용하는 라파엘 문서 var zpd = new RaphaelZPD(paper, { zoom: true, pan: true, drag: false}); 어디 종이가 당신의 캔버스입니다 */

이 스크립트는 원래 더 이상 존재하지 않는 작성자 github http://www.github.com/somnidea에 릴리스되었습니다.

필자가 원했던 것은 마우스 휠이로드 된 시점에 마우스 휠을 임계 값으로 축소하는 것입니다. zoomthreshold는 스크립트 zoomThreshold: [-37, 20]의 시작 부분에 설정됩니다. 마우스 휠 스크롤 기능에서는이 전체 마우스 휠 이벤트 부분

me.handleMouseWheel = function(evt) { 
    if (!me.opts.zoom) return; 

    if (evt.preventDefault) 
     evt.preventDefault(); 

    evt.returnValue = false; 

    var svgDoc = evt.target.ownerDocument; 

    var delta; 

    if (evt.wheelDelta) 
     delta = evt.wheelDelta/3600; // Chrome/Safari 
    else 
     delta = evt.detail/-90; // Mozilla 

    if (delta > 0) { 
     if (me.opts.zoomThreshold) 
      if (me.opts.zoomThreshold[1] <= me.zoomCurrent) return; 
     me.zoomCurrent++; 
    } else { 
     if (me.opts.zoomThreshold) 
      if (me.opts.zoomThreshold[0] >= me.zoomCurrent) return; 
     me.zoomCurrent--; 
    } 

    var z = 1 + delta; // Zoom factor: 0.9/1.1 

    var g = svgDoc.getElementById("viewport"+me.id); 

    var p = me.getEventPoint(evt); 

    p = p.matrixTransform(g.getCTM().inverse()); 

    // Compute new scale matrix in current mouse position 
    var k = me.root.createSVGMatrix().translate(p.x, p.y).scale(z).translate(-p.x, -p.y); 
    me.setCTM(g, g.getCTM().multiply(k)); 

    if (!me.stateTf) 
     me.stateTf = g.getCTM().inverse(); 

    me.stateTf = me.stateTf.multiply(k.inverse()); 
} 

이유는 그냥 것입니다로 시작하는 작은 SVG를 그릴 수 없습니다 기본적 0 me.zoomCurrent = 0;

입니다 zoomCurrent 비교된다 저는 래스터 이미지를 배경으로 사용하고 있고 더 높은 해상도가 필요합니다. 저는 여전히 문턱에서 설정 한 가장 먼 지점부터 시작하고 싶습니다. 어떻게 든이 스크립트를 사용하여이 작업을 수행 할 수 있습니까? 자연스럽게 마우스 줌/팬을 다룰 때 사용하고 있습니다.

// EDIT

이 스크립트의 마지막에이 기능도하지만, 지금까지 내가 일을 할 수있었습니다.

Raphael.fn.ZPDPanTo = function(x, y) { 
var me = this; 

if (me.gelem.getCTM() == null) { 
    alert('failed'); 
    return null; 
} 

var stateTf = me.gelem.getCTM().inverse(); 

var svg = document.getElementsByTagName("svg")[0]; 

if (!svg.createSVGPoint) alert("no svg");   

var p = svg.createSVGPoint(); 

p.x = x; 
p.y = y; 

p = p.matrixTransform(stateTf); 

var element = me.gelem; 
var matrix = stateTf.inverse().translate(p.x, p.y); 

var s = "matrix(" + matrix.a + "," + matrix.b + "," + matrix.c + "," + matrix.d + "," + matrix.e + "," + matrix.f + ")"; 

element.setAttribute("transform", s); 

return me; 


} 

그것이 클릭이 주어진 좌표 기능을 수행 할 수 있도록 말을 클릭 이벤트를 통해 문서를 통해 패닝을 위해 사용되는 것 같다. 그러나, 나는 그것을 작동시킬 수 없었다고 말했다. 어떻게 작동하는지 모르겠습니다. 나는 paper.ZPDPanTo(100, 100);뿐만 아니라 단지 ZPDPanTo(100,100)을 시도했지만 아무 일도 일어나지 않습니다.

Answer 1

Raphaël 2.0의 작업 분기를 확인해보십시오.이 작업 브랜치는 viewBox 및 변형에 대한 지원을 추가한다고 가정합니다 (https://github.com/DmitryBaranovskiy/raphael/tree/2.0 참조).

귀하의 질문에 완전히 답변하지는 않지만 Raphaël 2.0이 귀하의 사용 사례를 해결할 가능성이 매우 높습니다.

당신이 다음 줌에게 SVG DOM 속성 currentTranslate 및 currentScale를 통해 & 팬 위치를 조작 할 수있는 순수 SVG를 사용하는 경우, this example를 참조하십시오.

Answer 2

라파엘 근접 발달을 사용하는 예 :

var paper = Raphael("container",800,760); 

window.paper = paper; 

zpd = new RaphaelZPD(paper, { zoom: true, pan: true, drag: false }); 

paper.circle(100,100, 50).attr({fill:randomRGB(),opacity:0.95}); 
paper.rect(100,100, 250, 300).attr({fill:randomRGB(),opacity:0.65}); 
paper.circle(200,100, 50).attr({fill:randomRGB(),opacity:0.95}); 
paper.circle(100,200, 50).attr({fill:randomRGB(),opacity:0.95}); 

http://jsfiddle.net/4PkRm/1/