javascript - 境界ボックスの外観 - fabricjs によるカスタマイズの制御

Question

バウンディング ボックスのアイコンを変更する方法があることを知りたいです。fabric.js のソース コードを読み、バウンディング ボックスの正方形のボックスを生成しますが、それを円に変更するか、カスタムの外観に変更したいと考えています。教えていただけますか？

Answer 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>

Answer 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));