javascript - Fabrics - 如何在鼠标松开之前渲染自由绘图内容

标签 javascript html html5-canvas fabricjs

我有一个组件在“after:render”事件上消耗fabricjs Canvas 内容,这与添加对象、移动对象等所有功能配合良好。

但是,当涉及到自由绘制时,“after:render”事件仅在绘制完成后(即鼠标松开事件时)触发。我尝试在鼠标绘制时读取 Canvas 数据,但没有成功,显然在绘制过程中内容尚未渲染到 Canvas 上。

我从这个 PR https://github.com/fabricjs/fabric.js/pull/2895 了解到这一点自由绘图绘制在这个 contextTop 元素上,我的问题是我可以从中读取数据吗?或者是否有办法强制 Fabric 在鼠标松开之前渲染自由绘图内容?我尝试过 renderAll() 但运气不佳。

谢谢!

最佳答案

我认为你可以执行以下操作:

var points = canvas.freeDrawingBrush._points;
var pathData = canvas.freeDrawingBrush.prototype.convertPointsToSVGPath.call(canvas.freeDrawingBrush, points);

这应该为您提供实际的路径数据字符串,以便在您喜欢的系统中创建路径。

关于javascript - Fabrics - 如何在鼠标松开之前渲染自由绘图内容,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51370679/

相关文章:

javascript - 如何在悬停时更改屏幕区域的背景颜色

javascript - 检测数组中的元素

javascript - 使用日期字符串对表进行排序

javascript - jquery或native无法通过ID获取元素

jquery - 如何在滑动div中停止文本换行和垂直居中文本

jquery - 在悬停代码上显示图像不起作用

javascript - 从 Canvas 像素数据中获取错误的 RGB 值

javascript - WebRTC - 删除/减少共享视频流的设备之间的延迟?

javascript - 如何显示用户的矩形的外观?

javascript - 如何用html5 canvas绘制一个连续的圆形图案