fabric.js遇到问题记录

最近在用fabric.js做东西,由于中文资源少,加上国内用的人不多,所以遇到问题就比较麻烦,故想到写这篇文章,把遇到的问题及时记录一下,解决的问题以及解决的方法记录下载,方便自己做笔记,也方便有需要的人过来查看.

       1.canvas中加载第三方字体的问题
       在加载第三方字体的时候出现了问题,画布上渲染出来的轮廓与实际的不符,导致选中边框线和内容不匹配,字体位置偏移,主要是有数字或者字母的情况会出现,然后就去官方github的issue找相关问题,没想到还真有这个问题,而且问题还是开启状态,然后就感觉这是插件的bug还未修复.
       但是自己又不甘心,就想着继续研究,看有办法解决么.功夫不负有心人,终于找到解决方法了,其实不是插件的bug,而是使用方法有问题.
       之前的使用方法是选择字体后,对相应的文本加fontfamily属性值,然后监测字体加载,在字体加载完成,再找到改字体相关的文本元素,重置一下text属性就可以看到效果.
       其实这样是错误的.经试验发现,在未加载完成字体之前不能先设置fontfamily,在等到字体加载完成之后再去设置fontfamily就ok了,字体轮廓大小渲染正常.

       2.用set方法设置文本属性时,无法正确渲染添加的文本属性
       描述:如设置字体的字号,粗体,下划线等时,无法正确渲染,这个是我使用问题还是插件bug不得而知
       解决方法:目前是用的迂回的解决方法,在修改这些的时候同时修改一下字体类型就可以正确渲染.

转载于:https://juejin.im/post/5c6bb0486fb9a049ed316f3d