Question

我已经阅读了一些文章，仅用于检测圆形或矩形周边的命中。实现它的一些变通方法是通过对形状的单击事件或创建组进行数学运算来完成。没关系。 但是我们有什么方法可以通过创建一个自定义绘制函数来实现它，该函数只绘制一个矩形的圆周，圆形（仅限笔划）。

非常感谢任何帮助。

Answer 1

如果设置了点击功能，这非常简单。这是一个jsfiddle：

http://jsfiddle.net/L3EST/

关键是在自定义命中函数中使用strokeShape（）方法而不是fillStrokeShape（），这是默认命中函数使用的方法。

  var rect = new Kinetic.Rect({
    x: 10,
    y: 10,
    width: 100,
    height: 50,
    fill: 'red',
    stroke: 'black',
    strokeWidth: 10,
    drawHitFunc: function(context) {
      context.beginPath();
      context.rect(0, 0, this.getWidth(), this.getHeight());
      context.closePath();
      context.strokeShape(this);
    }
  });

在jsfiddle中附加事件后，当鼠标移动或鼠标移出形状周边时，会触发事件。

KineticJS中的自定义drawfunc

1 个答案: