边界框外观 - 使用 fabricjs 控制自定义答案

【问题标题】：bounding box appearance - controls customization with fabricjs边界框外观 - 使用 fabricjs 控制自定义
【发布时间】：2021-11-04 00:04:05
【问题描述】：

我想知道有没有办法改变边界框图标，我阅读了fabric.js中的源代码，它为边界框生成方形框，但我想将其更改为圆形或更改为我的自定义外观。你能给我建议吗？

【问题讨论】：

我知道这个问题已经很老了，现在可能不符合您的兴趣，但请查看并批准它，以便其他用户可以从中受益

标签： javascript overriding fabricjs

【解决方案1】：

自定义控件的最快方法是编写自己的_drawControl 函数并使其与fabricjs 标准兼容以覆盖它。请记住，每次渲染都会调用此函数 9 次，因此请尽量减少代码和绘图。此外，如果您修改上下文 ( ctx )，请记住使用 .save 和 .restore 以免弄乱渲染管道。

FabricJs 将调用函数并使用 top 和 left 准备好矩形，因此角将位于 top + size/2 和 left + size/2，其中大小为 this.cornerSize

function newControls(control, ctx, methodName, left, top) {
  if (!this.isControlVisible(control)) {
        return;
      }
      var size = this.cornerSize;
      isVML() || this.transparentCorners || ctx.clearRect(left, top, size, size);
      ctx.arc(left + size/2, top + size/2, size/2, 0, 2 * Math.PI, false);
      ctx.stroke();
}

fabric.Object.prototype._drawControl = newControls;

function newControls(control, ctx, methodName, left, top) {
  if (!this.isControlVisible(control)) {
        return;
      }
      var size = this.cornerSize;
      this.transparentCorners || ctx.clearRect(left, top, size, size);
      ctx.beginPath();
      ctx.arc(left + size/2, top + size/2, size/2, 0, 2 * Math.PI, false);
      ctx.stroke();
}

fabric.Object.prototype._drawControl = newControls;
fabric.Object.prototype.cornerSize = 15;
var canvas = new fabric.Canvas('c');


canvas.add(new fabric.Rect({width:100, height:100, top:50, left:50}));
canvas.setActiveObject(canvas.getObjects()[0]);

<script type ="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.5.0/fabric.min.js"></script>
<canvas id="c" width="400" height="400" style="border:1px solid #ccc"></canvas>

【讨论】：

我发现了一个问题。可能是我的实现，但圆角在一个盒子里，我猜是原来的角。有没有办法防止这种情况？样品：jsfiddle.net/hello_world/gxbhjyzg/7 谢谢！理想情况下将只是一个圆圈（相同的颜色填充和边框）
绘图前不应清除方框 ( clearRect )。如果您想要白色圆圈，请进行描边和填充。用白色填充。

【解决方案2】：

查看这些示例：

http://fabricjs.com/customization/

示例 2：

var canvas = new fabric.Canvas('c3');
  canvas.add(new fabric.Circle({ radius: 30, fill: '#f55', top: 100, left: 100 }));

  canvas.item(0).set({
    borderColor: 'red',
    cornerColor: 'green',
    cornerSize: 6,
    transparentCorners: false
  });
  canvas.setActiveObject(canvas.item(0));

【讨论】：

对不起，这不是我的问题的答案。
我需要自定义9个小框的边界框，我想要圆形而不是小正方形
不，目前没有对更改对象控件形状的内置支持。你也许可以在上面破解一些东西。
当 object:selected 发生时我可能需要覆盖边界框

【解决方案3】：

这适用于最新版本的 fabricjs（目前为 4.4）。

您有一个在线示例http://fabricjs.com/controls-customization，它允许您对全局控件执行基本自定义。

就这么简单：

fabric.Object.prototype.borderColor = 'blue';

例如将边框颜色更改为蓝色。

另一个依赖于 fabricjs 4 的演示，http://fabricjs.com/custom-control-render，提供了允许您添加自定义控件的示例。把这里留给有兴趣的人吧。

【讨论】：