Fabrics - 如何在鼠标悬停之前呈现免费的绘图内容 [英] Fabrics - How to render free drawing content before mouse up

问题描述

我有一个组件在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.

这篇关于Fabrics - 如何在鼠标悬停之前呈现免费的绘图内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！