Kann ich innerhalb des Anschlags im Gewebe js setzen

Question

Ich arbeite an einer fabricjs Anwendung & ich muss einen inneren Anschlag zum Gegenstand einstellen, es bedeutet Anschlag auf einem Gegenstand anwenden, ohne seine Größe zu erhöhen.

zB wenn ich anwenden stroke 20 bis 100 * 100 rect, dann ist es Größe zu erhöhen ist auch, aber ich möchte, wenn Schlaganfall gilt dann auch gleiche Größe Objekt ist bleiben

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>

Ist gibt es eine Möglichkeit oder Trick Schlaganfall ohne Erhöhung Größe

Dank in

Voraus anzuwenden

Answer 1

Wie es wäre nur für Rechtecke, der beste Weg wäre wahrscheinlich zu hängen 4 Zeilen, die Sie die Positionen basierend auf diese Rechtecke x, y, Breite und Höhe zu aktualisieren. Sie können dann die Konturenbreite dieser Linien separat festlegen.

Der andere Weg wäre zu einfach die Größe des Besitzelements zu ändern. Schau dir das an 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; 
});