Question

我使用paperjs创建Raster并在图像上做一些绘图。但在将图像src转换为光栅后，我无法弄清楚如何在我的图像上绘制圆圈。我的应用程序在一个页面中有多个图像，我将不得不在所有图像上绘图。下面是我用来将图像src转换为Raster以在图像上绘制的代码。

      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事件 - 谢谢。

我从未使用过raster.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.

某些事情的顺序可以改变。插入画布可以在加载图像等时触发

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

如何使用PaperJs在Raster中绘制一个圆形生成Canvas

1 个答案: