Question

基于其他SO问题（参见底部的信用点），我想出了一种方法，用KineticJS动画“缩放到光标”效果。

这是fiddle。

相关部分如下：

zoom: function(event) {
    event.preventDefault();
    var evt = event.originalEvent,
        mx = evt.clientX - ui.stage.getX(),
        my = evt.clientY - ui.stage.getY(),
        zoom = (ui.zoomFactor - (evt.wheelDelta < 0 ? 0.4 : -0.4)),
        newscale = ui.scale * zoom;

    ui.origin.x = mx / ui.scale + ui.origin.x - mx / newscale;
    ui.origin.y = my / ui.scale + ui.origin.y - my / newscale;

    zoomTween = new Kinetic.Tween({
        node: ui.layer, 
        duration: 0.8,
        offsetX: ui.origin.x,
        offsetY: ui.origin.y,
        scaleX: newscale,
        scaleY: newscale
    });
    zoomTween.play();

    ui.scale *= zoom;
}

我应该在代码中更改哪些内容以避免“弹跳”效果，尤其是在快速放大/缩小时？

我的代码是此jsfiddle的分支（附于this answer），有3个小修改：

使用KineticJS 5.1.0
使用Tween为偏移和缩放属性设置动画
图层正在被取消/缩放而非舞台，因为舞台与Tween

其他学分：

Zoom Canvas to Mouse Cursor：优秀的仅画布解决方案
https://stackoverflow.com/a/13663169/4066116：KineticJS版本

平滑＆＃34;缩放到光标＆＃34;动画与KineticJS

0 个答案: