kineticjs自定义命中区域无法正常工作 [英] kineticjs custom hit region not working

问题描述

我有一条行程宽度为2的可拖动线条，并希望用户能够拖动线条，即使他点击并拖动周围区域附近也是如此。根据我的理解，这样做的方法是为该行定义一个自定义drawHitFunc。我在这里修改了教程中的代码： http：// www.html5canvastutorials.com/kineticjs/html5-canvas-kineticjs-custom-hit-function-tutorial/ 为该行定义我的自定义drawHitFunc。

I have a draggable line with a stroke width of 2 and want the user to be able to drag the line even if he clicks and drags near the surrounding area. As per my understanding, the way to do that is to define a custom drawHitFunc for the line. I adapted the code from tutorial here: http://www.html5canvastutorials.com/kineticjs/html5-canvas-kineticjs-custom-hit-function-tutorial/ to define my custom drawHitFunc for the line.

我的自定义绘制命中功能很简单 - 相同但更粗（25像素宽）。但是，这似乎不起作用。只有当我小心地将鼠标指针放在线上然后拖动时，拖动才有效。基于下面定义的drawHitFunc，即使我在该行附近单击并拖动它也应该工作。我做错了什么？

My custom draw hit function is simple--same line but much thicker (25 pixels wide). However, this does not seem to work. The drag only works if I carefully place my mouse pointer right on the line and then drag. Based on the drawHitFunc defined below, it should work even if I click and drag near the line. What am I doing wrong?

这是drawHitFunc片段：

Here is the drawHitFunc snippet:

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

完整的失败示例位于：< a href =http://jsfiddle.net/BwF6K/ =nofollow> http://jsfiddle.net/BwF6K/

The full failing example is at: http://jsfiddle.net/BwF6K/

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

Any help pointing out what I missed is appreciated.

谢谢。

推荐答案

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

Yes, it looks like KineticJS doesn’t like custom hit-testing a line.

相反，这可行...而不是在自定义中使用胖行hittest，只需在线条周围画一个矩形。

Instead, this works…rather than using a "fat" line in the custom hittest, just draw a rectangle around the line.

这是代码和小提琴： 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);
        }
    });

请注意，我画了一条水平线，因为我觉得我不想用旋转的三角形line =）

Notice that I drew a horizontal line because I didn’t feel like working out the trig for a rotated line =)

这篇关于kineticjs自定义命中区域无法正常工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！