Czy mogę ustawić wewnątrz skoku w tkaninie js

Question

Pracuję nad aplikacją fabricjs & Potrzebuję ustawić wewnątrz obrysu na obiekt, to znaczy zastosować obrys do obiektu bez zwiększania jego rozmiaru.

np gdybym zastosować strokeWidth 20 do 100 * 100 rect to jest to wielkość jest również zwiększenie, ale chcę, jeśli skok jest zastosowanie do obiektów następnie rozmiar będzie również pozostają takie same

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>

Czy istnieje jakikolwiek sposób, aby zastosować podstęp lub udaru bez zwiększ rozmiar

z góry dzięki

Answer 1

As podsumowując, że byłby to po prostu dla prostokątów, Najlepszym sposobem byłoby zbyt 4-liniowe aktualizowanie pozycji w oparciu o te prostokąty x, y, szerokość i wysokość. Następnie możesz ustawić szerokość obrysu tych linii osobno.

Innym sposobem byłoby zbyt proste zmienienie elementu będącego właścicielem. Spójrz na to 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; 
});