Интеграция p5js в проекте Meteor

У меня есть небольшой скрипт p5js, который я хочу включить в проект Meteor. Я сам поставил p5js в client/compatible/p5.min.js, и я поместил свой скрипт p5js в client/p5js/sketch1.js.Интеграция p5js в проекте Meteor

Это мой сценарий:

var sketch1 = function (s) { 
    s.setup = function() { 
     s.createCanvas(100, 100); 
     s.background(100); 
    }; 

    s.draw = function() { 

    } 
}; 

new p5(sketch1, "sketch1");

Он получить впрыскивается в HTML, но не под DIV с идентификатором = "Sketch1". Это HTML, когда я открываю консоль:

<body> 
    <canvas id="defaultCanvas0" class="" width="300" height="300" style="width: 100px; height: 100px;"></canvas> 
    <div id="sketch1"></div> 
</body>

Любые идеи, почему это происходит, и как я могу решить эту проблему? Обычное поведение заключается в том, что холст вводится внутри div с id = "sketch1".

источник

2016-01-12 Arash Saidi

Я нашел решение моей проблемы. Очень простое решение. Для того, чтобы p5js вводил сам, DOM должен быть визуализирован. В моем случае DOM не отображается, поэтому холст не вводится в div с id «sketch1».

Решение состоит в том, чтобы использовать onRendered метод Метеор:

Template.templateName.onRendered(function() { 
    new p5(sketch1, "sketch1"); 
})

Это гарантирует, что DOM оказывается перед созданием эскиза, и он будет затем вводится в элемент DOM с идентификатором «Sketch1» ,

источник

2016-01-14 20:55:27

Я также попытался интегрировать свой эскиз p5 в Метеор. Но я думаю, что важно добавить, что эскиз будет работать только в шаблоне, если - в этом случае - var sketch1 объявляется как глобальная переменная. Это вопрос с охватом в Метеор. Следовательно, я объявил var sketch1; и все остальные эскизы, которые мне нужны var sketch2, sketch3; и т. Д. В файле global.js, который я сохранил в папке Meteor lib. Тогда шаблон работает отлично.

источник

2016-05-06 04:22:51

Интеграция p5js в проекте Meteor

ответ

Смежные вопросы