Javascript 如何在舞台上缩放图层？

---

我想在我的应用程序中添加缩放功能。我使用了Kinetic js，在某处我找到了该功能的解决方案，但由于某些原因，我无法应用这些解决方案。我试图调整解决方案，但没有成功。我有很多动态图层，其中一些会在缩放应用时缩放。我的挑战是：缩放将发生在鼠标位置上。我找到的解决方案是：缩放后的layer.setPosition（）。正如我前面提到的，我不能使用“layer.setPosition”，我将使用stage.setPosition（）来实现这一点，但我无法100%准确地计算位置的新x和y。有人能给我建议一些解决方法吗？

缩放时您真正想做的是设置缩放比例

可以为任何图层、节点或整个舞台设置比例。只要做：

   layer1.setScale(2,2); // this doubles the layer size from the original

这不会影响任何其他层，因此覆盖层将保持不变

此外，您还应执行以下操作：

   layer1.setPosition(x,y); // this will move the layer to the fixed point you want.

总之，你可以做到：

   function zoom(){
       var position = stage.getUserPosition();
       layer1.setScale(2,2);
       layer1.setPosition(position.x - layer2.getX(), position.y - layer2.getY()); //move the layer by an offset based on the second layer. This isn't exactly correct so it's something you have to experiment with.
   }

看看这个：也许这就是你想要的，我不太明白这个问题

        var zoom = function(e) {
          var zoomAmount = 1;
          layer.setScale(layer.getScale().x+zoomAmount)
          layer.draw();
        }

        document.addEventListener("click", zoom, false)

---

只需单击任意位置即可缩放。您可以将“单击”事件侦听器附加到舞台/文档的任何部分。

这些答案似乎不适用于KineticJS 5.1.0。这些主要不适用于比例函数的特征变化：

 stage.setScale(newscale); --> stage.setScale({x:newscale,y:newscale});

但是，以下解决方案似乎适用于KineticJS 5.1.0：

---

JSFIDLE:

我不能清楚地理解这个问题。考虑改写更多的例子吗？还是只有我？