FabricJS gotchas/FabricJS陷阱[通俗易懂]

FabricJS gotchas/FabricJS陷阱[通俗易懂]FabricJSgotchas这个页面包含了第一次接触fabricJS的人打开的最常见问题的列表。这些缺陷的产生,既有解释不清的原因,也有文档不完善的原因。在这里,我们试图解决共同的问题。Objectsarenomoreselectable-setCoords(对象不再是可选择的-setCoords)Fabric包含两组坐标以快速知道物体在画布上的位置。它们链接到两个对象属性:oCoords和aCoords。当用户与对象交互或结束变换(例如拖动)时,fabricJS会自动更新这些坐标。

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全家桶1年46,售后保障稳定

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();
  }

Jetbrains全家桶1年46,售后保障稳定

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);
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/206740.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • windows下的免费邮件服务器软件hMailServer

    公司购买了企业邮局给员工提供邮件服务,这样收发外部邮件都没有问题,但有个非常不好的地方,绝大多数邮件都是在内部互相之间转发的,结果就导致一个问题,不管这个邮件是不是发给内部的,邮件都得到外部邮件服务器上转一圈,如果邮件小还好说,有时候数MB的附件,一发一收都得占不少网络资源,一直就想找个办法,能否让发往内部的邮件不需要外部邮件服务器中转,直接局域网内部就搞定了,外部邮件通过外部服务器收发呢?当

  • GPS数据包格式+数据解析[通俗易懂]

    GPS数据包格式+数据解析[通俗易懂]全球时区的划分:  每个时区跨15°经度。以0°经线为界向东向西各划出7.5°经度,作为0时区。即0时区的经度范围是7.5°W——7.5°E。从7.5°E与7.5°W分别向东、向西每15°经度划分为一个时区,直到东11区和西11区。东11区最东部的经度是172.5°E,由172.5°E——180°之间就是东12区。西11区最西部的经度是172.5°W,由172.5°W——180°之间就是西12区。东

  • C++ vector初始化_vector>初始化

    C++ vector初始化_vector>初始化#include<iostream>#include<string>#include<vector>#include<deque>#include<list>#include<forward_list>#include<string>#include<array>usingnamespacestd;#defineLENGTH10typedefintTYPE;.

  • vue 的双向绑定原理「建议收藏」

    vue 的双向绑定原理「建议收藏」vue采用“数据劫持”和“观察者模式(又叫做发布者-订阅者模式)”相结合的方式,通过Object.defineProperty()来劫持各个属性的setter、getter,在数据变动时发布消息给订阅者,触发相应的监听回调。vue的双向绑定原理,分三步:第一步,“数据劫持”:vue用Object.defineProperty()方法实现数据劫持,为每个属性分配一个订阅者集合的管理数组dep; 第二步,“添加观察者”:在编译的时候在该属性的数组dep中添加订阅者,添加方式包括:v

  • 数据库:MySQL 修改密码

    数据库:MySQL 修改密码1.改动数据库配置表编辑/etc/my.cnf,在配置表后方加入“skip-grant-tables”,意思是跳过跳过授权表,即不再坚定账号密码的正确性,使用servicemysqldrestart重启mysql,输入mysql-uroot-p,直接回车进入数据库命令行。2.更改密码MySQL5.7之前的版本修改密码使用的语句是:UPDATEuserSETPassword=PASSWORD(‘yourpassword’)whereUSER=’root’;5.7之

  • pycharm设置语言_pycharm设置语言

    pycharm设置语言_pycharm设置语言不要为看不懂设置而烦恼了,这篇文章教你如何更改PyCharm的语言。

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号