将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();
    }

- Zardoz

Answer 1

P5.js目前不支持直接加载SVG文件。这里是一个在GitHub上的讨论，包含了大量关于此问题的信息。

但是Processing.js支持SVG文件。更多信息请参考参考文献。

你给你的问题打了processing.js的标签，但我认为你最初询问的是p5.js。但需要注意的是，Processing.js和P5.js是两个完全不同的东西。

- Kevin Workman

---

我希望有一个简单的方法。同时感谢您的纠正 :) - Zardoz

你会推荐我继续使用P5.js还是改用Processing.js呢？ - Zardoz

@Zardoz 这完全取决于你。这取决于你有多需要SVG支持。请注意，Processing.js现在并没有得到积极的开发。 - Kevin Workman

明白了，我会选择P5，然后尝试找出解决方案。非常感谢 :) - Zardoz

@Zardoz 还要注意的是，在你的示例中，你并没有对实际形状进行任何操作，因此你可以将你的SVG转换为PNG或JPG图像，然后使用它。 - Kevin Workman

Answer 2

除了Kevin的回答之外，如果你想在p5.js中加载SVG，你应该查看p5.js-svg和svg操作示例

作为一个快速而简单的开始，您可以尝试以下操作：

1.将p5.svg.js下载到p5.sketch库文件夹中。 2.在index.html中导入它：<script src="libraries/p5.svg.js" type="text/javascript"></script> 3.创建一个SVG画布：createCanvas(600, 200, SVG);

- George Profenza

---

这真的很有帮助。问题是Chrome或任何其他浏览器都不允许我显示文件（即使它是PNG或JPG）。 - Zardoz

如果这个回答有帮助的话，请随意点赞。关于文件的展示 - 你是如何展示这个文件的？如果你只是在浏览器中打开一个HTML文件而不是通过服务器呈现它，你会得到一个类似于“跨源请求仅支持HTTP”的错误。你需要在Web服务器上运行代码。你可以轻松地运行本地Web服务器，根据你的操作系统有很多选择(例如XAMPP/MAMP/Python SimpleHTTPServer等)。我能想到最简单的方法实际上是使用p5.js编辑器，它为你处理了这个问题。 - George Profenza