Leinwand frei zeichnen und Formen hinzufügen

Question

Ich versuche, ein kostenloses Zeichenwerkzeug mit der Option zum Hinzufügen von Formen auf der Leinwand zu erstellen. Der Benutzer wird am unteren Rand der Leinwand Schaltflächen mit Formen haben. Wenn er auf einen Kreis klickt, wird ein Kreis zur Leinwand hinzugefügt, mit der Option, ihn zu skalieren und sich auf der Leinwand zu bewegen.

mein Problem ist, wenn ich eine Form hinzufügen und als versuchen, darauf zu klicken, um es zu bewegen, zieht die Leinwand stattdessen die Form der Auswahl.

ich versuche mit fabric.js zu arbeiten, aber ich in der Demo nicht sehen, wie beide haben.

Answer 1

Ich löste dieses Problem in meiner App, indem ich zwei Canvas-Bereiche auf der Seite hatte. In meinem Fall nannte ich die erste „Prep“ und die aktuelle Zeichenfläche einer „Bühne“

<div class="col-sm-2"> 
    <canvas id="prep" width="150" height="500" style= "border: 1px solid #d3d3d3;"></canvas> 
</div> 
    <div class="col-sm-10"> 
    <canvas id="stage" width="650" height="500" style="border: 1px solid #d3d3d3;"></canvas> 
</div> 

Dann habe ich ein Maus hinzugefügt: Down-Ereignis zum Vorbereitungsbereich. Wenn im Bereich "Prep" auf eine Form geklickt wird, wird ein geklontes Objekt zum Bereich "Stage" hinzugefügt.

prep.on('mouse:down', function(options){ 
if(options.target) { 
    if (fabric.util.getKlass(options.target.type).async) { 
     console.log('entered') 
     options.target.clone(function (clone) { 
     clone.set({left: 200, top: 100}); 
     stage.add(clone); 
     }); 
    } 
    else { 
     stage.add(options.target.clone().set({left: 100, top: 100})); 
    } 
} 

});

Wenn Sie die Formen initialisieren auf dem Vorbereitungsbereich zu setzen, Sie können sie wählbar machen: false. In meiner App wurde das selectable: false während des Klons nicht übertragen (nicht sicher, ob es ein Fehler in meinem Code war) - Sie können die Eigenschaften auch während des Klons ändern.

Hinweis - die if (... async) Teil des Codes ist mit der Tatsache zu tun, dass ich sowohl SVG und normale Formen in dem Vorbereitungsbereich habe. Wenn Sie nur Standard-Stoffformen haben, benötigen Sie nur den Code, der in der else-Anweisung enthalten ist.