在织物js选择控件中添加小线条

Question

如果将canvas元素设置为hasControls，则在用户单击元素时会渲染少量控件。这些控件是小帆布方块。我想在方形控件上叠加小线条，以进一步改善外观和感觉。

Answer 1

覆盖fabric Object _drawControl函数：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

这当然只是一个如何实现它的例子。