Html 修改Paperjs画布示例移动多个项目
在Paperjs网站上,有一个在这个页面上移动多个项目的例子,移动的项目是不断从左向右移动的浮动圆圈。我试图修改这个例子,使圆不断地从底部浮到顶部。到目前为止,我已经设法让它们从底部浮到顶部,但由于某些原因,它不是连续的 我试图对示例进行的另一个修改是,根据给定的颜色数组,使圆具有随机颜色。到目前为止,只有在每次刷新和加载页面时才会生成随机颜色Html 修改Paperjs画布示例移动多个项目,html,canvas,paperjs,Html,Canvas,Paperjs,在Paperjs网站上,有一个在这个页面上移动多个项目的例子,移动的项目是不断从左向右移动的浮动圆圈。我试图修改这个例子,使圆不断地从底部浮到顶部。到目前为止,我已经设法让它们从底部浮到顶部,但由于某些原因,它不是连续的 我试图对示例进行的另一个修改是,根据给定的颜色数组,使圆具有随机颜色。到目前为止,只有在每次刷新和加载页面时才会生成随机颜色 我怎样才能让这些圆从下到上连续浮动 我怎样才能让圆圈在动画中随机着色,而不仅仅是在页面加载时 这是我修改过的代码: // The amount of c
// The amount of circles we want to make:
var count = 50;
/*random colors for circles*/
var circleColors = new Array();
circleColors[0] = "#2ab4e4";//BLUE
circleColors[1] = "#a2a7a6";//GREY
circleColors[2] = "#ef7047";//ORANGE
circleColors[3] = "#ffffff";//WHITE
/*end random colors for circles*/
// Create a symbol, which we will use to place instances of later:
var path = new Path.Circle({
center: [0, 0],
radius: 35,
fillColor: circleColors[Math.floor(Math.random() * circleColors.length)]
});
var symbol = new Symbol(path);
// Place the instances of the symbol:
for (var i = 0; i < count; i++) {
// The center position is a random point in the view:
var center = Point.random() * view.size;
var placedSymbol = symbol.place(center);
placedSymbol.scale(i / count);
}
// The onFrame function is called up to 60 times a second:
function onFrame(event) {
// Run through the active layer's children list and change
// the position of the placed symbols:
for (var i = 0; i < count; i++) {
var item = project.activeLayer.children[i];
// Move the item 1/20th of its width to the right. This way
// larger circles move faster than smaller circles:
item.position.y -= item.bounds.height / 20;
// If the item has left the view on the right, move it back
// to the left:
if (item.bounds.bottom > view.size.height) {
item.position.y = -item.bounds.height;
}
}
}
//我们想要做的圈数:
var计数=50;
/*圆的随机颜色*/
var circleColors=新数组();
圆环色[0]=“#2ab4e4”//蓝色
圆环色[1]=“a2a7a6”//灰色
圆环色[2]=“ef7047”//橙色
圆环色[3]=“#ffffff”//白色
/*结束圆的随机颜色*/
//创建一个符号,稍后我们将使用该符号放置以下对象的实例:
var path=新路径。圆({
中间:[0,0],
半径:35,
fillColor:circleColors[Math.floor(Math.random()*circleColors.length)]
});
变量符号=新符号(路径);
//放置符号的实例:
对于(变量i=0;iview.size.height){
item.position.y=-item.bounds.height;
}
}
}
以下是Paperjs的原始代码:
// The amount of circles we want to make:
var count = 150;
// Create a symbol, which we will use to place instances of later:
var path = new Path.Circle({
center: [0, 0],
radius: 10,
fillColor: 'white',
strokeColor: 'black'
});
var symbol = new Symbol(path);
// Place the instances of the symbol:
for (var i = 0; i < count; i++) {
// The center position is a random point in the view:
var center = Point.random() * view.size;
var placedSymbol = symbol.place(center);
placedSymbol.scale(i / count);
}
// The onFrame function is called up to 60 times a second:
function onFrame(event) {
// Run through the active layer's children list and change
// the position of the placed symbols:
for (var i = 0; i < count; i++) {
var item = project.activeLayer.children[i];
// Move the item 1/20th of its width to the right. This way
// larger circles move faster than smaller circles:
item.position.x += item.bounds.width / 20;
// If the item has left the view on the right, move it back
// to the left:
if (item.bounds.left > view.size.width) {
item.position.x = -item.bounds.width;
}
}
}
//我们想要做的圈数:
var计数=150;
//创建一个符号,稍后我们将使用该符号放置以下对象的实例:
var path=新路径。圆({
中间:[0,0],
半径:10,
fillColor:'白色',
strokeColor:“黑色”
});
变量符号=新符号(路径);
//放置符号的实例:
对于(变量i=0;iview.size.width){
item.position.x=-item.bounds.width;
}
}
}
paper.js坐标系的原点位于画布的左上角。若要将项目置于视口边界之下,需要将视图的高度添加到项目的高度
if (item.bounds.bottom < 0) {
item.position.y = view.size.height+item.bounds.height;
}
if(item.bounds.bottom<0){
item.position.y=视图.size.height+item.bounds.height;
}
至于随机颜色,您必须使用pathItems,而不是placedSymbols来改变对象的颜色样式。与此相反:
var path = new Path.Circle({
center: [0, 0],
radius: 35,
fillColor: circleColors[Math.floor(Math.random() * circleColors.length)]
});
var symbol = new Symbol(path);
// Place the instances of the symbol:
for (var i = 0; i < count; i++) {
// The center position is a random point in the view:
var center = Point.random() * view.size;
var placedSymbol = symbol.place(center);
placedSymbol.scale(i / count);
}
var path=新路径。圆({
中间:[0,0],
半径:35,
fillColor:circleColors[Math.floor(Math.random()*circleColors.length)]
});
变量符号=新符号(路径);
//放置符号的实例:
对于(变量i=0;i
您将需要更多类似于:
// Place the instances of the symbol:
for (var i = 0; i < count; i++) {
var path = new Path.Circle({
center: Point.random() * view.size,
radius: i / count,
fillColor: circleColors[Math.floor(Math.random() * circleColors.length)]
});
//放置符号的实例:
对于(变量i=0;i
有关详细信息,请参阅此帖子:
谢谢。我理解了你答案的第一部分,并且更改了部分代码。现在我的圆圈一直在浮动。谢谢!但是,我仍然对你答案的第二部分关于pathItems和PlacedSymbol的内容有点困惑。我该如何将符号切换到path items?到目前为止,还没有办法更改路径项指向路径项的符号。首先,您只需要创建路径而不是符号。有关代码,请参阅上面编辑的答案。这可能比使用符号运行得慢,但此示例的性能似乎与我的系统上的原始示例相当。