p5.js 草图正在创建一个图，我想将其导出为 SVG。
绘图不是静态的：必须对其进行修改（在演示中单击圆圈），然后按下Save SVG按钮保存。
P5.js 唉不提供beginDraw()和endDraw()作为标准处理。
我正在使用https://github.com/zenozeng/p5.js-svg/，如本博客所述：https : //makeyourownalgorithmicart.blogspot.de/2018/03/creating-svg-with-p5js.html
保存静态 SVG（无需用户交互）很容易：取消注释p.SVG并且p.save()代码有效：
<html>
<head>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.6.1/p5.min.js"></script>
<script type="text/javascript" src="https://github.com/zenozeng/p5.js-svg/releases/download/v0.5.2/p5.svg.js"></script>
</head>
<body>
<script>
let colors = ["red", "orange", "yellow", "lime", "green", "blue", "fuchsia"];
let idx = 0;
let sketch = function (p) {
p.setup = function () {
p.createCanvas(400, 400); // (400, 400, p.SVG); <--------------
p.noLoop();
};
p.draw = function () {
p.background("white");
p.fill(colors[idx]);
p.stroke("black");
p.strokeWeight(3);
p.ellipse(200, 200, 200,200);
// p.save(); // <-----------------------------------
};
p.mousePressed = function() {
if (p.dist(p.mouseX, p.mouseY, 200,200) < 100) {
idx++;
idx %= colors.length;
p.redraw();
}
}
};
let myp5 = new p5(sketch, "my_image");
let save_svg = function() {
// ???? <------------------------------
}
</script>
<div id="my_image"></div>
<button onclick="save_svg()">Save SVG</button>
</body>
</html>
用户如何修改绘图，然后仅根据要求保存最终版本？这可以使用p5.js-svg或任何其他库吗？
我也试过https://github.com/gliffy/canvas2svg但我根本无法让它工作。
我找到了一个解决方案：不是最干净的解决方案，但它有效。一个关于字体的错误：如果你加载一个字体，它会在 SVG 内部呈现为几何体。这意味着如果有很多文本并且可视化很慢，SVG 可能会很大。
我创建了一个双画布：一个普通画布和一个 SVG。后者被放入一个隐藏的 div 中。每当我玩完它时，我都会调用 SVG 保存函数，该函数将使用最新计算的参数（当然，它们必须在两者之间共享）。
<html>
<head>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.6.1/p5.min.js"></script>
<script type="text/javascript" src="https://github.com/zenozeng/p5.js-svg/releases/download/v0.5.2/p5.svg.js"></script>
</head>
<body>
<script>
let colors = ["red", "orange", "yellow", "lime", "green", "blue", "fuchsia"];
let idx = 0;
let sketch = function (p) {
p.setup = function () {
if (p.type === "SVG") {
p.createCanvas(400, 400, p.SVG);
}
else if (p.type === "NORMAL") {
p.createCanvas(400, 400);
}
else {
alert("don't know which canvas to create")
}
p.noLoop();
};
p.draw = function () {
p.background("white");
p.fill(colors[idx]);
p.stroke("black");
p.strokeWeight(3);
p.ellipse(200, 200, 200,200);
p.fill("black");
p.noStroke();
p.textStyle(p.NORMAL);
p.text("test", 100, 100);
p.textStyle(p.BOLD);
p.text("bold", 200, 200);
waiting = false;
};
p.mousePressed = function() {
if (p.dist(p.mouseX, p.mouseY, 200,200) < 100) {
idx++;
idx %= colors.length;
p.redraw();
}
};
p.save_canvas = function() {
p.draw();
p.save();
}
};
cvs = new p5(sketch, "my_image");
cvs.type = "NORMAL";
svg = new p5(sketch, "hidden_div");
svg.type = "SVG";
</script>
<div id="my_image"></div>
<div id="hidden_div" style="display:none"></div>
<button onclick="svg.save_canvas()">Save SVG</button>
</body>
</html>