Javascript 如何在PaperJS中将图像添加到路径
我正在玩来自的漂亮代码。我想用一个图像替换颜色,这样它就不用显示一个红色的圆圈,而是应该显示一个里面有图像的圆圈。以下是我认为需要修改的代码片段:Javascript 如何在PaperJS中将图像添加到路径,javascript,html,image,vector-graphics,paperjs,Javascript,Html,Image,Vector Graphics,Paperjs,我正在玩来自的漂亮代码。我想用一个图像替换颜色,这样它就不用显示一个红色的圆圈,而是应该显示一个里面有图像的圆圈。以下是我认为需要修改的代码片段: 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 =
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
}));
}
}
如果要使用
路径剪裁光栅
,则需要创建一个包含这两个对象的组,然后将group.clipped
属性设置为true
。将光栅
作为路径
构造函数的参数传递将不起作用
在“主”循环中执行此操作最简单
/------------main---------------------
var=[];
//添加一个数组以容纳一些光栅
var光栅=[];
var光栅=新光栅(“http://upload.wikimedia.org/wikipedia/commons/1/15/Red_Apple.jpg");
光栅比例尺(.05);
var=18;
对于(变量i=0;i
我从以下内容开始:(听起来你已经是了)。你已经将图像作为普通图像标签嵌入页面了吗?正如我在文章中提到的,如果我这样做,我会让图像显示出来。this.path=newpath(graster)
。。。。你可以在我提供的链接中尝试。我将添加一些代码,你可以复制和粘贴尝试。
var imgUrl ="http://upload.wikimedia.org/wikipedia/commons/1/15/Red_Apple.jpg";
var raster = new Raster();
raster.scale(0.2)
//--------------------- main ---------------------
var balls = [];
// ADD AN ARRAY TO HOLD SOME RASTERS
var rasters = [];
var raster = new Raster("http://upload.wikimedia.org/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;
}
}