我正在使用来自 paperjs/examples/candy-的优秀代码。崩溃/ 。我想用图像替换颜色,这样它就不会显示一个红色的圆圈,而是应该显示一个内部有图像的圆圈。以下是我认为我需要修改的片段:
I am playing around with the nice code from paperjs/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({ fillColor: { hue: Math.random() * 360, saturation: 1, brightness: 1 }, blendMode: 'screen' }); for (var i = 0; i < this.numSegment; i ++) { this.boundOffset.push(this.radius); this.boundOffsetBuff.push(this.radius); this.path.add(new Point()); this.sidePoints.push(new Point({ angle: 360 / this.numSegment * i, length: 1 })); } }我正在阅读栅格。但我不知道如何使用这个代码来处理图像。感谢您的帮助。
I am reading up on raster as well. But I don't see how to get this code to work with the image. Thanks for any help.
如果我只是做 this.path = new Path(raster)它不起作用。它只显示一个静态图像,而不是所有周围的圆圈。
If I simply do this.path = new Path(raster) it does not work. It only shows one static image as opposed to all the circles moving around.
更新
这是一个使用的栅格
var imgUrl ="upload.wikimedia/wikipedia/commons/1/15/Red_Apple.jpg"; var raster = new Raster(); raster.scale(0.2)推荐答案
如果你想用路径剪辑 raster ,你需要创建一个包含两个对象的组,然后设置 group.clipped 属性为 true 。传递栅格作为路径构造函数的参数将不起作用。
If you want to clip a raster with a path, you need to create a group that contains both objects, then set group.clipped property to true. Passing a raster as the argument for a path constructor will not work.
最简单的方法是在主循环中执行此操作。
It's easiest to do this in the "main" loop.
//--------------------- main --------------------- var balls = []; // ADD AN ARRAY TO HOLD SOME RASTERS var rasters = []; var raster = new Raster("upload.wikimedia/wikipedia/commons/1/15/Red_Apple.jpg"); raster.scale(.05); var numBalls = 18; for (var i = 0; i < numBalls; i++) { var position = Point.random() * view.size; var vector = new Point({ angle: 360 * Math.random(), length: Math.random() * 10 }); var radius = Math.random() * 60 + 60; balls.push(new Ball(radius, position, vector)); // ADD RASTERS AND CLIP TO EACH "BALL" rasters.push(raster.clone().scale(radius/50)); var group = new Group(balls[i].path, rasters[i]); group.clipped = true; } raster.remove(); function onFrame() { for (var i = 0; i < balls.length - 1; i++) { for (var j = i + 1; j < balls.length; j++) { balls[i].react(balls[j]); } } for (var i = 0, l = balls.length; i < l; i++) { balls[i].iterate(); rasters[i].position = balls[i].path.position; } }更多推荐
如何在PaperJS中添加图像到Path
发布评论