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

Question

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

Answer 1

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

FabricJs 将使用 top 和 left 调用该函数，准备好矩形，因此 Angular 将位于 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>