2013-05-06 12 views
8

Obecnie pracuję nad projektem "Photo Collage Maker", który wymaga większego obszaru roboczego i setek obiektów (tekstu, obrazów, kształtów, obiektów clipart itp.). Problem polega na tym, że podczas przenoszenia, skalowania i obracania tych obiektów plik Fabric.js renderuje wszystkie obiekty, co powoduje, że jest zbyt wolny. Chcę renderować tylko wybrane obiekty na górze płótna tkaniny. Przetestowałem renderOnAddition, renderTop również, ale nie są one tym, co chcę.Renderuj wybrany obiekt tylko podczas przenoszenia, skalowania i obracania.

Chcę następujące:

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

Teraz zamiast canvas.renderAll() muszę metody takie jak canvas.renderObjects(activeObject). Jak mogę osiągnąć tę funkcjonalność w Fabric.js?

Oto mój projekt: Edit Photos For Free

+2

Musisz oddać wszystko, nie ma innej drogi. Nie mierzy stanu, którego obiekt się zmienił, proces rysowania rysuje piksele. Podobnie jak ramki w cyfrowym wideo, nawet jeśli jest to statyczny obraz, nadal jest 25 klatek ... – arty

+0

Jeśli nie jest możliwe, dla zachowania wydajności fabricjs, w jaki sposób mogę zaimplementować właściwość cacheAsBitmap, tak aby renderowana była tylko część ruchoma a wszystkie pozostałe części statyczne są buforowane jako bitmapy. Wszelkie pomysły i algorytmy do wdrożenia tego na Fabricwy? – ep4f

+0

Przykro mi, nie mogę tu pomóc. powodzenia – arty

Odpowiedz

0

Najprościej jest, aby mieć drugie płótno, naprzeciwko głównego jednej, na której można się poruszać/skala/obrócić bieżący element (y).

Wspomniałeś, że chcesz renderować wybrane obiekty na płótnie z tkaniny, więc powinno to spełniać Twoje wymagania.

Po zakończeniu przenoszenia/skalowania/obrócenia trzeba będzie przywrócić oryginalne elementy canvas, zastosować zmiany i zezwolić na pełne odświeżenie.

Powiązane problemy