从paper.js栅格导出svg
[英]Exporting svg from paper.js raster
问题描述
我正在尝试从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>
1 个解决方案
解决方案1
1 2018-09-26 07:45:38
您正在尝试在加载图像之前导出到SVG，因此，在绘制任何内容之前。
在执行图像处理之后，必须在on load callback中调用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-导出栅格
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.