如何增加一个结构对象的选择区域？

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

我提到面料是灵活和强大？ :)

@markE尼斯解决方案！很高兴你发现很容易通过源代码。

Answer 2

坏消息 - 在API /好消息无解 - 你可以代码解决方案

的API不提供一种方法来扩展线的外接矩形框，所以没有API以获得更大的线路选择区域。

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

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

你并问：“有什么办法......”，所以这里是这样：

所以要解决你的问题，你必须过骑getBoundingRect（）为线，使其稍宽。这将自动使您的线条选区更宽，更容易点击。 @Kangax，随时指出任何更简单的解决方案！

为了让您一开始，这里是getBoundingRect源（）从源文件object_geometry.mixin.js：

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