Как нарисовать в cacheCanvas из источника, отличного от кэшированного объекта в EaselJS / CreateJS?

Question

У меня есть форма, которая кэшируется, и растровое изображение, сделанное из cacheCanvas формы. Теперь я хочу нарисовать еще одно растровое изображение в cacheCanvas или, более конкретно, еще одно растровое изображение cacheCanvas в cacheCanvas фигуры. Я попытался bitmap2.draw (shape.cacheCanvas), и он не сработал - хотя draw () говорит, что получает ctx, и я думаю, что cacheCanvas формы - ctx. Это дает мне drawImage не ошибка функции.

Причина, по которой я это делаю, заключается в отмене функциональности инструмента рисования. Я рисую в форме и перетаскиваю с помощью sourceover в растровое изображение для отображения и в растровое изображение в виде эскиза, так как имеется несколько слоев. При нажатии я сохраняю новое растровое изображение из cacheCanvas формы и кэширую его, чтобы запомнить состояние отмены. Они дают мне рисунки при каждом нажатии. Чтобы отменить, я хочу очистить чертеж и кэшировать его без sourceover, а затем нарисовать растровое изображение отмены в холсте кэша фигуры. Это сохраняет связь между исходной формой, исходным растровым изображением и растровым изображением большого пальца. Проблема заключается в рисовании в cacheCanvas фигуры. Есть ли способ? Спасибо !!

ДОБАВЛЕНО - Я думаю, что нашел обходной путь. Я могу начать с контейнера с формой в нем. Затем перетащите контейнер в растровое изображение. Затем, когда я хочу вернуться к определенному сохраненному растровому изображению, я могу очистить изображение формы и добавить растровое изображение в контейнер - скопировать его и удалить сохраненное растровое изображение. Было бы все еще интересно узнать, есть ли способ записи в cacheCanvas с чем-то отличным от кэшированного объекта.

Answer 1

Рисование на холсте кэша недостаточно, необходимо убедиться, что обновляется этап его рисования.

Другой способ дать вам больше контроля - это просто обернуть ваши cacheCanvas в другую стадию. Это позволяет добавлять контент к нему с тем же элементом управления, что и на этапе EaselJS. Обратите внимание, что при обновлении он очищает исходное содержимое кэша, поэтому это не идеальное решение. https://jsfiddle.net/lannymcnie/8yczqt05/

var stage2 = new createjs.Stage(s.cacheCanvas);
stage2.autoClear = false; // Keep the current cache. Just for this demo
var s2 = new createjs.Shape();
s2.graphics.f("blue").dc(50,50,50);
stage2.addChild(s2);
stage2.update();

Если вы делаете систему отмены / возврата, вы можете рассмотреть более надежное решение, вместо того чтобы полагаться на кэш Shape. Похоже, вы уже исследуете контейнер для кэша, надеюсь, вы добьетесь успеха в этом.

ура!