Fabric.js 样式不更新解决方法案例

目录
  • 本文简介
  • 是否需要重新绘制
  • 代码仓库

本文简介

不知道你有没有遇到过在使用 Fabric.js 时无意中一些骚操作修改了元素的样式，但刷新画布却没更新元素样式？

如果你也遇到同样的问题的话，可以尝试使用本文的方法。

是否需要重新绘制

我先举个例子。

<canvas id="c" style="border: 1px solid #ccc;"></canvas>
<script>
let canvas = new fabric.Canvas('c')
// 矩形 - 亮粉色
let rect = new fabric.Rect({
  left: 50,
  top: 30,
  width: 80,
  height: 60,
  fill: 'hotpink'
})
canvas.add(rect)
setTimeout(() => {
  console.log(rect.fill) // 输出 'hotpink'
  rect.fill = 'red'
  console.log(rect.fill) // 输出 'red'
  canvas.renderAll() // 刷新画布
}, 1000)
</script>

在这个例子中，页面运行1秒后，我想通过 rect.fill = 'red' 的方式将画布中的矩形修改成红色。

修改完成后在控制台输出当前矩形的颜色，然后再通过 canvas.renderAll() 的方式刷新画布。

从控制台输出的数据来看，矩形确实是变红了，但从视觉上看画布中的矩形却还是粉色。

其实正确的做法是使用 rect.set('fill', 'red') 去修改矩形颜色，set() 方法会通知画布要刷新样式。

但如果你坚持使用 rect.fill = 'red' 的方式去修改也不是不行，此时需要将矩形的 statefullCache 设置为 true，矩形就会自动检测属性的值的更新。

// 省略部分代码
let rect = new fabric.Rect({
  left: 50,

  top: 30,
  width: 80,
  height: 60,
  fill: 'hotpink',
  statefullCache: true // 自动检测更新
})
canvas.add(rect)
setTimeout(() => {
  console.log(rect.fill) // 输出 'hotpink'
  rect.fill = 'red'
  console.log(rect.fill) // 输出 'red'
  canvas.renderAll()
}, 1000)

但并不是所有情况都适合将 statefullCache 设为 true。

官方文档也有介绍到：

statefullCache: Boolean

When true, object properties are checked for cache invalidation. In some particular situation you may want this to be disabled ( spray brush, very big, groups) or if your application does not allow you to modify properties for groups child you want to disable it for groups. default to false since 1.7.0

说了这么多，最后我还是推荐通过 set() 方法修改元素的属性。

代码仓库

是否需要重新绘制缓存的副本

以上就是Fabric.js 样式不更新解决方法案例的详细内容，更多关于Fabric.js 样式更新的资料请关注我们其它相关文章！

赞 (0)

相关推荐

  • JS前端轻量fabric.js系列物体基类

    目录 前言 FabricObject 基类的实现 抽离共同属性 抽离共同方法 Rect 类的实现 本章小结 前言 在上个章节中我们已经创建了画布,接下来就可以进行物体的绘制了,那具体要怎么画呢?根据文章标题可以猜到应该是要抽象出一个物体基类,归纳出一些它们的共性,那它们能有啥共性呢,毕竟每个物体好像都是各画各的.对于这个问题大家可以先简单思考几秒钟再往下看

  • Fabric.js 实现变换视窗示例详解

    Fabric.js 实现变换视窗示例详解

    目录 引言 viewportTransform 缩放 斜切 平移 setViewportTransform(vpt) 引言 fabric.js 可以通过 viewportTransform 属性配置画布的视窗属性. 听上去很高级的样子,但其实这是原生 canvas 就已经存在的东西,fabric.js 的 viewportTransform 也就直接复用了原生 canvas 的 transform() . fabric.js 官方文档上也是这么说的 viewportTransform :Arra

  • Fabric.js 修改画布交互方式作用详解

    Fabric.js 修改画布交互方式作用详解

    目录 本文简介 动手试试 和 hasControls .hasBorders 的区别 和 StaticCanvas 的区别 总结 本文简介 fabric.js 为我们提供了很多厉害的方法.今天要搞明白的一个东西是 canvas.interactive . 官方文档对 canvas.interactive 的解释是: Indicates that canvas is interactive. This property should not be changed. canvas.interacti

  • JS前端以轻量fabric.js实现示例理解canvas

    目录 缘起 fabric.js 初体验 fabric.js 的大体结构 canvas 能干嘛? 小结 缘起 最近想系统看下 canvas 这个东西,所以找了一个库看看,本来打算写一两篇文章沉淀一下,发现东西有点多

  • JS前端轻量fabric.js系列之画布初始化

    目录 前言 画布的前置知识 画布初始化 变换练习 小结 前言 从这个章节开始我们就步入正题了,那一开始要做啥子呢,回忆下上个章节中 fabric.js 的使用过程,先是创建画布,再添加物体,然后开始动画和交互.显然画布是一切物体的开端,所以首先要搞定的就是它,也就是 const canvas = new fabric.Canvas('canvas') 这一步要做的事情. 画布的前置知识 在说 fabric.js 如何初始化画布之前,先巩固下画布的相关知识点.创建画布要做的事情通常比较简单,就是单

  • Fabric.js 样式不更新解决方法案例

    目录 本文简介 是否需要重新绘制 代码仓库 本文简介 不知道你有没有遇到过在使用 Fabric.js 时无意中一些骚操作修改了元素的样式,但刷新画布却没更新元素样式? 如果你也遇到同样的问题的话,可以尝试使用本文的方法. 是否需要重新绘制 我先举个例子. <canvas id="c" style="border: 1px solid #ccc;"></canvas> <script> let canvas = new fabric

  • Fabric.js 拖拽平移画布方法示例

    目录 正文 原理解析 按下鼠标时 移动鼠标时 松开鼠标时 代码仓库 正文 使用 fabric.js 创建出来的画布默认是不能拖拽移动的. 不过我们可以利用一些小技巧让画布具有被拖拽的能力,fabric.js 官网也提供了一个 demo ,但文档上并没有详细的讲解拖拽画布的实现原理. 本文就粗略分析一下这个原理. 原理解析 鼠标拖拽的原理其实很简单,主要就3步: 鼠标点击元素 移动鼠标 松开鼠标 在鼠标移动时,获取鼠标当前位置,然后修改被拖拽元素的位置. 当松开鼠标时,也要获取松手那刻鼠标所在位置

  • jQuery多个版本和其他js库冲突的解决方法

    jQuery多个版本或和其他js库冲突主要是常用的$符号的问题,这个问题 jquery早早就有给我们预留处理方法了,下面一起来看看解决办法. 1.同一页面jQuery多个版本或冲突解决方法. <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>jQuery测试页</title> </head>

  • js数字舍入误差以及解决方法(必看篇)

    js数字舍入误差以及解决方法(必看篇)

    1.起因: 返回结果是true. 2.原因:计算机的二进制实现和位数限制有些数无法有限表示.就像一些无理数不能有限表示,如 圆周率 3.1415926...,1.3333... 等.JS 遵循 IEEE 754 规范,采用双精度存储(double precision),占用 64 bit. 3.解决方法 (1)toFixed(),存在兼容性(chrome) (2)比较稳妥方法(数字如果过大,也会有误差): *JS 中能精准表示的最大整数是 Math.pow(2, 53),十进制即 9007199

  • nginx 部署 vue 项目找不到js css文件的解决方法

    很多时候 npm run build 之后, index.html 文件中webpack 自动插入的 js 文件 css 文件的相对目录总是不对,发布到服务器上之后,nginx 找不到文件. vue-cli@3 在 vue-cli@3 中你需要为你 webpack 插入到 index.html 中 的所有文件添加一个 baseUrl. 你需要在项目的根目录新建一个 vue.config.js, 添加如下内容: ... module.exports = { baseUrl: isProd ? '/

  • spring boot 2.x html中引用css和js失效问题及解决方法

    在application.properties中配置了static的默认路径 我的static目录结构是这样的 index.html中这样引用css或者js文件,用到了th标签 html使用th标签需要先导入 以上这样配置好了之后发现网页的css和js果然加载出来了. 自定义拦截器失效 在自定义拦截器注册之后发现静态资源被拦截了,注释掉拦截器发现果然是拦截器的问题. 在注册方法上使用了excludePathPatterns()排除静态资源的拦截,发现该方法失效了,查看源码WebMvcConfig

  • 中文路径导致unitpngfix.js不正常的解决方法

    双击html页面在ie6里打开正常.但是发布到网站后,网站路径里有中文路径导致png图片不显示.解决方法:修改网站路径中的中文,改为英文.

  • 浏览器解析js生成的html出现样式问题的解决方法

    浏览器解析js生成的html出现样式问题的解决方法

    我实现的功能是添加标签,无刷新地添加到标签列表的最后,见下图中第二行,样式明显有问题 我反反复复地检查了chrome console的html结构,都是一样一样的,在IE和FF下我也认真比较过的,还是没有区别.见下图 同样的html结构,同样的style,竟然展现的样式差异很大,一时没了想法,像个无头苍蝇.索性我就把console下的html复制到notepad++进行对比,看出了一点端倪,见下图.左侧为js生成的html,右侧为页面(.aspx)中的html 引起样式差异的原因可能就是左侧缺少

  • ASP.NET获取不到JS设置cookies的解决方法

    在js方法中添加"path= 过期时间"就可以解决这个问题. 例如://写cookies 复制代码 代码如下: function setCookie(name,value) { document.cookie = name "=" escape (value) ";path=/"; //设置的cookie关闭浏览即失效 } 加多了一个path=/,就行了.就这么简单. 这里设置了Cookie的Path属性,必须在客户端和服务器端同时设置 Path

  • ajax跨域请求js拒绝访问的解决方法

    求解决办法 复制代码 代码如下: ajax{ url :"http://xxxx/app", type:"POST"; dataType:"json", } 不能用jsonp 因为jsonp发送数据 type 为 get type 必须为post url 不能加参 (例:http://xxxx/app?callback=aaa) 返回数据位json格式.求方法

随机推荐