在Fabric.js组中管理路径边界框PathOffest

时间:2019-11-20 14:50:28

标签: javascript

使用Fabric.js框架时出现问题。 我需要制作它,使其显示如下图所示,

https://i.stack.imgur.com/mqNl4.png

但是我的代码在这里

var dims = path._calcDimensions();
this.gun.set({
  strokeWidth: 3 * camera.z,
  width: dims.width,
  height: dims.height,
  pathOffset: {
    x: dims.width / 2 + dims.left,
    y: dims.height / 2 + dims.top
  }
});
console.log(this.gun.getBoundingRect());
this.gun.setCoords();
this.gun.set({path: path.path});

使其始终位于路径图像的中间。

https://i.stack.imgur.com/HpLBE.png

如果我调整中心,则路径会被剪掉。

this.gun.set({
  strokeWidth: 3 * camera.z,
  width: dims.width,
  height: dims.height,
  /*pathOffset: {
    x: dims.width / 2 + dims.left,
    y: dims.height / 2 + dims.top
  }*/
});

https://i.stack.imgur.com/nvKM3.png

图片中的矩形是边界框

canvas.on('after:render', function() {
  canvas.contextContainer.strokeStyle = '#555';

  canvas.forEachObject(function(obj) {
    var bound = obj.getBoundingRect();
    //console.log(bound);

    canvas.contextContainer.strokeRect(
      bound.left + 0.5,
      bound.top + 0.5,
      bound.width,
      bound.height
    );
  })
});

Halp plz!

0 个答案:

没有答案