Posso impostare la corsa all'interno del tessuto js

Question

Sto lavorando su un'applicazione fabricjs & ho bisogno di impostare un tratto interno per oggetto, significa applicare il tratto a un oggetto senza aumentare le sue dimensioni.

ad esempio se applico strokeWidth 20 a 100 * 100 rect poi la sua dimensione è anche aumentare, ma voglio se ictus è applicare di opporsi allora dimensioni rimarrà anche lo stesso

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>

Is non v'è alcun modo o trucco per applicare corsa senza aumento di dimensione

Grazie in anticipo

Answer 1

Come in questo caso sarebbe solo per i rettangoli, il modo migliore sarebbe probabilmente anche attaccare 4 linee che aggiornano le posizioni basate su quei rettangoli x, y, larghezza e altezza. È quindi possibile impostare separatamente la larghezza tracciata di tali linee.

L'altro modo sarebbe troppo semplicemente ridimensionare l'elemento proprietario. Guarda questo 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; 
});