Add little lines in fabric js selection controls

问题:

When you have a canvas element set to hasControls little controls render when the user clicks the element. These controls are little canvas squares. I would like to overlay little lines on the square controls to give a further polish to look and feel.

回答1:

override fabric Object _drawControl function:

   fabric.Object.prototype._drawControl = function(control, ctx, methodName, left, top) {
      if (!this.isControlVisible(control)) {
        return;
      }
      var size = this.cornerSize;
      this.transparentCorners || ctx.clearRect(left, top, size, size);
      ctx[methodName](left, top, size, size);
      /* added code */
      ctx.save();
      var space = 2;
      ctx.beginPath();
      ctx.moveTo(left + space, top + space);
      ctx.lineTo(left + size - space, top + space);
      ctx.stroke();
      ctx.restore();
    };
canvas = new fabric.Canvas('canvas');
canvas.add(new fabric.Rect({width: 50, left: 50, top: 50, height: 50}));

<script src="http://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.5.0/fabric.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<canvas id='canvas' width="500" height="400" style="border:#000 1px solid;"></canvas>

This is of course just an example of how you can achieve it.