Question

我正在尝试从paper.js中的光栅脚本导出svg。然而，该脚本似乎只返回原始（隐藏）图像而不是画布的矢量内容。

我已经非常高兴让脚本正常工作，但需要获取矢量数据。我很难掌握我做错的事情，因为它似乎适用于没有光栅的脚本。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US-x-Hixie">
<head>
<meta charset="utf-8"/>
<title>TEST</title>        
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="http://paperjs.org/assets/js/paper.js"></script>

<script type="text/paperscript" canvas="canvas">  
var raster = new Raster('beaker');
raster.visible = false;
var gridSize = 5;
var spacing = 1.5;
raster.on('load', function() {
raster.size = new Size(200, 120);

for (var y = 0; y < raster.height; y++) {
    for(var x = 0; x < raster.width; x++) {
        var color = raster.getPixel(x, y);

        var path = new Path.Circle({
            center: new Point(x+((Math.random() * 1.5) - 0.75), y+((Math.random() * 1.5) - 0.75)) * gridSize,
            radius: gridSize / 1 / spacing,
            fillColor: 'black'
        });

        var grijs = color.gray * 100;
        var willekeur = Math.random() * grijs;
        if (willekeur < 20) {
            if (color.gray < 0.9) {
                if (color.gray < 0.1) {
                    path.scale(1.5);
                }
                else {
                    path.scale(1 - (color.gray/1.5));
                }
            }
            else {
                path.scale(0);
            }
        }
        else {
            path.scale(0);
        }


    }
}

project.activeLayer.position = view.center;

});

document.body.appendChild(project.exportSVG());

</script>



</head>

<body>


 <canvas id="canvas" width="1200" height="800"><img src="image/h.jpg" id="beaker">
</canvas>



</body>

</html>

Answer 1

您正在尝试在加载图像之前（因此在绘制任何内容之前）导出到SVG。
完成图像处理后，您必须在加载回调中调用project.exportSVG()。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US-x-Hixie">
<head>
    <meta charset="utf-8"/>
    <title>TEST</title>
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
    <script type="text/javascript" src="http://paperjs.org/assets/js/paper.js"></script>

    <script type="text/paperscript" canvas="canvas">
        var raster = new Raster('beaker');
        raster.visible = false;
        var gridSize = 5;
        var spacing = 1.5;
        raster.on('load', function() {
            raster.size = new Size(200, 120);

            for (var y = 0; y < raster.height; y++) {
                for(var x = 0; x < raster.width; x++) {
                    var color = raster.getPixel(x, y);

                    var path = new Path.Circle({
                        center: new Point(x+((Math.random() * 1.5) - 0.75), y+((Math.random() * 1.5) - 0.75)) * gridSize,
                        radius: gridSize / 1 / spacing,
                        fillColor: 'black'
                    });

                    var grijs = color.gray * 100;
                    var willekeur = Math.random() * grijs;
                    if (willekeur < 20) {
                        if (color.gray < 0.9) {
                            if (color.gray < 0.1) {
                                path.scale(1.5);
                            }
                            else {
                                path.scale(1 - (color.gray/1.5));
                            }
                        }
                        else {
                            path.scale(0);
                        }
                    }
                    else {
                        path.scale(0);
                    }


                }
            }

            project.activeLayer.position = view.center;

            // now you can export to SVG
            document.body.appendChild(project.exportSVG());
        });
    </script>



</head>

<body>


<canvas id="canvas" width="1200" height="800"><img src="image/h.jpg" id="beaker">
</canvas>



</body>

</html>

从paper.js栅格导出svg

1 个答案: