p5.j​​s与Angular集成/不使用全局函数 [英] p5.js integration with Angular / not using global functions

问题描述

在教程和youtube频道中的所有示例均使用sketch.js&全局功能canvas/video标签是由库自动创建的.有没有一种方法可以手动创建"p5.js上下文"，并将其传递给视频& canvas标签，并在某些全局对象上使用API​​?我想在组件内部编写p5.js代码

In tutorials & youtube channel all examples use sketch.js & global functions & canvas / video tags are automatically created by library. Is there a way to manually create "p5.js context", pass it video & canvas tag and use API on some global object? I would like to write my p5.js code inside my components

推荐答案

我对Angular并不了解，但是听起来您正在P5.js中寻找实例模式.

I don't really know anything about Angular, but it sounds like you're looking for instance mode in P5.js.

有关更多信息，请参见此处，但是看起来像这样:

See here for more info, but it looks like this:

var s = function( sketch ) {

  var x = 100; 
  var y = 100;

  sketch.setup = function() {
    sketch.createCanvas(200, 200);
  };

  sketch.draw = function() {
    sketch.background(0);
    sketch.fill(255);
    sketch.rect(x,y,50,50);
  };
};

var myp5 = new p5(s);

您可能需要花点时间才能将其传递给外部对象，但这是基础.

You might have to play around a little to pass it external objects, but those are the basics.

这篇关于p5.j​​s与Angular集成/不使用全局函数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！