ファブリックjs内のストロークを設定することができます

Question

私はfabricjsアプリケーションで作業しています&私は内側のストロークをオブジェクトに設定する必要があります。

例えば、私はそれはサイズも増加されます100 * 100矩形にstrokeWidth 20適用されますが、ストロークがオブジェクトに適用された場合、私はその後、サイズも

var recta = new fabric.Rect({ 
 
     left: 10, 
 
     top: 10, 
 
     fill: '#000', 
 
     width: 100, 
 
     height: 100, 
 
     
 
    }); 
 

 
var rectb = new fabric.Rect({ 
 
     left: 150, 
 
     top: 10, 
 
     fill: '#000', 
 
     width: 100, 
 
     height: 100, 
 
     
 
    }); 
 
    canvas.add(recta, rectb); 
 
rectb.set('stroke', '#f00'); 
 
rectb.set('strokeWidth', 20); 
 
canvas.renderAll();

<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 style="border:#000 1px solid" id="design-canvas" width="500" height="400"> 
 
<script type="text/javascript"> 
 
canvas = new fabric.Canvas('design-canvas'); 
 
    </script>

がされているのと同じままになりたい場合は、増加するサイズなしにストロークを適用する方法またはトリックがあります

ありがとうございますアドバンス

Answer 1

それはちょうど四角形のためだと思う、最良の方法は、四角形の位置x、y、幅と高さに基づいて更新する4行を添付する可能性が高いでしょう。これらの線の線幅を個別に設定することができます。

他の方法では所有要素のサイズを変更することもできます。このJSFiddleを見てください。

var canvas = new fabric.Canvas('c', { selection: false }); 

var circle, isDown, origX, origY; 

canvas.on('mouse:down', function(o){ 
    isDown = true; 
    var pointer = canvas.getPointer(o.e); 
    origX = pointer.x; 
    origY = pointer.y; 
    circle = new fabric.Circle({ 
    left: pointer.x, 
    top: pointer.y, 
    radius: 1, 
    strokeWidth: 5, 
    stroke: 'red', 
    selectable: false, 
    originX: 'center', originY: 'center' 
    }); 
    canvas.add(circle); 
}); 

canvas.on('mouse:move', function(o){ 
    if (!isDown) return; 
    var pointer = canvas.getPointer(o.e); 
    circle.set({ radius: Math.abs(origX - pointer.x) }); 
    canvas.renderAll(); 
}); 

canvas.on('mouse:up', function(o){ 
    isDown = false; 
});