P5js SVG Export

P5js SVG Export

本文关键字：Export SVG P5js      更新时间：2023-09-26

我有一个P5js草图，它创建了一个字体，用户可以键入任何他们想要的东西。我想允许用户下载其结果的 svg/pdf（矢量）版本。到目前为止，我成功地让他们使用保存顺序下载了.jpg版本并保存了我的屏幕快照。有什么想法吗？

这是一个古老的线程，但也许我的解决方案对某人有用。要将 P5js 中的矢量图形导出到 SVG 文件，首先我使用 p5.svg.js 库中的 SVG 渲染器 - 这会将 svg 元素直接放入 HTML 文档中。导出是提取该元素的内容（通过 outerHTML 属性）并将其保存到文件中（如本文所示）。因此，例如，您的"另存为 SVG"按钮回调函数可能如下所示：

function downloadSvg()
{
    let svgElement = document.getElementsByTagName('svg')[0];
    let svg = svgElement.outerHTML;
    let file = new Blob([svg], { type: 'plain/text' });
    let a = document.createElement("a"), url = URL.createObjectURL(file);
    a.href = url;
    a.download = 'exported.svg';    
    document.body.appendChild(a);
    a.click();
    setTimeout(function() 
    {
        document.body.removeChild(a);
        window.URL.revokeObjectURL(url);  
    }, 0); 
}

从谷歌搜索"p5.js svg"，似乎没有内置的方法来处理p5.js中的SVG图像。

但是，该搜索会返回几个有希望的结果：

这是一个 GitHub 问题，讨论了在 p5.js 中使用 SVG。

下面是一个尝试将 SVG 支持添加到 p5.js 的项目：

p5的主要目标。SVG 是为 p5.js 提供 SVG 运行时，以便我们可以在 中使用 p5 强大的 API 进行绘制，将内容保存到 svg 文件并操作现有的 SVG 文件而不进行光栅化。

另一个链接到另外两个 SVG 库的讨论。

小五。SVG库听起来特别有前途。我建议你尝试一些东西，如果你遇到困难，可以发布一个MCVE。

一个名为

canvas-sketch的新软件包似乎可以解决这个问题。他们也有很多关于p5的例子.js。

const canvasSketch = require('canvas-sketch')
const p5 = require('p5')
const settings = {
  p5: { p5 },
  // Turn on a render loop
  animate: true,
}
canvasSketch(() => {
  // Return a renderer, which is like p5.js 'draw' function
  return ({ p5, time, width, height }) => {
    // Draw with p5.js things
    p5.background(0)
    p5.fill(255)
    p5.noStroke()
    const anim = p5.sin(time - p5.PI / 2) * 0.5 + 0.5
    p5.rect(0, 0, width * anim, height)
  };
}, settings)

如果您在全球范围内使用 p5，则还有一个示例称为 animated-p5.js

相关文章：