Obwiednia Wyglad - Kontrola dostosowywania z fabricjs

Question

Guru,

Chcę wiedzieć, czy istnieje sposób, aby zmienić ikonę obwiedni, czytam kod źródłowy w fabric.js, generuje kwadratowe pudełko na obwiedni, ale Chcę go zmienić, aby zakreślić lub zmienić na moją niestandardową małpę. czy możesz mi doradzić?

Dziękuję bardzo!

Lindy

Answer 1

Sprawdź te przykłady:

http://fabricjs.com/customization/

Przykład 2:

var canvas = new fabric.Canvas('c3'); 
    canvas.add(new fabric.Circle({ radius: 30, fill: '#f55', top: 100, left: 100 })); 

    canvas.item(0).set({ 
    borderColor: 'red', 
    cornerColor: 'green', 
    cornerSize: 6, 
    transparentCorners: false 
    }); 
    canvas.setActiveObject(canvas.item(0)); 

Answer 2

Najszybszy sposób, aby dostosować kontroli jest napisanie własnego _drawControl funkcję i aby był on zgodny z fabricjs standard, aby go zastąpić. Pamiętaj, że ta funkcja jest wywoływana 9 razy dla każdego renderowania, więc staraj się pozostać niska z kodem i rysunkami. Również jeśli modyfikujesz kontekst (ctx) pamiętaj o użyciu .save i .restore, aby nie zepsuć renderowania potoku.

FabricJs będzie wywołać funkcję z top i left gotowy do prostokąta, więc rogu będzie na top + size/2 i left + size/2, gdzie rozmiar jest this.cornerSize

function newControls(control, ctx, methodName, left, top) { 
    if (!this.isControlVisible(control)) { 
     return; 
     } 
     var size = this.cornerSize; 
     isVML() || this.transparentCorners || ctx.clearRect(left, top, size, size); 
     ctx.arc(left + size/2, top + size/2, size/2, 0, 2 * Math.PI, false); 
     ctx.stroke(); 
} 

fabric.Object.prototype._drawControl = newControls; 

function newControls(control, ctx, methodName, left, top) { 
 
    if (!this.isControlVisible(control)) { 
 
     return; 
 
     } 
 
     var size = this.cornerSize; 
 
     this.transparentCorners || ctx.clearRect(left, top, size, size); 
 
     ctx.beginPath(); 
 
     ctx.arc(left + size/2, top + size/2, size/2, 0, 2 * Math.PI, false); 
 
     ctx.stroke(); 
 
} 
 

 
fabric.Object.prototype._drawControl = newControls; 
 
fabric.Object.prototype.cornerSize = 15; 
 
var canvas = new fabric.Canvas('c'); 
 

 

 
canvas.add(new fabric.Rect({width:100, height:100, top:50, left:50})); 
 
canvas.setActiveObject(canvas.getObjects()[0]);

<script type ="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.5.0/fabric.min.js"></script> 
 
<canvas id="c" width="400" height="400" style="border:1px solid #ccc"></canvas>