更改織物中「hasControls」的邊框尺寸js

Question

我想進一步自定義織物尺寸的外觀和感覺。它目前在畫布上用1px邊框繪製，但是我想要完成的是3px邊框。

fabricJS文檔沒有任何自定義屬性來更改此邊框尺寸。

Answer 1

將fabricjs對象與hasControls屬性設置爲true也具有borderScaleFactor和borderColor屬性。

color.addEventListener('change', function(){ 
 
    canvas.getActiveObject().borderColor = this.value; 
 
    canvas.renderAll(); 
 
    }); 
 
scale.addEventListener('change', function(){ 
 
    canvas.getActiveObject().borderScaleFactor = this.value; 
 
    canvas.renderAll(); 
 
    }); 
 

 

 
var canvas = new fabric.Canvas('canvas'); 
 
fabric.Image.fromURL('http://lorempixel.com/200/200', function(img) { 
 
    img.scale(0.8).set({ 
 
    left: 150, 
 
    top: 150, 
 
    angle: -15 
 
    }); 
 
    img.borderColor = color.value; 
 
    canvas.add(img).setActiveObject(img); 
 
});

\t <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.5.0/fabric.js"></script> 
 
<input id="color" type="color" value="#FF00FF"/> 
 
<input id="scale" type="range" max="2" min=".01" step=".01"/> 
 
<canvas id="canvas" width="800" height="600"></canvas>