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

Question

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

Answer 1

Check out this: http://jsfiddle.net/TFU7Z/1/ Maybe is what you are looking for, I did not quite understand the question.

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

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

Just click anywhere to zoom. You can attach the "click" event listener to whatever part of the stage / document you want.

Answer 2

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

您可以为任何层、节点或整个舞台设置比例。做就是了：

   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 3

这些答案似乎不适用于 KineticJS 5.1.0。这些主要不适用于 scale 函数的签名更改：

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

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

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