Как рисовать линии поверх растрового изображения с помощью EaselJS?

Я пытаюсь использовать пример с сайта createJS / easylJS, где он устанавливает createjs.Shape () и добавляет его в качестве дочернего к createjs.stage().

Затем с помощью обработчиков mousedown / mousemove / mouseup обновляется сцена с использованием графических методов - setStrokeStyle, beginStroke и curveTo.

Основное отличие состоит в том, что я также добавляю new Bitmap(url), а также добавляю его в качестве дочернего элемента на мою сцену (перед добавлением createjs.Shape для рисования).

Однако, когда я его тестирую, я могу «рисовать» только в областях, не занятых растровым изображением. Как я могу заставить это работать, чтобы я мог рисовать / рисовать поверх растрового изображения?

Конечная цель - это раскраска - возможность добавлять разные черно-белые изображения и иметь несколько цветных кистей, чтобы раскрасить их.


javascript canvas html createjs easeljs
person Pam    schedule 07.03.2014    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Неважно, я заставил его работать, создав объект new createjs.Bitmap из объекта Image вместо передачи URL-адреса изображения в конструктор Bitmap. Затем добавляем как объект createjs.Shape моего drawingCanvas, так и объект Bitmap в загруженный обработчик событий. Итак, это работает:

var image, stage, drawingCanvas, bitmap;
function init(){
 image = new Image();
 image.onload = handleImgLoad();
 image.src = 'image-source-url.png';
 stage = new createjs.Stage("testCanvas");
 createjs.Touch.enable(stage);
 drawingCanvas = new createjs.Shape();
}

function handleImgLoad(){
 bitmap = new createjs.Bitmap(image);
 stage.addChild(bitmap, drawingCanvas);

 ... code to handle mouseup/down/move events...
}
person Pam    schedule 07.03.2014