织物-鼠标悬停前如何呈现免费绘图内容

Question

我有一个组件在事件“ after：render”上消耗fabricjs画布内容，这与所有功能（例如添加对象，移动它们等）都很好地配合。

但是，当涉及到免费绘图时，“ after：render”事件仅在绘图完成后才触发，即鼠标上移事件。我试图在绘制鼠标时读取画布数据，但是没有运气，显然在绘制过程中内容尚未呈现到画布上。

我了解到，从此PR https://github.com/fabricjs/fabric.js/pull/2895可以看到，免费绘图是在此contextTop元素上绘制的，我的问题是可以从中读取数据吗？还是有什么办法迫使织物在鼠标向上移动之前渲染自由的绘图内容？我很幸运地尝试了renderAll（）。

谢谢！

Answer 1

我认为您可以执行以下操作：

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

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