javascript - 这个 Raphael JS 扩展的作者已经从互联网上消失了，帮我处理他的脚本

Question

我所说的扩展是Raphael-zpd:http://pohjoisespoo.net84.net/src/raphael-zpd.js

/* 编辑 使用以下命令将脚本添加到 Raphael 文档 var zpd = new RaphaelZPD(paper, { Zoom: true, pan: true, Drag: false}); 其中 paper 是你的 Canvas */

该脚本最初发布于作者 github http://www.github.com/somnidea已不复存在。

我想做的是在拉斐尔加载后立即运行鼠标滚轮缩小到阈值。 Zoomthreshold 在脚本 zoomThreshold: [-37, 20] 的开头设置。在鼠标滚轮滚动函数中，它与默认情况下为 0 的 ZoomCurrent 进行比较 me.zoomCurrent = 0;

这是整个鼠标滚轮事件部分

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 的原因是我使用光栅图像作为背景并且需要它们具有更高分辨率。我仍然想从我在阈值处设置的最远点开始。我是否有可能以某种方式使用这个脚本来做到这一点？我自然会使用它来处理鼠标缩放/平移。

//编辑

脚本末尾也有这个函数，但到目前为止我还无法使用它。

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，则可以通过 SVG DOM 属性 currentTranslate 和 currentScale 操作缩放和平移位置，请参阅 this example .