0

KineticJS を使用してアプリケーションを作成しています。問題は、ユーザーが画像を外側に移動できないように、ポリゴン内の画像に dragBoundFunc を適用する必要があることです。多角形は、たとえば次のように、任意の形状にすることができます。

デモ

var polygon = new Kinetic.Polygon({
    points: [-5, 0, 75, 0, 70, 10, 70, 60, 60, 90, 61, 92, 64, 96, 66, 100, 67, 105, 67, 110, 67, 113, 66, 117, 64, 120, 63, 122, 61, 124, 58, 127, 55, 129, 53, 130, 50, 130, 20, 130, 17, 130, 15, 129, 12, 127, 9, 124, 7, 122, 6, 120, 4, 117, 3, 113, 3, 110, 3, 105, 4, 100, 6, 96, 9, 92, 10, 90, 0, 60, 0, 10],
    fill: 'none',
    stroke: '#000',
    strokeWidth: 0,
    name: 'polygon',
    draggable: false
});

画像がポリゴンの内側にある場合、チェックするアルゴリズムは何ですか? または、問題を解決するためのより良い方法は何ですか?

4

1 に答える 1

0

あなたの複雑なパスは問題を引き起こします

問題は、複雑なパス (あなたの例のように) では、内側のオブジェクトがパスの外側に逃げたかどうかを判断するために大規模な計算が必要になることです。

そして、これらの計算はすべての mousemove イベントで実行する必要があることに注意してください。Mousemove イベントは、毎秒何十回も発生する可能性があります。

私は KineticJS の経験があり、オブジェクトがパスの外にドラッグされる前に計算を完了できないため、複雑なパス内の境界オブジェクトは失敗すると思います。

代替案

別の方法として (設計が許す場合)、複雑なパスの周りに境界四角形を作成し、その境界四角形を使用して内側のオブジェクトを含めることができます。

同様に、複雑なパスの周りに境界円を作成し、その境界円を使用して内側のオブジェクトを含めることができます。

長方形および円形の境界領域は、オブジェクトが逃げる前に十分にすばやくチェックできます。

別の選択肢があります。

内側のオブジェクトは長方形であるため、長方形の 4 つの角すべてが複雑なパスの内側にあるかどうかを確認できます。4 つの角すべてがパスの内側にある場合、長方形は複雑なパスの内側にある可能性がありますが、必ずしもそうとは限りません。

ネイティブ キャンバスの context.isPointInPath(corner1X,corner1Y) を使用して、4 つのコーナーを確認できます。

このソリューションでは、次のことを行う必要があります。

  • 別のオフスクリーン html キャンバスを維持します。
  • そのオフスクリーン キャンバスに複雑なパスを描画します。
  • context.isPointInPath を使用して、長方形の 4 つの角をテストします。
于 2013-11-08T06:05:26.847 に答える