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