PaperJs Добавить 2 растра как 2 символа в одном проекте - PullRequest
Новая
       6

PaperJs Добавить 2 растра как 2 символа в одном проекте

0 голосов
/ 03 ноября 2018

У меня есть этот проект в 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, но не работает. Даже если я сделаю группу массивов с обоими символами, они тоже не появятся. Я прочитал в посте, что символы не могут быть добавлены в группу. Будучи правдой, все должно быть нормально, даже если оно будет изолированным ... Кто-нибудь делал что-то подобное? Спасибо

1 Ответ

0 голосов
/ 04 ноября 2018

В вашем коде есть ошибки:

  • Самое важное, что заставляет вас думать, что второй растр не работает, это то, что вы создаете второй растр с переменной url вместо url2. Таким образом, оба растра используют одно и то же изображение в качестве источника ...
  • Вам нужно поместить второй символ, как вы делаете с первым, иначе он никогда не будет визуализирован.
  • При переборе дочерних элементов активного слоя, обязательно перебирайте все дочерние элементы, используя project.activeLayer.children.length (когда вы размещаете count * 2 символов).
  • При проверке нижних предметов используйте height вместо width.

Вот эскиз , демонстрирующий решение. 

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;
        }
    }
}
...