Fabrics - How to render free drawing content before mouse up(Fabrics - 如何在鼠标悬停之前呈现免费的绘图内容)
问题描述
我有一个组件在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 - 如何在鼠标悬停之前呈现免费的绘图内容的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持编程学习网!
本文标题为:Fabrics - 如何在鼠标悬停之前呈现免费的绘图内容


- Css:将嵌套元素定位在父元素边界之外一点 2022-09-07
- Fetch API 如何获取响应体? 2022-01-01
- 400或500级别的HTTP响应 2022-01-01
- CSS媒体查询(最大高度)不起作用,但为什么? 2022-01-01
- 失败的 Canvas 360 jquery 插件 2022-01-01
- 如何使用 JSON 格式的 jQuery AJAX 从 .cfm 页面输出查 2022-01-01
- 使用RSelum从网站(报纸档案)中抓取多个网页 2022-09-06
- Quasar 2+Apollo:错误:找不到ID为默认的Apollo客户端。如果您在组件设置之外,请使用ProvideApolloClient() 2022-01-01
- Flexslider 箭头未正确显示 2022-01-01
- addEventListener 在 IE 11 中不起作用 2022-01-01