fabricjs - 如何增加织物对象的选择区域？

Question

考虑以下代码：

var lineObj = new fabric.Line([120,200,320,200],{
  stroke: '#000000',
  strokeWidth: 1
});
canvas.add(lineObj);

这 1 像素线由于其宽度非常小，因此很难选择。我希望在这里做的是增加它的选择区域。像这样：

有什么办法可以做到这一点吗？

Answer 1

是的，我们对此padding有价值。

var lineObj = new fabric.Line([120,200,320,200], {
  stroke: '#000000',
  strokeWidth: 1,
  padding: 20
});
canvas.add(lineObj);

我有没有提到 Fabric 灵活而强大？:)

@markE 不错的解决方案！很高兴您发现浏览源代码很容易。

Answer 2

坏消息——API 中没有解决方案/好消息——您可以编写解决方案

API 没有提供扩展线条边界框的方法，因此没有 API 方法可以为线条获得更大的选择区域。

FabricJS 是开源且组织良好的，源代码本身有有用的注释。这是我发现的...

“线”对象扩展“对象”对象。“对象”有辅助方法，最相关的是文件 object_geometry.mixin.js。在那里，我发现任何对象的边界框都是使用 getBoundingRect() 方法生成的。

你确实问过“有什么办法……”，所以就是这样：

因此，要解决您的问题，您必须为线条覆盖 getBoundingRect() 并使其稍宽。这将自动使您的线条的选择区域更宽，更容易点击。@Kangax，请随时指出任何更简单的解决方案！

为了帮助您入门，这里是源文件 object_geometry.mixin.js 中 getBoundingRect() 的源代码：

getBoundingRect: function() {
  this.oCoords || this.setCoords();

  var xCoords = [this.oCoords.tl.x, this.oCoords.tr.x, this.oCoords.br.x, this.oCoords.bl.x];
  var minX = fabric.util.array.min(xCoords);
  var maxX = fabric.util.array.max(xCoords);
  var width = Math.abs(minX - maxX);

  var yCoords = [this.oCoords.tl.y, this.oCoords.tr.y, this.oCoords.br.y, this.oCoords.bl.y];
  var minY = fabric.util.array.min(yCoords);
  var maxY = fabric.util.array.max(yCoords);
  var height = Math.abs(minY - maxY);

  return {
    left: minX,
    top: minY,
    width: width,
    height: height
  };
},

/**
 * Returns width of an object
 * @method getWidth
 * @return {Number} width value
 */
getWidth: function() {
  return this.width * this.scaleX;
},

/**
 * Returns height of an object
 * @method getHeight
 * @return {Number} height value
 */
getHeight: function() {
  return this.height * this.scaleY;
},

/**
 * Makes sure the scale is valid and modifies it if necessary
 * @private
 * @method _constrainScale
 * @param {Number} value
 * @return {Number}
 */
_constrainScale: function(value) {
  if (Math.abs(value) < this.minScaleLimit) {
    if (value < 0)
      return -this.minScaleLimit;
    else
      return this.minScaleLimit;
  }

  return value;
}