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变换来达到的，而以上矩阵则是视口矩阵的初始值。

fabric canvas 清空并重置画布相关推荐

fabric.Canvas
fabric.Canvas new Canvas() Canvas class 源码: fabric.js, line 11253 教程: http://fabricjs.com/fabric-int ...
Fabric.js 使用图片遮盖画布（前景图）
本文简介点赞 + 关注 + 收藏 = 学会了在 <Fabric.js 使用纯色遮挡画布> 中讲到使用纯色的方式遮盖画布.如果你的常见需要使用图片来遮盖的话,fabric.js 也提供了 ...
fabric.js对象转json存储并通过json转fabric klass对象添加到画布中
fabric对象转JSON: JSON对象转fabric对象[klass]: 这个是对于图片对象的从图片对象JSON转 klass对象 fabric.Rect.fromObject(jsonObje ...
canvas线条背景(抽象画布可视化，利用canvas绘制多条线条，再利用多条线条同时动态发生改变，形成一幅美妙的动态图，非常惊艳！)
canvas线条背景(抽象画布可视化,利用canvas绘制多条线条,再利用多条线条同时动态发生改变,形成一幅美妙的动态图,非常惊艳!) 动态变化中的静态截图 <!doctype html> ...
android canvas 清空画布,清除canvas画布内容(点擦除+线擦除)
清空canvas画布内容 1.重置宽或高由于canvas每当高度或宽度被重设时,画布内容就会被清空,因此可以用以下方法清空:(此方法仅限需要清除全部内容的情况) var c=document.get ...
html 重置画布坐标系,html5清空画布方法（三种）
总结以下三种清空canvas画布的方式: 1. 最简单的方法:由于canvas每当高度或宽度被重设时,画布内容就会被清空,因此可以用以下方法清空: function clearCanvas() { v ...
html 重置画布坐标系,html5实现清空画布的三种方法
摘要腾兴网为您分享:html5实现清空画布的三种方法,找乐助手,悦读小说,一起成长,央视影音等软件知识,以及e430无线网卡驱动,要坚强表情包,微信制作宣传广告,先锋党建,五金计算软件,恒房通app ...
canvas清空画布方法
1. 最简单的方法:由于canvas每当高度或宽度被重设时,画布内容就会被清空,因此可以用以下方法清空: function clearCanvas<span style="font-f ...
html5 canvas清空画布方法
总结以下三种清空canvas画布的方式: 1. 最简单的方法:由于canvas每当高度或宽度被重设时,画布内容就会被清空,因此可以用以下方法清空: [javascript] view plaincop ...

fabric canvas 清空并重置画布

fabric canvas 清空并重置画布相关推荐

最新文章

热门文章