bounding box appearance - controls customization with fabricjs

Question

I want to know is there a way to change the bounding box icon, I read source code in fabric.js, it generates square box for bounding box, but I want to change it to circle or change to my custom appearance. could you advise me?

Answer 1

Fastest way to customize controls is to write your own _drawControl function and make it compatible with fabricjs standard to override it. Remember that this function is called 9 times for every render, so try to stay low with code and drawings. Also if you modify the context ( ctx ) remember to use .save and .restore to do not mess up rendering pipeline.

FabricJs will call the function with top and left ready for a rectangle, so the corner will be at top + size/2 and left + size/2, where size is 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>