织物-鼠标悬停前如何呈现免费的绘图内容 [英] 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.

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