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

Question

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

/* EDIT 使用此命令将脚本添加到 Raphael 文档 var zpd = new RaphaelZPD(paper, { zoom: true, pan: true, drag: false});你的 Canvas */

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

我想做的是在加载 raphael 后立即运行鼠标滚轮缩小到阈值。缩放阈值设置在脚本的开头 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 .