ファブリックオブジェクトの選択領域を増やす方法は？

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"にはヘルパーメソッドがあり、最も適切なものは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; 
}