javascript - 不知道如何在我的代码中将栅格应用于每个星球
问题描述
我正在尝试按照paper.js网站上的一个基本示例在画布上绘制行星,但是当我想在 for 循环中使用栅格将“纹理”应用于每个行星时,只有一个行星获得纹理。
我在网上尝试了几个解决方案,但没有一个能让我做出我想要的东西。你会注意到,在我的代码中,我有行星(Points)和恒星(Stars)。纹理是一个基本的 100*100 正方形图像。
var url = '../IMG/planettexture.png';
var raster = new Raster(url);
var count = 150;
var x = window.innerWidth;
var y = window.innerHeight;
for (i=0;i<count;i++){
var xrandom = randomCoordinates(x);
var yrandom = randomCoordinates(y);
var center = new Point(xrandom,yrandom);
var points = 12;
var radius1 = randomCoordinates(1);
var radius2 = randomCoordinates(5);
var path = new Path.Star(center, points, radius1, radius2);
path.fillColor = 'white';
raster.position = new Point(xrandom,yrandom);
path.clipMask = true;
}
var path = new Path.Circle({
center: [0, 0],
radius: 10,
fillColor: 'white',
strokeColor: 'black'
});
var symbol = new Symbol(path);
for (var i = 0; i < count; i++) {
var center = Point.random() * view.size;
var placedSymbol = symbol.place(center);
placedSymbol.scale(i / count);
}
function randomCoordinates(number){
return Math.random()*number;
}
function onFrame(event) {
for (var i = 0; i < 450; i++) {
var item = project.activeLayer.children[i];
item.position.x += item.bounds.width / 20;
if (item.bounds.left > view.size.width) {
item.position.x = -item.bounds.width;
}
}
}
你需要 Paper.js 来运行它。使用此代码,只有一个 Star 是“纹理化的”,其余的在我的屏幕上不可见。你知道问题出在哪里吗?
解决方案
你不需要在 for 循环中克隆你的光栅吗?
var clonedRaster = raster.clone();
clonedRaster.position = new Point(xrandom,yrandom);
推荐阅读
- sql-server - 如何在 SQL Server Reporting Service 2017 中启用 REST API?
- oracle - “ON CONVERSION ERROR”因“ORA-43918:此参数必须是文字”而失败
- jquery - 带有 jQuery/数据表的 Django
- c++ - GetDIBits() 将目标指针设置为 NULL 且没有错误
- sql-server - 我可以在 SQL 中执行除非查询吗?使用 row_num 查询
- c++ - __gnu_linux__ 代表什么?
- sql - 如何将 MySQL 转换为 PostgreSQL 并添加时区转换
- reactjs - 仅对更新值做出一次反应
- javascript - 无法理解导入节点模块
- excel - Excel:使用索引匹配返回搜索值下方的值