Экземпляр P5.js: экспорт в SVG - PullRequest
Новая
       29

Экземпляр P5.js: экспорт в SVG

0 голосов
/ 03 мая 2018

Эскиз 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, но у меня не могло быть вообще ничего.

1 Ответ

0 голосов
/ 07 мая 2018

Я нашел решение: не самое чистое, но оно работает. Ошибка касается шрифтов: если вы загружаете шрифт, внутри 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>
...