如何增加一個結構對象的選擇區域？

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