文章/答案/技术大牛

发布

社区首页 >问答首页 >如何使p5.js实例模式仅用于<div>？

问如何使p5.js实例模式仅用于<div>？
EN

Stack Overflow用户

提问于 2022-01-13 01:16:55

回答 1查看 148关注 0票数 1

我使用实例模式创建了一个简单的草图：

var start = 0
var trueSize
const ring = (sketch) => {
    sketch.setup = () => {
        trueSize = sketch.windowWidth > sketch.windowHeight ? sketch.windowHeight : sketch.windowWidth
        sketch.createCanvas(sketch.windowWidth, sketch.windowHeight)
        sketch.angleMode(sketch.DEGREES)
        sketch.noiseDetail(2, 1)
    }

    sketch.draw = () => {
        sketch.background(30)
        sketch.noStroke()
        sketch.translate(sketch.width / 2, sketch.height / 2)
        var space = 0.1
        for (var i = 0; i < 360; i += space) {
            var xoff = sketch.map(sketch.cos(i), -1, 1, 0, 3)
            var yoff = sketch.map(sketch.sin(i), -1, 1, 0, 3)
            var n = sketch.noise(xoff + start, yoff + start)
            var h = sketch.map(n, 0, 1, -90, 90)

            var r = sketch.map(sketch.sin(i), -1, 1, 100, 200)
            var g = sketch.map(h, -150, 150, 0, 150)
            var b = sketch.map(n, 0, 1, 150, 255)

            sketch.rotate(space)
            sketch.fill(r, g, b)
            sketch.rect(trueSize * 0.3, 0, h, 1)
        }
        start += 0.01
    }
}

let myp5 = new p5(ring, 'ring')
//let myp5 = new p5(ring, document.getElementById('ring')); //This does not work either.

在我的index.html中，我有：

<!DOCTYPE html>
<html lang="en">
    <head>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"></script>
        <link rel="stylesheet" type="text/css" href="style.css" />
        <meta charset="utf-8" />
        <script src="sketch.js"></script>
    </head>
    <body>

       <div id="ring" ></div> <!-- This is not respected. When commented out, the p5 image still appears. -->
    </body>
</html>

我遇到的问题是草图没有在div中真正呈现。当我注释掉div，或者将宽度/高度设置为div时，不管div是什么，草图仍然是绘制的。

javascript

p5.js

回答 1

Stack Overflow用户

回答已采纳

发布于 2022-01-13 01:57:19

没有找到div时的回退是设计的，尽管如果div存在，p5确实会使用它。让我们看看源头

// ... inside p5 constructor ... line 233 in src/core/main.js 5d4fd14 
    this._start = () => {
      // Find node if id given
      if (this._userNode) {
        if (typeof this._userNode === 'string') {
          this._userNode = document.getElementById(this._userNode);
        }
      }

      const context = this._isGlobal ? window : this;
      if (context.preload) {
        // Setup loading screen
        // Set loading screen into dom if not present
        // Otherwise displays and removes user provided loading screen
        let loadingScreen = document.getElementById(this._loadingScreenId);
        if (!loadingScreen) {
          loadingScreen = document.createElement('div');
          loadingScreen.innerHTML = 'Loading...';
          loadingScreen.style.position = 'absolute';
          loadingScreen.id = this._loadingScreenId;
          const node = this._userNode || document.body;
          node.appendChild(loadingScreen);
        }
// ...

如果传递一个字符串，p5将使用this._userNode = document.getElementById(this._userNode);尝试通过该id查找元素。如果您传递一个节点，这将永远不会运行，但是无论如何，我们最终都会得到代码。

const node = this._userNode || document.body;
node.appendChild(loadingScreen);

如果this._userNode最后出现了falsey (也就是说，您从未传递任何东西或在文档中找不到id )，那么p5就会回到document.body上。

您可以在整个代码库中看到这种回退：

PS C:\Users\greg\Desktop\p5.js-main\src> grep -RC 1 userNode .
./core/main.js-    this._pixelDensity = Math.ceil(window.devicePixelRatio) || 1;
./core/main.js:    this._userNode = node;
./core/main.js-    this._curElement = null;
--
./core/main.js-      // Find node if id given
./core/main.js:      if (this._userNode) {
./core/main.js:        if (typeof this._userNode === 'string') {
./core/main.js:          this._userNode = document.getElementById(this._userNode);
./core/main.js-        }
--
./core/main.js-          loadingScreen.id = this._loadingScreenId;
./core/main.js:          const node = this._userNode || document.body;
./core/main.js-          node.appendChild(loadingScreen);
--
./core/p5.Graphics.js-  this.canvas = document.createElement('canvas');
./core/p5.Graphics.js:  const node = pInst._userNode || document.body;
./core/p5.Graphics.js-  node.appendChild(this.canvas);
--
./core/rendering.js-
./core/rendering.js:  if (this._userNode) {
./core/rendering.js-    // user input node case
./core/rendering.js:    this._userNode.appendChild(c);
./core/rendering.js-  } else {
--
./dom/dom.js-function addElement(elt, pInst, media) {
./dom/dom.js:  const node = pInst._userNode ? pInst._userNode : document.body;
./dom/dom.js-  node.appendChild(elt);
--
./webgl/p5.RendererGL.js-    pg.canvas = document.createElement('canvas');
./webgl/p5.RendererGL.js:    const node = pg._pInst._userNode || document.body;
./webgl/p5.RendererGL.js-    node.appendChild(pg.canvas);
--
./webgl/p5.RendererGL.js-    c.id = defaultId;
./webgl/p5.RendererGL.js:    if (this._pInst._userNode) {
./webgl/p5.RendererGL.js:      this._pInst._userNode.appendChild(c);
./webgl/p5.RendererGL.js-    } else {

如果您的目标是不呈现草图，除非存在特定的元素，请在客户端代码中检查它，不要调用p5构造函数。

票数 2

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/70690328

复制

相似问题

问如何使p5.js实例模式仅用于<div>？
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使p5.js实例模式仅用于<div>？EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使p5.js实例模式仅用于<div>？
EN