我有一条笔划宽度为 2 的可拖动线,并且希望用户即使在周围区域附近单击并拖动也能够拖动该线。根据我的理解,做到这一点的方法是为该线定义一个自定义的drawHitFunc。我改编了这里的教程中的代码:http://www.html5canvastutorials.com/kineticjs/html5-canvas-kineticjs-custom-hit-function-tutorial/为该线定义我的自定义drawHitFunc。
我的自定义绘制命中函数很简单——相同的线条但更粗(25 像素宽)。然而,这似乎不起作用。仅当我小心地将鼠标指针放在该线上然后拖动时,拖动才有效。根据下面定义的drawHitFunc,即使我单击并拖动该线附近,它也应该可以工作。我做错了什么?
这是drawHitFunc 片段:
function(canvas) { var context = canvas.getContext(); context.beginPath(); context.lineWidth = 25; context.moveTo(this.getPoints()[0].x, this.getPoints()[0].y); context.lineTo(this.getPoints()[1].x, this.getPoints()[1].y); context.closePath(); canvas.fillStroke(this); }
完整的失败示例位于:http://jsfiddle.net/BwF6K/
任何指出我错过的内容的帮助都会受到赞赏。
谢谢。
最佳答案
您实际上可以使用一条线作为 Line 对象的点击区域。您可以通过两种方式实现这一目标:
将线条的内部 colorKey 指定为描边样式并使用 native Canvas 描边:
上下文.lineWidth = 10; context.strikeStyle = this.colorKey; 上下文.中风();
另一种解决方案是在调用 fillStroke 之前设置描边宽度,然后再将其设置回来:
this.setStrokeWidth(10); canvas.fillStroke(this); this.setStrokeWidth(3);
关于javascript - Kineticjs 自定义命中区域不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15166747/