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偏移舞台。这有效地将阶段中的相同点放回到鼠标下方。

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

还有一些旁注：

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

放大和缩小一点

1 个答案: