由于setviewbox不适用于我,因此我设法进行了一些黑客操作以缩放Raphael纸,这是我编写的功能:

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

    element.setAttribute("transform", s);
}

Raphael.fn.zoomAndMove = function(coordx,coordy,zoom) {

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

    var z = zoom;

    var g = document.getElementById("viewport1");
    var p = svg.createSVGPoint();

    p.x = coordx;
    p.y = coordy;

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

    var k = svg.createSVGMatrix().scale(z).translate(-p.x, -p.y);
    setCTM(g, g.getCTM().multiply(k));
}

其中viewport1元素定义为:
var gelem = document.createElementNS('http://www.w3.org/2000/svg', 'g');
gelem.id = 'viewport1';

paper.canvas.appendChild(gelem);
paper.canvas = gelem;

然后我可以调用:paper.zoomAndMove(minx,miny,zoomRatio);
是否可以变换功能使其平滑缩放?

最佳答案

参见this JS Fiddle example,了解如何利用jQuery和Raphael的setViewBox进行平滑的缩放。我们在更复杂,更大的环境中使用完全相同的功能,即使在屏幕上绘制了大量项目时,它也可以完美工作并保持流畅。

基本上,不要尝试重新发明轮子。我知道这可能不是您要寻找的答案,但是几乎可以肯定,这是您的最佳选择。

编辑:
我已经修复了附加的 fiddle (由于JSFiddle对站点所做的更改,它被打破了),但是很明显,这样一来,我不允许我在不包含一些代码的情况下保存JSFiddle链接,所以...

console.log("hello world!");

关于jquery - 拉斐尔纸缩放动画,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/7736690/

10-09 18:08
查看更多