Question

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

任何帮助指出我错过的内容都表示赞赏。

感谢。

Answer 1

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

将线条的内部colorKey指定为strokeStyle并使用原生画布笔划：

context.lineWidth = 10; context.strokeStyle = this.colorKey; context.stroke（）;
另一个解决方案是在调用fillStroke之前设置strokeWidth，然后再将其设置为：

this.setStrokeWidth（10）; canvas.fillStroke（本）; this.setStrokeWidth（3）;

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

Answer 3

是的，看起来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);
        }
    });

请注意，我绘制了一条水平线，因为我不想为旋转线计算出触发器=）

kineticjs自定义命中区域无法正常工作

3 个答案: