Kinetic js如何在一个阶段缩放图层？

Question

我想在我的应用中添加缩放功能。我使用Kinetic js和某处我找到了这个功能的解决方案，但由于某些原因我无法应用这些解决方案。我试图调整解决方案，但不成功。我有很多Kinetic.Layer，其中一些会在缩放应用时缩放。我的挑战是：缩放将发生在鼠标位置。我发现的解决方案给了我：缩放后的​​layer.setPosition（）。正如我之前提到的，我不能使用“layer.setPosition”我将使用stage.setPosition（）执行此操作，但我无法准确计算位置100％的新x和y。有人能建议我解决方法吗？

Answer 1

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

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

   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.
   }

Answer 2

看看这个：http://jsfiddle.net/TFU7Z/1/也许是你在找什么，我不太明白这个问题。

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

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

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

Answer 3

这些答案似乎与KineticJS 5.1.0无关。这些主要不适用于比例函数的签名变化：

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

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

JSFiddle：http://jsfiddle.net/rpaul/ckwu7u86/3/