paperjs: анимация не работает на всех динамически добавленных холстах - PullRequest
Новая
       11

paperjs: анимация не работает на всех динамически добавленных холстах

0 голосов
/ 16 февраля 2019

Анимация не работает на нескольких динамически добавляемых холстах.

Я пытаюсь динамически добавлять несколько холстов на одной странице и хочу анимировать объекты отдельно на каждом холсте.

HTML Code 

input id="genCan" type="button" value="Generate" style="width:100px"

Код Javascript 

document.getElementById('genCan').onclick = genCanvas;

function genCanvas() {
    var scope = [];
    var bodyEle = document.getElementsByTagName('body');

    for(var i=0; i < 2; i++) {
        var canvasEle = document.createElement('canvas');
        canvasEle.id = "canvas" + i;
        canvasEle.width = 150;
        canvasEle.height = 150;
        canvasEle.style.border = "1px solid black";
        bodyEle[0].appendChild(canvasEle);
    }

    for(var i=0; i < 2; i++) {
        var id = 'canvas' + i;
        scope[i] = new paper.PaperScope();

        //paper = scope[i];
        scope[i].setup(document.getElementById(id));
        //scope[i].activate();

        var circle = new scope[i].Path.Circle(scope[i].view.center, 50);
        circle.fillColor = 'red';
        scope[i].view.onFrame = function(event) {
            var delay = event.count % 60;
            if(delay < 30) {
                circle.fillColor = 'red';
            } else {
                circle.fillColor = 'blue';
            }
        }
        scope[i].view.draw();
    }

    document.getElementById('genCan').disabled = true;
}

https://jsfiddle.net/46zjgo91/2/

Анимация работает только на последнем холсте.Я ожидал, что анимация сработает на всех холстах.

1 Ответ

0 голосов
/ 16 февраля 2019

Я думаю, что у вас проблема с областью видимости петли.
Информацию и обходные пути можно найти в статьях здесь или здесь или в других местах в Google.
Простое решение может заключаться в том, чтобы заключить код цикла в IIFE .

. Здесь приведена скрипка , демонстрирующая решение. 

document.getElementById('genCan').onclick = genCanvas;

function genCanvas() {
    var scope = [];
    var bodyEle = document.getElementsByTagName('body');

    for (var i = 0; i < 2; i++) {
        var canvasEle = document.createElement('canvas');
        canvasEle.id = 'canvas' + i;
        canvasEle.width = 150;
        canvasEle.height = 150;
        canvasEle.style.border = '1px solid black';
        bodyEle[0].appendChild(canvasEle);
    }

    for (var i = 0; i < 2; i++) {
        (function() {
            var id = 'canvas' + i;
            scope[i] = new paper.PaperScope();

            //paper = scope[i];
            scope[i].setup(document.getElementById(id));
            //scope[i].activate();

            var circle = new scope[i].Path.Circle(scope[i].view.center, 50);
            circle.fillColor = 'red';
            scope[i].view.onFrame = function(event) {
                var delay = event.count % 60;
                if (delay < 30) {
                    circle.fillColor = 'red';
                } else {
                    circle.fillColor = 'blue';
                }
            };
            scope[i].view.draw();
        })();
    }

    document.getElementById('genCan').disabled = true;
}
...