Kumaş js

Question

içinde inme ayarlayabilir miyim Bir kumaşjs uygulama üzerinde çalışıyorum & Nesne için bir iç inme ayarlamak gerekiyor, bu boyutu artırmaksızın bir nesneyi kontur uygulamak anlamına gelir.

örn i sonra boyutu da büyüyecektir mi 100 * 100 rect'in için strokeWidth 20 uygulamak ancak inme nesne için geçerli olup olmadığını ben o boyutu da

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>

mi aynı kalacaktır istiyorsanız Advance

Answer 1

As artış büyüklüğü olmadan

Teşekkür kontur uygulamak için herhangi bir yol ya da hile var Sadece dikdörtgenler için olacağını özetleyen, en iyi yolu muhtemelen bu dikdörtgenler x, y, genişlik ve yükseklik kapalı pozisyonları güncellemek hangi 4 satır eklemek olacaktır. Daha sonra bu çizgilerin konturlu genişliğini ayrı ayrı ayarlayabilirsiniz. Diğer yol, sahip olma öğesini çok basit bir şekilde yeniden boyutlandırabilirdi. Şu JSFiddle'a bakın. Bu yapılabilir dikdörtgen için

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; 
});