Question

我有一个P5js草图，它创建一个用户可以输入任何想要的字体。我想允许用户下载他们的结果的svg / pdf（矢量）版本。截至目前，我已成功让他们使用保存订单下载.jpg版本并保存我的屏幕截图。有什么想法吗？

Answer 1

从谷歌搜索＆＃34; p5.js svg＆＃34;，似乎并不是在p5.js中使用SVG图像的内置方法。

然而，该搜索返回了几个有希望的结果：

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

Here是一个尝试向p5.js添加SVG支持的项目：

p5.SVG的主要目标是为p5.js提供一个SVG运行时，这样我们就可以在＆lt; svg＆gt;中使用p5强大的API进行绘制，将内容保存到svg文件并操作现有的SVG文件没有光栅化。

Another discussion链接到另外两个SVG库。

p5.SVG库听起来特别有前景。如果你遇到困难，我建议你尝试一下MCVE。

Answer 2

那是一个旧线程，但是也许我的解决方案对某人有用。要将P5js中的矢量图形导出到SVG文件，首先我使用p5.svg.js库中的SVG渲染器-这会将 svg 元素直接放入HTML文档中。导出是提取该元素的内容（通过 outerHTML 属性），并将其保存到文件中（如this帖子中）。因此，例如，您的“另存为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); 
}

Answer 3

一个名为 canvas-sketch 的新包似乎解决了这个问题。他们也有大量的 examples 用于 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

的示例

P5js SVG Export

3 个答案: