javascript - Kineticjs 自定义命中区域不起作用

标签 javascript html5-canvas kineticjs

我有一条笔划宽度为 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 对象的点击区域。您可以通过两种方式实现这一目标:

  1. 将线条的内部 colorKey 指定为描边样式并使用 native Canvas 描边:

    上下文.lineWidth = 10; context.strikeStyle = this.colorKey; 上下文.中风();

  2. 另一种解决方案是在调用 fillStroke 之前设置描边宽度,然后再将其设置回来:

    this.setStrokeWidth(10); canvas.fillStroke(this); this.setStrokeWidth(3);

关于javascript - Kineticjs 自定义命中区域不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15166747/

相关文章:

javascript - 使用 Kineticjs 在 mousemove 事件上绘制圆弧

javascript - JSON 中所需的帮助

javascript - 如何在 contenteditable 元素中保持插入符号的位置

javascript - HTML5 Canvas 绘制 tileset

javascript - 在没有多个 Canvas 的情况下对 Canvas 进行分层

javascript - 如何在页面加载时显示运行进度条

javascript - CSS3动画-变换: scale3D on firefox 45. 0

javascript - 右括号前空行的 eslint 规则

ember.js - 如何从 DOM 中的现有元素设置 subview 元素

javascript - 奇怪的 Kineticjs 性能问题