如何增加Fabric对象的选择区域？

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是开源的，组织良好，源代码本身也有很多有用的注释。 这是我发现的......

“Line”对象扩展“Object”对象。 “对象”有辅助方法，最相关的是文件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;
}