0

我有一条笔画宽度为 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/

任何指出我错过了什么的帮助表示赞赏。

谢谢。

4

3 回答 3

2

您实际上可以使用一条线作为 Line 对象的命中区域。您可以通过两种方式实现这一目标：

  1. 将线条的内部 colorKey 指定为 strokeStyle 并使用本机画布描边：

    context.lineWidth = 10; context.strokeStyle = this.colorKey; context.stroke();

  2. 另一种解决方案是在调用fillStroke之前设置strokeWidth，然后将其设置回来：

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

于 2013-07-19T12:53:37.930 回答
2

在 Kinetic 4.7.2 中，解决方案如下所示：

  drawHitFunc: function(context) {
    var hitWidth = 50;
    context.beginPath();
    context.moveTo(this.getPoints()[0].x, this.getPoints()[0].y);
    context.lineTo(this.getPoints()[1].x, this.getPoints()[1].y);
    context.closePath();
    var orgWidth = this.getStrokeWidth();
    this.setStrokeWidth(hitWidth);
    context.fillStrokeShape(this);
    this.setStrokeWidth(orgWidth);
  }
于 2013-10-29T01:17:12.587 回答
0

是的，看起来 KineticJS 不喜欢自定义命中测试行。

相反，这可行……而不是在自定义命中测试中使用“胖”线，只需围绕该线绘制一个矩形。

这是代码和小提琴：http: //jsfiddle.net/m1erickson/twUqx/

  var line = new Kinetic.Line({
        points: [fromX, fromY, toX, toY],
        stroke: drawColor,
        strokeWidth: 2,
        name: 'line',
        draggable:true,
        drawHitFunc: function(canvas) {
          var x1=this.getPoints()[0].x;
          var y1=this.getPoints()[0].y;
          var x2=this.getPoints()[1].x;
          var y2=this.getPoints()[1].y;
          var context = canvas.getContext();
          context.beginPath();
          context.lineWidth = 25;
          context.moveTo(x1-12,y1-12);
          context.lineTo(x2+12,y1-12);
          context.lineTo(x2+12,y2+12);
          context.lineTo(x1-12,y2+12);
          context.closePath();
          canvas.fillStroke(this);
        }
    });

请注意，我画了一条水平线，因为我不想为旋转线计算三角=）

于 2013-03-01T21:33:34.983 回答