Question

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

情节不是静态的：必须修改（在演示中点击圆圈）然后按Save SVG按钮保存。

P5.js alas没有提供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，但我根本无法工作。

Answer 1

我找到了一个解决方案：不是最干净的解决方案，但它有效。一个bug涉及字体：如果你加载一个字体，在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>

P5.js实例：导出到SVG

1 个答案: