个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
28
4
我正在尝试从 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/
28
4
0
resizeable_dialog.html :host { display: block; } Open
我有一个带对话框的基本抽屉应用程序。当对话框打开时，工具栏中的阴影(我假设)在框上流血。有解决办法吗？ ...
我正在使用 polymer 入门套件。 当我添加 元素，它出现在 后面当我 .show() 有没有其他人遇到过这个问题，您有什么解决办法吗？ 最佳答案 我遇到了同样的问题并弄清楚发生了什么。 如果你
我想在 Polymer 元素中使用带有 paper 元素的 Bootstrap 主题。 我是否仍可以使用 paper 元素，但在全局范围内关闭它们的(Material Design)样式？ 最佳答案
我有一个绝对定位的元素，它在纸张对话框的外面，(它是一个 body > div)。 我在 div 中有几个输入字段，我希望能够在其中输入一些文本， 但 paper-dialog 并没有让它离开焦点，引
HTML Full customer list CSS:
我正在尝试圆化 paper-listbox 的 Angular ，它包含在 paper-dropdown-menu 中。但是，以下 CSS 并没有像我预期的那样改变边框半径: paper-listbo
我已经安装了webppl-agents库(以及 webppl 和 webppl-dp )并尝试运行命令行测试，但我遇到了一些麻烦。 npm 文件模块 (1) 中的 jsdom 似乎存在依赖性问题(2)
我正在尝试使用 paper.js 优秀的 path.simplify 方法来简化手绘路径，以便在用户完成绘制后生成平滑的曲线。由于这是非 HTML 输出(TV Telestration)，我尝试在 N
我有一个元素，我们称它为x-foo .里面x-foo , 我正在使用 . 问题 How do I change the ripple color from (the default) yellow
注意:这个问题是关于旧版本的 polymer 。 Google 工程师致力于对 Polymer 包进行快速突破性更新，再加上当时他们并未进行 dogfooding，这意味着该问题已过时。 绑定(bin
UPD:已解决 我有默认的 Polymer Starter Kit(高级)布局，结构如下所示
如何访问这样写的css(我搜索过但没有知道这篇文章怎么称呼): paper-spinner{ --paper-spinner-layer-1-color: var(--paper-gre
您好: 每当变量更改时，我都有一个从可观察的变量填充的paper-dropdown-menu，我想重新选择第一项。但是，第一次正确运行时，下次它将继续选择与第一次选择相同的第一个元素。这是组件的htm
我得到了一个纸张对话框，可以在AngualrDart组件中使用纸张输入正常工作。当我尝试使用纸质文本区域时，它是只读的。 这是一个工作文件输入和只读文件文本区域: {{ death_year
我有一个简单的组件，其中包含定义如下的雇员列表: @Component(selector: 'employee-list', templateUrl: 'employee_list.html'
我们正在使用Paper.js构建各种图像编辑器。我们在Paper.js画布的一侧有一个队列，可以在图像之间进行切换。每次在图像之间切换时，我们都希望将所有注释平整化（光栅化）到刚编辑的图像上。 每次切
我只是想进入 paper.js。当它们被内联时，代码可以正常工作。但是当我将它们移动到外部文件并在那里 src 时，错误开始弹出:( 谁能弄清楚我做错了什么？附上了错误截图 非常感谢! Error s
就目前而言，这个问题不适合我们的问答形式。我们希望答案得到事实、引用或专业知识的支持，但这个问题可能会引起辩论、争论、投票或扩展讨论。如果您觉得这个问题可以改进并可能重新打开，visit the he
我正在使用 来显示我将以编程方式构建的 SVG 图像。在开始之前，我需要知道渲染容器的大小。我正在等待打开的属性更改为 true 但这显然为时过早，因为 .clientWidth 在触发时为 0，但稍
我是一名优秀的程序员,十分优秀！