2013-05-06 5 views
8

Ich arbeite gerade an einem "Photo Collage Maker" -Projekt, das einen größeren Leinwandbereich und Hunderte von Objekten (Text, Bilder, Formen, Cliparts usw.) benötigt. Das Problem besteht beim Verschieben, Skalieren und Drehen dieser Objekte. Fabric.js rendert alle Objekte, wodurch es zu langsam wird. Ich möchte nur die ausgewählten Objekte über der Fabric-Leinwand rendern. Ich habe renderOnAddition, renderTop auch getestet, aber sie sind nicht was ich will.Ausgewähltes Objekt nur während des Verschiebens, Skalierens und Drehens wiedergeben

Ich möchte folgendes:

canvas.on('object:moving', function(e) { 
    var activeObject = e.target; 
    //canvas.renderAll(); 
    canvas.renderObjects(activeObject); 
}); 

Jetzt statt canvas.renderAll(), ich brauche Verfahren wie canvas.renderObjects(activeObject). Wie kann ich diese Funktionalität in Fabric.js erreichen?

Hier ist mein Projekt: Edit Photos For Free

+2

Sie müssen alle rendern, es gibt keinen anderen Weg. Es ändert sich nicht, welcher Gegenstand sich geändert hat, der Zeichenprozess zeichnet Pixel. Wie Bilder in einem digitalen Video, auch wenn es ein statisches Bild ist, gibt es immer noch 25 Frames ... – arty

+0

Wenn es aus Gründen der Fabric-Leistung nicht möglich ist, wie kann ich die cacheAsBitmap-Eigenschaft implementieren, sodass nur der bewegliche Teil gerendert wird und alle anderen statischen Teile werden als Bitmap zwischengespeichert. Irgendwelche Ideen und einen Algorithmus, um dies auf fabricjs zu implementieren? – ep4f

+0

Entschuldigung, kann hier nicht helfen. Viel Glück – arty

Antwort

0

Ihre beste Wette ist eine zweite Leinwand zu haben, vor dem Haupt ein, auf das Sie sich bewegen/Maßstab/das aktuelle Element drehen (s).

Sie erwähnen, dass Sie die ausgewählten Objekte oben auf dem Fabric-Canvas darstellen möchten, damit dies Ihren Anforderungen entspricht.

Beim Beenden der Bewegung/Skalierung/Drehung müssen Sie die ursprünglichen Canvas-Elemente wiederherstellen, Ihre Änderungen übernehmen und einem vollständigen Neuzeichnen zustimmen.