[英]Don't know how to apply raster to every planet in my code
我試圖按照paper.js網站上的一個基本示例在我的畫布上繪制行星,但是當我想在for循環中使用柵格對每個行星應用“紋理”時,只有一個行星可以獲取紋理。
我已經在網上嘗試了幾種解決方案,但是沒有一種解決方案能讓我做出自己想要的東西。 您會注意到,在我的代碼中,我同時擁有行星(點)和恆星(星)。 紋理是基本的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來運行它。 使用此代碼,只有一個“星形”被“紋理化”,其余的在我的屏幕上不可見。 您知道問題出在哪里嗎?
您是否不需要在for循環內克隆柵格?
var clonedRaster = raster.clone();
clonedRaster.position = new Point(xrandom,yrandom);
這是一個工作示例: https : //codepen.io/JulienLemaitre/pen/PMmBNJ
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.