Kinetic JS - 检测形状边框的点击

【问题标题】：Kinetic JS - Detecting Click on Border of ShapeKinetic JS - 检测形状边框的点击
【发布时间】：2012-09-17 12:14:09
【问题描述】：

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

我的第一个想法是在形状的边框周围画线，不透明度可能为 1，然后使用它们的点击事件来获取点击。虽然有点 PT，所以我想我会在这里运行它，看看是否有任何其他想法。

感谢您的帮助！

【问题讨论】：

标签： click border shape kineticjs

【解决方案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);

【讨论】：