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中添加多个符号，但是不起作用。即使我用两个符号组成一组数组也不会出现。我在帖子中读到，不能将符号作为一个组添加。没错，即使隔离也可以添加... 有人做过类似的事情吗？谢谢

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个符号

1 个答案: