Question

为了缩放raphael纸，我设法做了一些破解，因为setviewbox不适合我，这是我写的功能：

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);

是否可以转换功能以使其平滑变焦？

Answer 1

对于任何想要进行缩放的人（像我一样）顺利平移动画看看这里：

https://groups.google.com/forum/?fromgroups#!topic/raphaeljs/7eA9xq4enDo

这个剪辑帮助我自动化并动画缩放和平移到画布上的特定点。（道具到Will Morgan）

Raphael.fn.animateViewBox = function(currentViewBox, viewX, viewY, width, height, duration, callback) {

    duration = duration || 250;

    var originals = currentViewBox, //current viewBox Data from where the animation should start
        differences = {
                x: viewX - originals.x,
                y: viewY - originals.y,
                width: width - originals.width,
                height: height - originals.height
        },
        delay = 13,
        stepsNum = Math.ceil(duration / delay),
        stepped = {
                x: differences.x / stepsNum,
                y: differences.y / stepsNum,
                width: differences.width / stepsNum,
                height: differences.height / stepsNum
        }, i,
        canvas = this;

    /**
     * Using a lambda to protect a variable with its own scope.
     * Otherwise, the variable would be incremented inside the loop, but its
     * final value would be read at run time in the future.
     */
    function timerFn(iterator) {
            return function() {
                    canvas.setViewBox(
                            originals.x + (stepped.x * iterator),
                            originals.y + (stepped.y * iterator),
                            originals.width + (stepped.width * iterator),
                            originals.height + (stepped.height * iterator)
                    );
                    // Run the callback as soon as possible, in sync with the last step
                    if(iterator == stepsNum && callback) {
                            callback(viewX, viewY, width, height);
                    }
            }
    }

    // Schedule each animation step in to the future
    // Todo: use some nice easing
    for(i = 1; i <= stepsNum; ++i) {
            setTimeout(timerFn(i), i * delay);
    }

}

Answer 2

请参阅this JS Fiddle example以了解如何使用jQuery和Raphael的setViewBox，它可以平滑地进行缩放和平移。我们在更复杂和更大的环境中使用完全相同的功能，即使屏幕上绘制了大量项目，它也能完美呈现并保持平滑。

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

编辑：我修复了附加的小提琴（由于JSFiddle对网站所做的更改而被破坏）但显然SO不会让我保存JSFiddle链接而不包含一些代码，所以......

console.log("hello world!");

Answer 3

对于patrics的小修改'摆脱“currentViewBox”的答案......这适用于Raphael 2.1.0：

Raphael.fn.animateViewBox = function(viewX, viewY, width, height, duration, callback) {

    duration = duration || 250;

    //current viewBox Data from where the animation should start
    var originals = {
            x: this._viewBox[0], 
            y: this._viewBox[1], 
            width: this._viewBox[2], 
            height: this._viewBox[3]
    }, 
    differences = {
            x: viewX - originals.x,
            y: viewY - originals.y,
            width: width - originals.width,
            height: height - originals.height
    },
    delay = 13,
    stepsNum = Math.ceil(duration / delay),
    stepped = {
            x: differences.x / stepsNum,
            y: differences.y / stepsNum,
            width: differences.width / stepsNum,
            height: differences.height / stepsNum
    }, i,
    canvas = this;

    /**
     * Using a lambda to protect a variable with its own scope.
     * Otherwise, the variable would be incremented inside the loop, but its
     * final value would be read at run time in the future.
     */
    function timerFn(iterator) {
        return function() {
                canvas.setViewBox(
                        originals.x + (stepped.x * iterator),
                        originals.y + (stepped.y * iterator),
                        originals.width + (stepped.width * iterator),
                        originals.height + (stepped.height * iterator),
                        true
                );
                // Run the callback as soon as possible, in sync with the last step
                if(iterator == stepsNum && callback) {
                        callback(viewX, viewY, width, height);
                }
        }
    }

    // Schedule each animation step in to the future
    // Todo: use some nice easing
    for(i = 1; i <= stepsNum; ++i) {
        setTimeout(timerFn(i), i * delay);
    }
}

Sry如果发布一个mod是不礼貌的话。随意将它合并到patrics'版本中，但随后评论没有意义。

Answer 4

与上述类似，但存在差异：

不依赖于内部（已经改变）
不需要任何全局设置（由您处理）
使用requestAnimationFrame，从而产生更流畅的动画（但在IE9或以下不起作用）
使用Raphael's easing functions（linear，easeIn，easeOut，easeInOut，backIn，backOut，{{1} }，elastic）

由于这是完全重写，我没有修改上述内容。

bounce

拉斐尔纸张缩放动画

4 个答案: