動力學js如何在一個舞臺上縮放圖層？

enter image description here 動力學js如何在一個舞臺上縮放圖層？

我想添加縮放功能我的應用程序。我使用Kinetic js和某處找到了此功能的解決方案，但由於某些原因，我無法應用這些解決方案。我試圖調整解決方案，但沒有成功。我有許多Kinetic.Layer，其中一些會在縮放應用時縮放。我的挑戰是：縮放將發生在鼠標位置。我找到的解決方案給我：縮放後的layer.setPosition（）。正如我之前提到的，我不能使用「layer.setPosition」我會這樣做，因爲使用stage.setPosition（），但我無法準確計算新的位置x和y。任何人都可以提出任何解決方案嗎？

來源

2013-02-08 magirtopcu

無法理解這個問題很清楚。考慮用更多的例子重寫？或只有我？ – allenhwkim

當縮放設置比例時，您真正想要做什麼。

您可以設置任何圖層，節點或整個舞臺的比例。只要這樣做：

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

來源

2013-02-08 15:27:41 SoluableNonagon

看看這個：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」事件監聽器附加到您想要的任何舞臺/文檔部分。

來源

2013-03-08 13:56:06 psu

這些答案似乎不適用於KineticJS 5.1.0。這些不工作主要是針對規模函數的簽名更改：

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

但是，下面的解決方案似乎與KineticJS 5.1.0工作：

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

來源

2014-11-12 05:52:44

動力學js如何在一個舞臺上縮放圖層？

回答

相關問題