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

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

谢谢您的帮助!

#1楼 票数: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);

  ask by Sacred Socks translate from so

未解决问题?本站智能推荐:

2回复

Kinetic.js通过颜色变化获得形状命中区域

首先,我有不同形状的图像,我必须重新着色它们,并且只有当鼠标在形状上时才设置命中区域(对于onclick事件)。 所以在分别调查问题之后,我找到了两种解决方案,但我不知道如何将两者结合使用。 - 仅使用形状命中区域,我使用.cache(),将图像存储在缓存上并重绘它而不使用透明像素。
3回复

Canvas(Kinetic.JS):多层与单层方法

任何人都可以解释为什么(实际上, 如果 )在使用像Kinetic这样的东西时最好将画布游戏的主要部分抽象到不同的层次? 它当然感觉就像你应该的那样,到目前为止我一直是:背景的一层,玩家角色的一层,以及其他层。 然后我遇到了一个情况,我需要一个图层的形状坐在另一个图层的形状后面 - 但
1回复

画布(Kinetic.JS)-未出现克隆的组吗?

我在玩Kinetic,似乎无法弄清楚为什么我要克隆的组不会出现。 小提琴: http : //jsfiddle.net/DgwLd/3/ 我可以克隆形状没有问题-只是没有出现组。 该文档确认可以克隆组,所以我不确定此处的内容。 这是小提琴的代码: 更新 -似乎克隆一个组不
1回复

在Kinetic JS中单击时将形状放在最前面

一旦在Kinetic JS中“选择”或单击了形状,是否可以将形状带到html画布的前面? 我可以在形状中添加样式,但是我无法将所选形状显示在前面。 我已经看到了数百个示例,这些示例使用单独的按钮将它们移到最前面。 有this.moveToTop()吗? 这是我当前用来在选择形状后向其
1回复

用键盘移动dynamicJS形状

我想用键盘箭头移动一些形状。 我已经阅读了一些教程,但到目前为止,似乎没有任何帮助。 我认为问题在于我如何处理键盘事件,所以请看一看。 编辑 这是网页的图片,我想移动里面是白色的矩形。
2回复

在HTML5画布中屏蔽形状?

如果在其他地方被问过这个问题,我很难道歉,因为它很难说,所以我找不到任何东西。 有没有办法在画布上实现蒙版? 例如,仅使用形状(没有图像)我绘制一个带窗口的房子。 我也有一个代表一个人的形状。 我希望那个人出现在窗口 - 但显然只有窗口允许才能看到这个人。 其余的将被掩盖。
2回复

鼠标事件不会触发kineticjs形状

从4.0.5升级到4.4.1,因为Chrome已正确停止渲染。 但是,在4.0.5版本中,可以在Kinetic.Shape对象中绘制一条线并检测其上的鼠标事件。 这似乎不再是这种情况。 即使使用推荐的Canvas.fillStroke(this)调用。 这是一些代码: 这
1回复

KineticJS从另一个形状中减去一个形状

我有一个KineticJs阶段,用户可以在其中绘制对象-矩形和多边形。 我希望用户能够选择任意两个对象,并从第二选择的形状中减去第一选择的形状。 理想情况下,用户可以从上下文菜单中选择选项(“减去该形状”,“从该形状”),并且切割形状不会受到影响,只有切割形状会发生变化。 我坚