拉斐尔纸张缩放动画 [英] Raphael paper zoom animation

问题描述

我能做到以放大拉斐尔纸一些黑客，因为setviewbox不是为我工作，这里是我写的函数：

I manage to do some hack in order to zoom raphael paper, as setviewbox wasn't working for me, here is the function I wrote :

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元件被定义为：

where the viewport1 element was defined as :

var gelem = document.createElementNS('http://www.w3.org/2000/svg', 'g');
                gelem.id = 'viewport1';

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

然后我可以叫： paper.zoomAndMove（疯丫头，MINY，zoomRatio）;
是否有可能转换功能，使之顺利放大？
THX由前进！

Then I can call : paper.zoomAndMove(minx,miny,zoomRatio); Is it possible to transform the function to make it zoom smoothly ? Thx by advance !

推荐答案

请参见这个JS小提琴的例子为利用jQuery和拉斐尔的setViewBox这确实缩放和平移顺利。我们使用了完全相同的功能在一个更为复杂和更大的范围内，它完美的作品，并保持光滑，即使有大量在屏幕上绘制的项目。

See this JS Fiddle example for utilizing jQuery and Raphael's setViewBox which does both zooming and panning smoothly. We use the exact same functionality in a much more complicated and larger context and it works perfect and remains smooth even with a large number of items drawn on screen.

基本上，不要尝试和重新发明轮子。我知道这可能不是你正在寻找的答案，但它几乎肯定你最好的选择。

Basically, don't try and re-invent the wheel. I know this may not be the answer you are looking for, but it's almost certainly your best option.

这篇关于拉斐尔纸张缩放动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！