FabricJS gotchas/FabricJS陷阱
FabricJS gotchas
其他文章见:Fabric.js中文文档导航
这个页面包含了第一次接触fabricJS的人打开的最常见问题的列表。这些缺陷的产生,既有解释不清的原因,也有文档不完善的原因。在这里,我们试图解决共同的问题。
Objects are no more selectable - setCoords(对象不再是可选择的-setCoords)
Fabric包含两组坐标以快速知道物体在画布上的位置。它们链接到两个对象属性:oCoords和aCoords。
当用户与对象交互或结束变换(例如拖动)时,fabricJS会自动更新这些坐标。在所有其他情况下,开发人员必须调用对象.setCoords()
以便在渲染位置识别对象。
最常见的症状是对象不可选择。这发生在通过“top/left”或“scale”或“canvas”视口更改开发代码之后。在这些操作之后,相同的代码最终应该对所有对象调用“setCoords()”。
function repositionRect(x, y) {rect.left = x;rect.top = y;rect.setCoords();}
Wrong position after reloading a JSON object - NUM_FRACTION_DIGITS(重新加载JSON对象后位置错误-NUM_FRACTION_DIGITS)
Fabric可以以纯对象格式序列化和反序列化对象。
在处理序列化时,float可能是一个问题,并提供带有不必要数量小数的长字符串。这会使字符串大小增大。
为了减少这种情况,在名为“NUM_ufracts\u DIGITS”的对象上定义了一个常量,历史上设置为2。这意味着,顶部值’3.454534413123’被保存为’3.45’,对于比例、宽度、高度相同。除非你在没有精度问题的情况下进行处理,否则这基本是最好的。
举一个例子,可以使用“ 0.0151”的比例将非常大的图像缩小为较小的尺寸。
在这种情况下,序列化会将其另存为“ 0.02”,从而有意义地改变了比例。如果遇到这种情况,请在项目中设置更高的常量:fabric.Object.NUM_FRACTION_DIGITS = 8
以使属性具有8位小数。 这也会影响SVG导出。
这也会影响SVG导出。
Objects misbehave when dealing with text input - numbers vs strings(对象在处理文本输入时表现不正常-numbers vs strings)
有时,在原型和概念的快速证明中,人们使用文本输入来更改fabric对象的属性。
Fabric文档指出top,left,scaleX,angle和其他属性需要数字作为值。
文本输入返回字符串。当将字符串转换为数字时,FabricJS不会检查类型也不进行转换,这是由于某些代码的副作用,而不是要依赖的功能。
在将值分配给需要数字的属性之前,请使用parseInt和parseFloat。
Object does not update after changing property - objectCaching(更改属性后对象不会更新-objectCaching)
造成混淆的常见原因是,开发人员分配了新的属性来填充并且对象在renderAll之后不更新。 FabricJS确实将对象缓存为图像以加快渲染速度。如果您想让fabricJS知道某些更改并且需要重绘特定对象,请使用set方法。
rect.set('fill', 'red');
canvas.requestRenderAll();
或者,作为替代:
rect.fill = 'red';
rect.stroke = 'blue';
rect.set('dirty', true);
有关更多信息和详细说明,请查看专用的缓存页面。
Objects have a transparent stroke of width 1 by default(默认情况下,对象的透明stroke宽度为1)
默认情况下,对象的宽度为1的透明stroke会在水平和垂直方向上将其移动0.5个像素。这将使您难以将对象定位在准确的位置。造成这种情况的原因有两个:-如果没有strokeWidth,则设置stroke color不会带来任何结果-SVG具有相同的默认值,因此对于svg导入来说,这样做是有道理的-在fabric v1.5之前,stroke不是控制边界框和位置的部分,所以这不是问题。要删除stroke:
rect.set('strokeWidth', 0);
FabricJS gotchas/FabricJS陷阱相关推荐
- 怎样写出无法维护的代码
每次写代码的时候,我都尽量写出一个尽可能方便其他人看得懂的代码,没办法,很多时候维护也是我自己,活着小的看不懂,还是我自己出手.但今天我想反其道而行之,怎样才能写出一份无法维护的代码. 原文在这里,原 ...
- 如何编写无法维护的代码_如何写出让同事无法维护的代码?
程序命名 容易输入的变量名.比如:Fred,asdf 单字母的变量名.比如:a,b,c,x,y,z(如果不够用,可以考虑 a1,a2,a3,a4,-.) 有创意地拼写错误.比如:SetPintleOp ...
- 程序人生:教你写出让同事抓狂的代码
对,你没看错. 本文就是教你怎么写出让同事无法维护的代码. 01 程序命名 容易输入的变量名.比如:Fred,asdf 单字母的变量名.比如:a,b,c,x,y,z(如果不够用,可以考虑 a1,a2, ...
- 【转】如何写出让同事无法维护的代码
译者:陈皓 (@左耳朵耗子) 译文:http://coolshell.cn/articles/4758.html 对,你没看错,本文就是教你怎么写出让同事无法维护的代码. 一.程序命名 容易输入的变量 ...
- [转]如何写出让同事无法维护的代码?
原文地址 译文地址 对,你没看错,本文就是教你怎么写出让同事无法维护的代码. 一.程序命名 容易输入的变量名.比如:Fred,asdf 单字母的变量名.比如:a,b,c,x,y,z(如果不够用,可以考 ...
- 案例精选 | 左耳朵耗子:如何写出让同事无法维护的代码?
对,你没看错,本文就是教你怎么写出让同事无法维护的代码.对于有下面这些编程习惯的朋友,请大家对号入座. 程序命名 容易输入的变量名.比如:Fred,asdf... 单字母的变量名.比如:a,b,c, ...
- 一篇文章教你如何写出【✨无法维护✨】的代码?
对,你没看错. 本文就是教你怎么写出让同事无法维护的代码. ❤️ 1.程序命名❤️ 容易输入的变量名.比如:Fred,asdf 单字母的变量名.比如:a,b,c,x,y,z(如果不够用,可以考虑 a1 ...
- 灵魂的拷问 怎么将代码写得让人无法维护?
-这文章蛮有意思的,果断选择分享+散播+推广 三连- 程序命名 容易输入的名字.比如:Fred,asdf 单字母的变量名.比如:a,b,c, x,y,z(如果不够用,可以考虑a1,a2,a3,a4,- ...
- 如何缺心眼的在代码里下毒
偶然看到一篇脑洞大开的文章,转载过来乐呵一下,原文地址:https://www.jianshu.com/p/635fcf4fe594 下毒要点 独特的算法,个性的变量命名. 复杂的结构,畸形的文件路径 ...
最新文章
- signature=2ee20a16234208d4dd8bbd7fe87bb472,sstk-20200428
- Nancy总结(三)Nancy资料介绍
- seo 伪原创_SEO干货——文章到底如何伪原创?
- 世界对一名颓废者的惩罚——SDOI2019R1游记
- web farm 讨论引出
- window.location.href如何多次请求_何为幂等?如何设计?
- krpano音量控制(我们已经转移到krpano中国网站 krpano360.com)
- Linux kernel中 __bitmap_weight函数的理解
- 【观察】从实践到赋能再到引领,华为释放数据中心无限潜
- 电商行业用户画像分析案例
- RFC8998+BabaSSL---让国密驶向更远的星辰大海
- [C#][转载]Sqlite操作大全
- opencv保存视频文件很大
- iOS-OC-提交审核:Missing Push Notification Entitlement
- PPT画图软件,强烈推荐!提升能力的利器。
- H2O.ai初步使用
- no such file or directory, open
- Android储存 文件储存
- 傻傻分不清?云存储、云计算与分布式存储、分布式计算是一回事吗?
- 机制设计专栏(2)-说一说IC机制