2013-05-06 1 views
8

В настоящее время я работаю над проектом «Photo Collage Maker», который нуждается в большей области холста и сотнях объектов (текст, изображения, фигуры, клип-арт и т. Д.). Проблема заключается в перемещении, масштабировании и вращении этих объектов, Fabric.js отображает все объекты, которые делают его слишком медленным. Я хочу отображать только выбранные объекты поверх холста ткани. Я также тестировал renderOnAddition, renderTop, но они не то, что я хочу.Рендеринг выбранного объекта только при перемещении, масштабировании и повороте

Я хочу следующее:

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

Теперь вместо canvas.renderAll(), мне нужен метод, как canvas.renderObjects(activeObject). Как я могу достичь этой функциональности в Fabric.js?

Вот мой проект: Edit Photos For Free

+2

Вы должны отобразить все, нет другого пути. Он не влияет на состояние объекта, который был изменен, а процесс рисования - рисование пикселей. Подобно кадрам в цифровом видео, даже если это статическое изображение, есть еще 25 кадров ... – arty

+0

Если это невозможно, ради производительности fabricjs, как я могу реализовать свойство cacheAsBitmap так, чтобы отображалась только движущаяся часть и все остальные статические части кэшируются в виде растрового изображения. Любые идеи и алгоритм для реализации этого на fabricjs? – ep4f

+0

извините, здесь не могу. удачи – arty

ответ

0

Лучше иметь второй холст, перед основной, на которой вы перемещаете/масштаб/повернуть текущий элемент (ы).

Вы упомянули, что хотите отобразить выбранные объекты поверх холста ткани, чтобы это соответствовало вашим требованиям.

При прекращении перемещения/масштабирования/поворота вам необходимо будет восстановить исходные элементы холста, применить изменения и разрешить ему выполнять полное перерисовку.