javascript - キネティックjsステージでレイヤーをスケーリングする方法は?

Question

アプリにズーム機能を追加したい。私は Kinetic js を使用しており、どこかでこの機能の解決策を見つけましたが、何らかの理由でこれらの解決策を適用できません。私は解決策を適応させようとしましたが、失敗しました。私は多くの Kinetic.Layer を持っています。それらのいくつかは、ズームが適用されるとスケーリングします。私の課題は、マウスの位置でズームが発生することです。私が見つけた解決策は私に与えます：スケーリング後のlayer.setPosition（）。前に言ったように、「layer.setPosition」を使用してはいけません。stage.setPosition() を使用してこれを行いますが、位置の新しい x と y を 100% 正確に計算できませんでした。誰かが私に解決策を提案できますか?

Answer 1

これらの回答は、KineticJS 5.1.0 では機能しないようです。これらは、主にスケール関数の署名の変更には機能しません。

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

ただし、次のソリューションは KineticJS 5.1.0 で機能するようです。

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

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)

どこでもクリックするだけでズームできます。「クリック」イベントリスナーは、ステージ/ドキュメントの任意の部分にアタッチできます。