click - キネティックJS-形状の境界線のクリックを検出

Question

面白い仕事があります。KineticJSで図形の境界線のクリックを検出する必要があります。この場合、形状は多角形ですが、どの形状でも機能する場合はボーナスポイントがあります。

私の最初のアイデアは、おそらく不透明度1で、図形の境界の周りに線を描画し、クリックを取得するときにクリックイベントを使用することです。少しPTですが、ここを通り過ぎて、他にアイデアがあるかどうかを確認したいと思いました。

助けてくれてありがとう！

Answer 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);