在面料js選擇控件中添加小線條

Question

當您將畫布元素設置爲hasControls時，用戶單擊元素時會顯示一些控件。這些控件是小小的畫布方塊。我想在方形控件上疊加一些小線條，以進一步改善外觀和感覺。

Answer 1

覆蓋布對象_drawControl功能：

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>

這當然只是如何可以實現它的一個例子。