Question

我是fabricjs的新手。

这可以通过边界框移动对象吗？

类似的东西：

object.boundingBox.left=10;

或类似的方法：

object.setBoundingBox("left",30);

Answer 1

Fabric中没有这样的东西，但你可以添加自己的getBoundingBox函数：

fabric.util.object.extend(fabric.Object.prototype, {
  setBoundingBox: function(prop, val) {
    var bbox = this.getBoundingRect();
    this.set(prop, (this[prop] - bbox[prop]) + val);
    this.setCoords();
  }
});

并像这样使用它：

object.setBoundingBox("left",30);

Answer 2

没有可以使用boundingRect设置左侧的属性，但您可以使用下面的代码。它将根据boundingRect设置对象的位置。您也可以通过在此代码中将left替换为top来执行相同的顶部位置。

var  left = 10 + Math.abs(object.left - object.getBoundingRect().left )
object.left = left ;

祝你好运：）

Answer 3

我编写了一个限制对象移动到边界框的函数：

function limitObjMovement(rectBox, obj) {
  if ( rectBox.getLeft() <= obj.getLeft() ) {
    rectBox.setLeft( obj.getLeft() );
  }
  else if ( rectBox.getLeft() + rectBox.getWidth() >= obj.getLeft() + obj.getWidth() ) {
    rectBox.setLeft( obj.getLeft() + ( obj.getWidth() - rectBox.getWidth() ) );
  }
  if ( rectBox.getTop() <= obj.getTop() ) {
    rectBox.setTop( obj.getTop() );
  }
  else if ( rectBox.getTop() + rectBox.getHeight() >= obj.getTop() + obj.getHeight() ) {
    rectBox.setTop( obj.getTop() + ( obj.getHeight() - rectBox.getHeight() ) );
  }
}

canvas.on("object:moving", function() {
  limitObjMovement(boundingBoxObj, movingObj);
});

fabricjs：通过boundingbox移动对象

3 个答案: