fabric canvas 清空并重置画布

fabric.js是一个强大而简约的依赖HTML5上的 canvas的javascript库,Fabric在canvas元素顶部提供了交互式对象模型,它还具有SVG到画布(和画布到SVG)解析器,官网上提供了丰富的案例,可照葫芦画瓢,足够满足大部分的开发场景。

最近在开发工业互联网的客户端应用,有个场景需要用到canvas画图功能,大致描述就是需要先加载八张图片,然后在图片上根据坐标画出标注的信息,但是在你需要切换数据源的时候,重新绘制,就需要清空画布然后对新的数据源进行绘图,于是就有了下面的经验总结

在使用fabric Canvas绘制图像的时候,常常需要更新画布的内容,于是需要清空之前绘制的内容,并使画布回到原始的状态(如果你使用了拖拽或者放大的功能),只需要执行

canvas.clear(); // 清空画布

如果你画布上的某个元素处于选中状态,则需要

canvas.remove(canvas.getActiveObject());

来移除该元素,最后需要做的就是将画布的视窗回到初始化状态

canvas.setViewportTransform([1, 0, 0, 1, 0, 0]);

其实通过zoomToPoint以鼠标中心缩放画布是通过重新计算视口然后transform变换来达到的,而以上矩阵则是视口矩阵的初始值。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/354704.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

使用vue-axios请求geoJson数据报错的问题

最近的项目用到了echarts一个带有散点地图的图表,按照正常jquery写法应该使用ajax请求geojson的数据动态去切换地图,就像下面这样 $.get(Js/map/ cityData.name .json, function(geoJson) {map(gr-map, cityData, geoJson, geoCoordMap);//调用地图方法}); 页面显示(成功) bu…

前端工业物联网开发(Electron + Typescript + Vue)

从SpaceX公司的带来的Javascript上天新闻开始,以及近几年js语言在整个互联网的广泛应用,注定未来js语言有着不平凡的使命,跨端(一套代码多端运行)、易UI(前端开发UI的便利)、丰富的生态&#xf…

JAVA记录-Servlet介绍

1.什么是Servlet Servlet是sun公司提供的一门用于开发动态web资源的技术。Sun公司在其API中提供了一个servlet接口,用户若想用发一个动态web资源(即开发一个Java程序向浏览器输出数据),需要完成以下2个步骤:1、编写一个Java类,实现…

前端jenkins打包编译发布项目流程

如今的前端项目已不像之前直接写完代码,扔到服务器直接运行了。免不了安装依赖,执行build过程,然后再将打包后的代码上传到服务器,可能还需要更改配置文件啥的。如此多的步骤严重影响开发的日常划水时间。所以jenkins自动化部署少…

OpenMap教程4 –图层

1.简介 在第一个教程中,我们创建了一个基本的OpenMap GIS应用程序,该应用程序在JFrame中显示一个从文件系统加载的具有一个形状图层的地图。 该教程基于com.bbn.openmap.app.example.SimpleMap 。 在第二篇教程中,我们扩展了基本应用程序以使…

Vue.js实战之Vuex的入门教程

在 Vue.js 的项目中,如果项目结构简单, 父子组件之间的数据传递可以使用 props 或者 $emit 等方式。 但是如果是大型项目,很多时候都需要在子组件之间传递数据,使用之前的方式就不太方便。Vue 的状态管理工具 Vuex 完美的解决了这…

为什么写公众号,为什么改名字

这是一篇水果文,啥叫水果文?比水文稍微有点内容,我暂时这么解释吧。最近刚刚开始决定写公众号,其实这个订阅号申请的还蛮早的,当时是为了学习开发公众号而创建的,所以中间有过一段空档期(呸&…

chrome浏览器解决ajax跨域问题

方法一 1、右键谷歌快捷方式,选择“属性”。 2、打开属性窗口,切换到“快捷方式”选项卡。 3、在目标路径的后面添加【 --disable-web-security】,其中chrome.exe与--disable之间有一个空格 4、点击应用,然后点击确定关闭窗口。 5…

前端的使命来了

最近国家工信部发布了一则关于重大App进行适老化改造的政策目的在于随着互联网的普及,有一部分群体在互联网应用的使用上存在着一定的障碍,为了保证这部分人能够顺利的使用手机中的App,国家出手了!现在人们的生活越来越离不开互联…

java 过滤xss脚本_Java Web应用程序的反跨站点脚本(XSS)过滤器

java 过滤xss脚本这是为Java Web应用程序编写的一个好简单的反跨站点脚本(XSS)过滤器。 它的基本作用是从请求参数中删除所有可疑字符串,然后将其返回给应用程序。 这是我以前关于该主题的帖子的改进。 您应该将其配置为链(web.xm…

第二章 Burp Suite代理和浏览器设置

Burp Suite代理工具是以拦截代理的方式,拦截所有通过代理的网络流量,如客户端的请求数据、服务器端的返回信息等。Burp Suite主要拦截http和https协议的流量,通过拦截,Burp Suite以中间人的方式,可以对客户端请求数据、…

Multiavatar头像生成,要多少有多少

还在为选一个个性十足,不同于别人的头像而烦恼吗?12,230,590,464个头像够你选择够不够?Multiavatar一款集多文化头像生成器,它可以根据不同的种族,不同的文化,不同的年龄,不同的世界观&#xff…

将Java 8流解析为SQL

当Java 8发行并且人们开始流式处理各种东西时,很快他们就开始想象如果可以以相同的方式使用数据库将有多大的潜力。 本质上,关系数据库由以表状结构组织的巨大数据块组成。 这些结构非常适合进行过滤和映射操作,如SQL语言的SELECT&#xff0c…

TCP Congestion Control

TCP Congestion Control Congestion occurs when total arrival rate from all packet flows exceeds R over a sustained(维持) period of timeBuffers(缓冲) at multiplexer will fill and packets will be lostPhases of Congestion Behavior Light traffic Arrival Rate &l…

SVG格式的Icon,用了你就知道有多香

继阿里的iconfont之后,字节跳动也出品了自己的矢量图标库,可以实现根据单一SVG源文件变换出多种主题, 具备丰富的分类、更轻量的代码和更灵活的使用场景。矢量SVG图标的出现,完全改变了前端的开发方式,之前总是通过设计…

抓住StackOverFlowError的尾巴

使用Java程序时,可能要处理的一种更烦人的情况是StackOverFlowError,如果您有一个很好的可生产测试用例,那么关于使用堆栈大小或设置条件断点/某种痕迹 。 但是,如果您有一个测试案例可能一次失败100次,或者像我的案例…

sql server2016里面的json功能 - 转

测试一下基本的,从查询结果里面构造一个json 的格式 create table t1(ID int identity,name nvarchar(50),Chinese int ,Math int)insert into t1 values (张三,90,80),(李四,75,90),(王五,68,100) select * from t1select * from t1 for json auto--查询结果 ID …

CSS实现TikTok文字抖动效果

前端同学在日常开发中精彩会因为一些动效和设计争的面红耳赤,设计希望用代码实现,前端要设计出gif图,最后谁也不让谁,设计走了,留下了前端独自加班......CSS技术是前端必须掌握的一项技能,不仅要掌握&#…

当心findFirst()和findAny()

过滤Java 8 Stream ,通常使用findFirst()或findAny()来获取在过滤器中幸存的元素。 但这可能并不能真正实现您的意思,并且可能会出现一些细微的错误。 那么 从我们的Javadoc( 此处和此处 )可以看出,这两个方法都从流中…

Intellij新建Spring项目引入用户目录下的Spring jar包

首先,在IntelliJ IDEA中新建module,选择Spring应用: 在初次使用时,如果IDE检测到本地没有spring核心库,则会在新建过程中下载对应库文件,在使用spring框架时,可以细分多种不同应用场景&#xff…