P5.js 实例：导出为 SVG

Question

一个 p5.js 草图正在创建一个我想导出为 SVG 的绘图。

绘图不是静态的：必须对其进行修改（在演示中通过单击圆圈）然后按 Save SVG 按钮保存。

P5.js 唉，没有提供 beginDraw() 和 endDraw() 作为标准处理。

我正在使用 https://github.com/zenozeng/p5.js-svg/, as described in this blog: 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 但我根本无法让它工作。

Answer 1

我找到了一个解决方案：不是最干净的，但它有效。一个与字体有关的错误：如果加载字体，在 SVG 内部它会呈现为几何图形。这意味着如果文本很多且可视化速度较慢，则 SVG 可能会很大。

我创建了一个双人 canvas：一个普通的和一个 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>

P5.js 实例：导出为 SVG

P5.js instance: export to SVG

svg

export

p5.js