如何使用 PaperJs 在生成 Canvas 的光栅内绘制圆

Question

我正在使用 paperjs 创建光栅并在图像上绘制一些图画。但是在将图像 src 转换为光栅后，我无法弄清楚如何在图像顶部绘制圆圈。我的应用程序在一个页面中有多个图像，我将不得不在所有图像上绘图。下面是我用来将图像 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();
        }

我正在尝试实现如下所示的目标 link。

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

Answer 1

我不确定您到底遇到了什么问题（最好包括一两个症状），但我可以提供一些建议。顺便说一句，我不知道光栅有一个 onLoad 事件 - 谢谢。

我没用过raster.canvas。文档指出引用它会导致纸张创建 canvas。因此，它正在创建第二个 canvas，不同于 paper.Project 创建或使用的那个。
我不确定将 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.

部分内容的顺序可以更改。插入 canvas 可以在加载图片等时触发

但鉴于我掌握的信息，这就是我的答案。

如何使用 PaperJs 在生成 Canvas 的光栅内绘制圆

How to draw a Circle inside a Raster generated Canvas using PaperJs

javascript

paperjs