- Java 双重比较
- java - 比较器与 Apache BeanComparator
- Objective-C 完成 block 导致额外的方法调用?
- database - RESTful URI 是否应该公开数据库主键?
我正在使用 Paper.js 在图像上绘图、添加文本等。然后我需要在图像上绘制所有草图并将其全部发送回服务器。具体来说,我在路径光栅化方面遇到了麻烦。我正在尝试使用
paper.project.layers[0].rasterize();
但是当我在图像上执行此操作时,我没有让线条光栅化。我最终得到了
data:,
而不是前缀为“data:image/png;base64”之类的 base64 编码图像。这是一个 Paper.js sketch我在哪里工作。要使用它,请在小猫周围单击几次以绘制几条线。一旦你有两条线,一个新窗口应该打开,显示光栅化图像和你画的红线。
它在草图中有效,但在我自己的代码中无效。
这是我管理绘图的 React 类:
var DrawingTools = React.createClass({
componentDidUpdate: function() {
// Initial path object, will be reset for new paths after Alt is released
var path = this.newPath();
// On mousedown add point to start from
paper.project.layers[0].on('mousedown', function(event) {
if(event.event.altKey && !event.event.ctrlKey) { // Alt key to add a path, but disallow attempting to add text at the same time
if(path.lastSegment == null) {
path.add(event.point, event.point);
} else {
path.add(path.lastSegment.point, path.lastSegment.point)
}
}
});
// On mousedrag add points to path
paper.project.layers[0].on('mousedrag', function(event) {
if(event.event.altKey && !event.event.ctrlKey) { // Alt key to add a path, but disallow attempting to add text at the same time
if(event.event.shiftKey) { // Use shift key for freeform
path.add(event.point);
} else { // Default of straight line added to path
path.lastSegment.point = event.point;
}
}
}.bind(this));
// Each time Alt comes up, start a new path
var tool = new paper.Tool();
tool.onKeyUp = function(event) {
if(event.key == "option") {
path.onMouseEnter = this.props.movableEvents.showSelected;
path.onMouseDrag = this.props.movableEvents.dragItem;
path.onMouseLeave = this.props.movableEvents.hideSelected;
// Start a new path
path = this.newPath();
}
}.bind(this);
},
newPath: function() {
var path = new paper.Path();
path.strokeColor = 'black';
path.strokeWidth = 10;
return path;
},
render: function() {
// Someday colors will go here, or thickness controls, etc.
return (
<div>
</div>
);
}
});
module.exports = DrawingTools;
下面是进行光栅化的代码:
var layerAsRaster = paper.project.layers[0].rasterize(); // TODO flatten layers when have multiple layers // Layer to Paper.js Raster object
var dataString = layerAsRaster.toDataURL();
console.log(dataString);
所以光栅化适用于添加 PointTexts ,但不适用于路径。为什么是这样?与草图相比,我的代码有什么问题?
最佳答案
我认为您对问题的处理有误。也许更好的方法是保存用户点击的点,然后将该数据发送回服务器,你知道它们总是会形成直线。也稍微优化了网络访问。
关于javascript - Paper.js 栅格化图层失败,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33156972/
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,但稍
我是一名优秀的程序员,十分优秀!