将 SVG 加载到 P5 草图

Question

我已经在 Processing 编程有一段时间了。我还处理过形状和 SVG 文件。在 Processing 中关于 SVG 文件的这种卑微经历让我认为在 P5.js 中也是如此，这显然不是这种情况，这让我寻求帮助。

回到 Processing 中，我只需要像这样的简单代码：

PShape shape;
/***************************************************************************/
void setup() 
{
  size(400, 400);
  shapeMode(CENTER);
  shape = loadShape("bot1.svg");
} 
/***************************************************************************/
void draw() 
{
  background(100);
  pushMatrix();
  translate(width/2, height/2);
  shape(shape, 0, 0);
  popMatrix();
}

P5 这样不行。 P5.js 相当于什么？

    var shape;
    var canvas;
/***************************************************************************/
    function setup() 
    {
      canvas = createCanvas(400, 400);
      canvas.position(0, 0);
      //shapeMode(CENTER);
      //shape = loadShape("bot1.svg");
    } 
    /***************************************************************************/
    void draw() 
    {
      background(100);
      push();
      translate(width/2, height/2);
      //shape(shape, 0, 0);
      pop();
    }

Answer 1

P5.js 不支持开箱即用地加载 SVG 文件。 Here 是关于 GitHub 的讨论，其中包含大量相关信息。

Processing.js 虽然支持 SVG 文件。 the reference 中的更多信息。

您已使用 processing.js, but I think you were originally asking about p5.js 标记您的问题。但是注意 Processing.js 和 P5.js 是两个完全不同的东西。

Answer 2

除了 Kevin 的回答之外，如果您确实想要在 p5.js 中加载和 SVG，您应该查看 p5.js-svg and the svg manipulation example

作为快速入门，您可以试试这个：

下载p5.svg.js到p5。草图库文件夹
在 index.html 中导入：<script src="libraries/p5.svg.js" type="text/javascript"></script>
创建 SVG Canvas：createCanvas(600, 200, SVG);

将 SVG 加载到 P5 草图

Load an SVG to a P5 sketch

svg

processing

shape

p5.js