Как нарисовать круг внутри растрового холста, используя PaperJs

Question

Я использую paperjs, чтобы создать растр и сделать несколько рисунков поверх изображения. Но я не могу понять, как рисовать круги поверх моих изображений после преобразования моего изображения в растр. Мое приложение имеет несколько изображений на одной странице, и мне придется делать рисунки на всех изображениях. Ниже приведен код, который я использую для преобразования изображения Src в растр для рисования поверх изображений.

      for(i=0;i< imgLength;i++){
         dir = FILE_DIR+"/"+imgJPGList[i];

        imgid = imgJPGList[i].substr(0, imgJPGList[i].indexOf('.'));               

        midproj = new paper.Project(paper.view);
        var raster = new paper.Raster();

        raster.onLoad = function() {

        console.log('Successfully loaded image!');
        }
        raster.source = dir;

        document.getElementById('imgID').appendChild(raster.canvas);//imgID is my DIV
        $("#imgID").append($("<br/>"));

        circle = new paper.Path.Circle(new paper.Point(80, 50), 35);
        circle.strokeColor = 'red';

        //paper.setup(raster.canvas);
        //paper.view.draw();
        }

Я пытаюсь добиться чего-то похожего на приведенную ниже ссылку.

http://sketch.paperjs.org/#S/TZBBb8IwDIX/SpVLQYLkMO1StBNXDtM4wg5ZsNK0aRzZhmqa9t/XtIhxsGQ/P3968o9KdgDVqGMP4lq1UQ4vZb5ZqsiyAFVvVYKx+piH1Xp3pnNaNprxSg4mQ92K5MaYbDNQxxrJG7kKUrCRTRisBzYjUh+S345B2u1CYDNgsrrLvn7mZuQgAdNEvgUYtYM0ybOjVLTfj1iH0t9TlXKBXIT78t1Kq/ezssqEHTjRT8BN9fK6XC5XmoWwhz1GLPia4FL/gzExTp6I/sGag7COkLy06930vS8C22cMSVg1p8/fPw==

Answer 1

Я точно не знаю, какие у вас проблемы (было бы неплохо включить один или два симптома), но могу предложить несколько советов. Кстати, я не знал, что для растров было событие onLoad - спасибо.

1. Я никогда не использовал raster.canvas. В документации говорится, что ссылка на нее заставляет бумагу создавать холст. Таким образом, создается второй холст, отличный от того, который создает или использует paper.Project.

2. Я не уверен, что делает paper.view к paper.Project. paper.view - это представление текущего активного проекта - я не могу сказать, что это из фрагмента кода.

Если бы я кодировал это, это выглядело бы примерно так (метакод, так что извините за ошибки):

var canvas = document.createElement("canvas");
// do whatever attribute setting needs to be done for canvas.

document.getElementById("#mydiv").appendChild(canvas);

paper.setup(canvas);

// now create a raster in the default, current layer of the paper project
var raster = new paper.Raster();
raster.source = "some URL";

// now create a new layer. it becomes the active layer for drawing
var layer = new paper.Layer();

// draw circles and other stuff. they go on the new layer.

Порядок некоторых вещей может быть изменен. Вставка холста может быть инициирована при загрузке изображения и т. Д.

Но, учитывая информацию, которая у меня есть, это мой ответ.