0

いくつかの SVG パスを表示するキャンバスがあります。これらは、KonvaJs を使用して描画しました。ユーザーは、これらのパスのいずれかをクリックしてズームインできる必要があります。パスをクリックすると、キャンバスは、パスがキャンバスのフル サイズに収まるポイントにズームする必要があります。この JsFiddleを参照してください。(パスは別のソースからインポートされます)。

次のようにレイヤーをスケーリングできることを知っています。

layer.scale({ 
    x : 2,
    y : 2
});

しかし、適切なスケールを取得するために必要な値xと値がわかりません。y

それで、私の質問: KonvaJsを使用して、パスをコンテナに合わせてズーム/スケーリングする方法は?

私が何を意味するか知っていることを願っています。そうでない場合、AmCharts の Mapsはまさに私がやりたいことを実行してくれます。国をクリックすると、キャンバスが拡大されます。ズーム アニメーションがあると便利ですが、必須ではありません。AmCharts は私のニーズ (残りの部分) に合わないため、使用していません。

注: 以前に KineticJs を使用していたため、KonvaJs を使用し始めました。私が理解しているように、KineticJs はもう維持されていませんが、KonvaJs はそのフォークです (間違っていたら訂正してください)。これを行うためのより良いライブラリを知っている場合は、お知らせください。

4

1 に答える 1

1

nice 関数getClientRect()を使用して、コア形状のバウンディング ボックスを検出できます。

    var rect = e.target.getClientRect();
    var scale = Math.max(
        stage.width() / rect.width,
      stage.height() / rect.height
    );
    layer.x(-rect.x * scale);
    layer.y(-rect.y * scale);
    layer.scale({x: scale, y: scale});

デモ: https://jsfiddle.net/g06utup0/1/

注: デモを作成しているときに、Path.getClientRect() の計算にバグが見つかりました。したがって、レポの最新バージョンを使用する必要があります。

于 2016-02-04T23:07:08.703 に答える