1

ステージ上に多角形 (正方形) があります。ユーザーがポリゴンの任意のエッジをクリックすると、そのポイントに新しい頂点が作成され、エッジの数が 1 つ増えます。

問題:ポリゴンのエッジ/ストロークのクリックをどのように検出できますか?

クリックを検出した後、クリックされた場所のポリゴンに新しい頂点/ポイントをどのように追加しますか? points新しいポイントがポリゴンの配列の最後に追加されると、ポリゴンが反時計回りに描画されるため、ポリゴンが重なる可能性があると推測しています。

jsfiddle の試み: http://jsfiddle.net/frpn7/

4

1 に答える 1

1

「クリック」に切り替えて、ポリゴン上のクリックをキャプチャします。

poly.on('click', function(e) {

残念ながら、これはポリゴンの内側でもクリックイベントをスローするため、境界線だけをクリック可能にしたい場合は、2 つのポリゴン (内側に 1 つ、境界線に 1 つ) を作成する必要があります。ポリゴン。

その方法を編集します。

これは、2 つの図形を組み合わせて 1 つのグループに入れることで実現できます。最初の形状には境界線があり、2 番目の形状には境界線がありません。

        var first_poly = new Kinetic.Polygon({
            points: [73, 192, 73, 160, 340, 23, 500, 109, 499, 139, 342, 93],
            fill: '#00D2FF',
            stroke: 'black',
            strokeWidth: 5
        });
        var second_poly = new Kinetic.Polygon({
            points: [73, 192, 73, 160, 340, 23, 500, 109, 499, 139, 342, 93],
            fill: '#00D2FF',
            stroke: 'black',
            strokeWidth: 0
        });

        first_poly.on("click",function(){
            alert("border clicked");
        })
        // add the shape to the layer
        layer.add(first_poly);
        layer.add(second_poly);
        stage.add(layer);

2 番目の部分を借用: Kinetic JS - 図形の境界線でのクリックの検出

ポリゴンの再描画の 3 番目の部分が次に来ます。抽象的に言えば、いつでもこれらのポリゴンをクリアして、ポリゴン全体を再度描画し直すことができます。最初に、ポリゴン ポイント配列内のクリックの新しい位置を決定します。各ポイントをループして最も近い2つのポイントを決定し、それらの間に挿入することで近似できます。

于 2012-12-22T17:46:20.303 に答える