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