Kinetic JS - 检测点击边框的形状 [英] Kinetic JS - Detecting Click on Border of Shape

问题描述

我有一个有趣的任务。我需要检测在Kinetic JS中的形状的边框上点击。在这种情况下，形状是一个多边形，但如果它工作与任何形状的奖励点。

I've got an interesting task. I need to detect a click on the border of a shape in Kinetic JS. In this case the shape is a polygon but bonus points if it works with any shape.

我的第一个想法是在形状的边框绘制线，不透明度为1，然后使用他们的点击事件来拾取点击。

My first idea would be to draw lines around the border of the shape, perhaps with an opacity of 1, and then using their click events on pick up the click. It's a bit of PT though so I thought I'd run it past here and see if there were any other ideas.

感谢您的帮助！

推荐答案

您可以将两个形状组合在一起并将它们放在一个组中。第一个形状将有一个边框，第二个形状没有边框。

You can do it by combining two shapes together and put them in one group. The first shape will have a border and the second one with no border.

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

这篇关于Kinetic JS - 检测点击边框的形状的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！