PaperJs 在同一个项目中添加 2 个栅格作为 2 个符号

Question

我在 paperjs 中有这个项目：

    var url  = "http://www.clker.com/cliparts/q/I/s/P/E/3/yellow-umbrella-md.png";
raster = new Raster(url);
raster.rotate(10);
raster.scale(0.4);

var url2 = "https://images.vexels.com/media/users/3/145373/isolated/preview/98721f602aa3fadb040e0a161ab3f966-waterdrop-vislumbrante-vis-o-ilustra--o-by-vexels.png";
secondRaster = new Raster(url);
secondRaster.scale(0.9);


var count = 150;

var symbol = new Symbol(raster);
var secondSymbol = new Symbol(secondRaster);




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);

}

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.width / 80;

        // If the item has left the view on the right, move it back
        // to the left:
        if (item.bounds.bottom > view.size.width) {
            item.position.y = -item.bounds.width;
        }
    }
}

第一个光栅有一个符号效果很好，但第二个光栅不能使它起作用...我读到要向 project.activeLayer.children 添加多个符号但不起作用。即使我用两个符号做一组数组也不会出现。我在 post 中读到符号不能作为一个组添加。既然如此，即使被隔离也应该可以添加...... 有人做过类似的事情吗？谢谢

Answer 1

你的代码有一些错误：

最重要的是，您正在使用变量 url 而不是 url2 创建第二个栅格，这让您认为第二个栅格不起作用。所以两个光栅都使用与源相同的图像...
您需要像放置第一个符号一样放置第二个符号，否则它永远不会被渲染。
在遍历活动层子项时，请确保使用 project.activeLayer.children.length 遍历所有子项（因为您放置 count * 2 符号）。
检查到达底部的项目时，使用 height 而不是 width。

这里是 sketch 演示解决方案。

var COUNT = 10;

var raster = new Raster('http://www.clker.com/cliparts/q/I/s/P/E/3/yellow-umbrella-md.png');
raster.rotate(10);
raster.scale(0.4);

var secondRaster = new Raster('https://images.vexels.com/media/users/3/145373/isolated/preview/98721f602aa3fadb040e0a161ab3f966-waterdrop-vislumbrante-vis-o-ilustra--o-by-vexels.png');
secondRaster.scale(0.15);

var symbol = new Symbol(raster);
var secondSymbol = new Symbol(secondRaster);

for (var i = 1; i <= COUNT; i++) {
    // first symbol
    symbol.place(Point.random() * view.size).scale(i / COUNT);
    // second symbol
    secondSymbol.place(Point.random() * view.size).scale(i / COUNT);
}

function onFrame(event) {
    for (var i = 0; i < project.activeLayer.children.length; i++) {
        var item = project.activeLayer.children[i];

        item.position.y += item.bounds.height / 80;

        if (item.bounds.bottom > view.size.height) {
            item.position.y = -item.bounds.height;
        }
    }
}

PaperJs 在同一个项目中添加 2 个栅格作为 2 个符号

PaperJs Add 2 raster as 2 symbols in the same project

javascript

arrays

paperjs