Fabrics - 如何在鼠标悬停之前呈现免费的绘图内容

2022-01-17 00:00:00 javascript html html5-canvas fabricjs

我有一个组件在after:render"事件中使用 fabricjs 画布内容,这适用于添加对象、移动对象等所有功能.

I have a component that is consuming fabricjs canvas content on the event "after:render", this works well with all the functions like adding objects, moving them etc.

然而,当涉及到自由绘图时,after:render"事件仅在绘图完成后触发,即鼠标向上事件.我试图在鼠标绘图时读取画布数据但没有运气,显然在绘图期间内容尚未呈现到画布上.

However when it come to free drawing, the "after:render" event only fire once the drawing is completed, ie on mouse up event. I tried to read the canvas data while the mouse is drawing but with no luck, apparently the contents is not yet rendered onto the canvas during drawing.

我从这个 PR https://github.com/fabricjs/fabric 了解到.js/pull/2895 ,免费绘图绘制在这个 contextTop 元素上,我的问题是我可以从中读取数据吗?或者无论如何强制织物在鼠标悬停之前呈现免费的绘图内容?我尝试了 renderAll() 运气不佳.

I understand that from this PR https://github.com/fabricjs/fabric.js/pull/2895 that the free drawing draws on this contextTop element, my question is can I read the data from it? Or is there anyway to force fabric to render free drawing contents before mouse up? I have tried renderAll() with little luck.

谢谢!

推荐答案

我认为你可以做到以下几点:

I think you can do the following:

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

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

This should give you the actual path data string to create a path in the system you prefer.

相关文章