放大和缩小一个点

Question

我正在尝试制作一个可以通过鼠标滚轮进行缩放的舞台。我正在使用 stage.scale 和 jquery 事件。但是我无法以鼠标指针为中心进行缩放。所以当我的鼠标在一个点上时，我想把它集中放大。

我已经做了这个例子，但现在不起作用： http://fiddle.jshell.net/rr7pLapz/1/

这是我的缩放功能：

$("#cont").bind('mousewheel', function(e) {
        var x = e.offsetX;
        var y = e.offsetY;
        if (e.originalEvent.wheelDelta > 0) {
                STAGE.scale({
                    x:STAGE.scale().x+1,
                    y:STAGE.scale().y+1
                });
                STAGE.x(-x + 500/(STAGE.scale().x));
                STAGE.y(-y + 350/(STAGE.scale().y));
                STAGE.batchDraw();
        }
        else {
            if (STAGE.scale().x > 1) {
                STAGE.x(-x + 500/(STAGE.scale().x));
                STAGE.y(-y + 350/(STAGE.scale().y));
                STAGE.scale({
                    x:STAGE.scale().x-1,
                    y:STAGE.scale().y-1
                });
                STAGE.batchDraw();
            }
        }
});

你能帮忙吗？非常感谢。

Answer 1

这是一个手动的方法：

首先，将鼠标位置存储在舞台坐标中。然后应用比例，并在舞台坐标中获得新的鼠标位置。然后通过 oldPosition - newPosition 偏移舞台。这有效地将舞台中的相同点放回鼠标下方。

或者正如马克所说，你可以通过图层偏移来做到这一点。虽然这可能不是最方便的方法，但取决于您的项目如何设置以使用动力学的功能。请参阅以下链接： Scaling to a fixed point in KineticJS KineticJS Canvas - Scale group from center point

还有一些旁注：

• 您在该代码中有一些重复。为什么不只在每个 wheelDelta 条件下使用一行来确定 newScale，然后在以下几行中使用该变量。
• 我发现scale *= 1.2 和scale /= 1.2 可以平滑缩放，而不是直接添加。只是一个建议。