Kinetic JS-检测单击形状边界

Question

我有一个有趣的任务。 我需要检测Kinetic JS中形状边界的点击。 在这种情况下，形状是多边形，但如果它适用于任何形状，则奖励积分。

我的第一个想法是在形状的边界周围绘制线条，也许不透明度为1，然后在点击时使用其单击事件。 虽然有点PT，所以我以为我会在这里跑过去，看看是否还有其他想法。

谢谢您的帮助！

Answer 1

您可以通过将两个形状组合在一起并将它们放在一组中来实现。 第一个形状将具有边框，第二个形状将不具有边框。

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