fabric.js: Immer sichtbare Steuerelemente

Question

Ich verwende fabric.js für die Bildbearbeitung und es funktioniert gut, aber ich brauche die Steuerelemente immer sichtbar zu sein, auch wenn ich außerhalb des Objekts/Bild klicken.

Standardmäßig sind sie nur sichtbar, wenn Sie auf das Objekt/Bild klicken. Wenn Sie darauf klicken, verschwinden die Steuerelemente.

Ist es möglich, dies zu tun?

Vielen Dank.

Answer 1

Leider gibt es in FabricJS derzeit keine integrierte Methode, um dies zu erreichen.

Allerdings ist hier eine Abhilfe (Funktion), die diese Funktionalität simulieren ...

function showControls(...objs) { 
    objs.forEach(obj => { 
     obj.set('active', true); 
     canvas.renderAll(); 
     canvas.on('mouse:down', function(e) { 
     obj.set('active', true); 
     }); 
    }) 
} 

nach auf der Leinwand das Bildobjekt hinzufügen, rufen Sie die obige Funktion zusammen mit dem Bild-Objekt übergeben als Parameter, für den Sie Steuerelemente anzeigen möchten.

ᴅᴇᴍᴏ

var canvas = new fabric.Canvas('c'); 
 
// add rectangle (for demo purposes only) 
 
var rect = new fabric.Rect({ 
 
    top: 100, 
 
    left: 290, 
 
    width: 100, 
 
    height: 100, 
 
    fill: '#07C', 
 
    originX: 'center', 
 
    originY: 'center', 
 
    transparentCorners: false 
 
}); 
 
canvas.add(rect); 
 
// add image (for demo purposes only) 
 
fabric.Image.fromURL('https://i.imgur.com/Q6aZlme.jpg', function(img) { 
 
    img.set({ 
 
     top: 100, 
 
     left: 110, 
 
     width: 100, 
 
     height: 100, 
 
     originX: 'center', 
 
     originY: 'center', 
 
     transparentCorners: false 
 
    }) 
 
    canvas.add(img); 
 
    showControls(img); \t // pass an object that you wish to show controls for 
 
}); 
 

 
// always show controls (multi-object support) 
 
function showControls(...objs) { 
 
    objs.forEach(obj => { 
 
     obj.set('active', true); 
 
     canvas.renderAll(); 
 
     canvas.on('mouse:down', function(e) { 
 
     obj.set('active', true); 
 
     }); 
 
    }) 
 
}

canvas{border:1px solid #ccc}

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.11/fabric.min.js"></script> 
 
<canvas id="c" width="400" height="200"></canvas>