paperjs

Paper.js Background Rasterization Glitches

余生长醉 提交于 2019-12-11 04:05:23
问题 We are building an image editor of sorts using Paper.js. We have a queue on the side of the Paper.js canvas that allows switching between images. Each time we switch between images, we want to flatten all the annotations (rasterize) onto the image just being edited. Each time we switch images, this method is called, which rasterizes the current image and annotations to a data URL. (If we revisit this image, a raster from this data URL will be displayed.) var flattenToDataUrl = function() {

Paper.js Subraster Added Behind Rectangle Instead of in Front

与世无争的帅哥 提交于 2019-12-11 03:33:21
问题 In this Paper.js Sketch, selecting an area of the Mona Lisa raster makes a whiteout Rectangle of the area in place, as well as a generating a subraster of the area. The whiteout rectangle is added first, and the subraster second. However, as you witness in the sketch, the whiteout rectangle remains on top. Test this by commenting out the whiteout rectangle chunk and uncommenting the last line to see that the subraster does indeed get generated. This can be remedied in this scenario with a

Paper.js Loading Images and the Active Layer

大城市里の小女人 提交于 2019-12-11 03:26:57
问题 I'm using Paper.js to make an image editor that handles a queue of images. These images come from PDFs that are uploaded to a server and converted to images. As per the suggestions in this question, I'm loading each image into its own layer. // Load images of pdf, each into its own layer var loadPdf = function(pdfAsImages) { toolsSetup(); // Loop through images for pdf pdfToLayerMap[pdfAsImages.id] = []; for(var i = 0; i < pdfAsImages.images.length; i++) { var layerForImage = new paper.Layer(

Paper.js: can't set fillColor of a symbol instance

天涯浪子 提交于 2019-12-10 18:16:24
问题 I'm new to paper.js. For this project, I need a shape that will be used in many instances (with different fill colors), so it's apparently better to use a symbol (instead of using the Path.clone() method). However, once I instantiate the symbol into a placedSymbol, it seems that changing the fillColor property has no effect on the rendered shape: it remains the initial color of the symbol. Other properties, such as position or opacity, are successfully set. My question: how can I change the

Detecting current rotation with Paper.js

六月ゝ 毕业季﹏ 提交于 2019-12-10 16:45:16
问题 I'm making a small shoot 'em up game with Paper.js, but I'm unable to find that Paperscript provides any way to get the current rotation of my group of items. In the code beneath, rotating 'circlegroup' with Q and E keys, should affect the WASD navigation, moving the item in the direction that the 'nose' of the object is currently pointing at. I figure that I need to get the current rotation of my items in order to affect the navigation. Does Paper.js provide any way to do this? You can see

How to use paperscript from external source?

牧云@^-^@ 提交于 2019-12-10 15:38:24
问题 I'm trying to learn paper.js from tutorials, but i'cant make it work from external file .What is the easiest way to implement external paperscript files? 回答1: Like stated in the Getting started tutorial, if you want to use Paperjs with an external file: <!DOCTYPE html> <html> <head> <script type="text/javascript" src="js/paper.js"></script> <script type="text/paperscript" src="js/myScript.js" canvas="myCanvas"></script> </head> <body> <canvas id="myCanvas" resize></canvas> </body> </html> Be

Paper.js with excanvas

こ雲淡風輕ζ 提交于 2019-12-10 09:23:17
问题 I've grown to like paper.js a lot but after realizing that it does not support IE8, I was wondering if it was possible to have paper.js working together with excanvas? Has anyone tested this and are there examples available? Thank you. 回答1: The Paper.js code explicitly uses HTMLCanvasElement (line 7137 in dist as of 8/11/12), which does not exist on IE8, so out of the box the code fails. The paperjs About page says: Paper.js is aimed at modern browsers with support for the Canvas object and

recommended way to extend classes in Paper.js

旧街凉风 提交于 2019-12-09 17:02:38
问题 Is there a recommended way to extend classes in Paper.js? In particular, I am interested in extending Path Pardon if my terminology is incorrect, but I am essentailly asking the same question about paper that is being asked about three here 回答1: Based on your comment to the initial version of my answer, you are looking for the 'extend' function (oops, that was exactly what you meant) to do subclassing. In an email to the paper.js mailing list, Jürg Lehni (one of the creators) said: As for

Simulating two circles bouncing off each other

↘锁芯ラ 提交于 2019-12-08 10:17:58
问题 I have many particles moving around and hit detection to see when they touch. If two particles touch they should bounce off in the opposite direction. particle.moveSelf = function() { var radians = this.angle * Math.PI / 180; var moveX = this.velocity * Math.sin(radians); var moveY = this.velocity * Math.cos(radians); for (var i = 0; i < particles.length; i++) { var distance = this.position.getDistance(new Point(particles[i].position.x, particles[i].position.y)); //if distance < radius 1 +

How to add image to Path in PaperJS

感情迁移 提交于 2019-12-08 02:13:46
问题 I am playing around with the nice code from http://paperjs.org/examples/candy-crash/. I want to replace the colors with an image so that instead of showing say a red circle, it should show a circle with an image inside. Here is the snippet I think I need to modify: function Ball(r, p, v) { this.radius = r; this.point = p; this.vector = v; this.maxVec = 15; this.numSegment = Math.floor(r / 3 + 2); this.boundOffset = []; this.boundOffsetBuff = []; this.sidePoints = []; this.path = new Path({