我正在尝试从 paper.js 中的光栅脚本导出 svg。 然而，该脚本似乎只返回原始(隐藏)图像，而不是 Canvas 的矢量内容。
我已经很高兴让脚本正常工作，但需要获取矢量数据才能使用。我很难理解我做错了什么，因为它似乎适用于不包含光栅的脚本。
<!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>
最佳答案
您正在尝试在加载图像之前导出到 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>
关于javascript - 从 paper.js 光栅导出 svg，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28456726/