gdutRex的博客

问题描述使用farbic.image生产图片的时候，需要将canvas导出成图片出现跨域问题分析这是由于canvas导出toDataURL不允许引用跨域的图片，所以出现报错。通过阅读源码，发现其实fabric加载图片的时候是通过创建img标签来下载图片数据，所以只需要在img标签设置允许跨域即可解决这个问题。img.crossOrigin = 'anonymous'解决方案第一种：把图片转为base64案例：let base64 = ''// 服务器传输base64代替url路径le

场景由于需要给每一种元素设置一个独立的工具栏，所以就需要给每一个元素设置一个独立的事件去修改对应的工具栏的值比如一个元素的角度显示问题。我们可以给元素添加一个rotate事件，去动态修改工具栏的angle的值。代码： this.gettersTarget.on('rotating', arg => { // 设置角度的angle值 this.angl...

前提在做毕设的时候，发现fabric.Textbox中有一些属性设置之后，刷新页面无法触发代码演示// this.gettersTarget 是选取的fabric对象// backgroundColor (newValue) { if (this.watcherFlag()) { let {color} = newValue this.ge...

群组群组是Fabric最强大的功能之一。它们就是它们听起来的样子——一种将任何fabric对象组合成单个实体的简单方法。我们为什么要这么做?当然，能够将这些对象作为一个对象来工作!还记得canvas上的任意数量的Fabric对象是如何用鼠标分组的吗?一旦分组，所有对象都可以一起移动甚至修改。他们组成一个团体。我们可以缩放这个组，旋转，甚至改变它的表示属性——颜色、透明度、边框等等。这正是组的...

自由画笔如果说canvas还有什么可以说的亮点—那自然就是能够自由地在canvas绘画.fabric自然也提供了许多方法来进行这一交互功能.只要设置属性isDrawingMode为true就可以实现自由绘画.这时,鼠标就变成一个画笔,通过点击就可以在canvas画布进行绘画.只要设置了isDrawingMode为true你就可以随意地在canvas进行绘画.每次鼠标抬起之后,你所绘画的路径都...

初入fabric今天，我想向您介绍Fabric.js——一个强大的javascript库，它能够让使用HTML5 canvas变得轻而易举。Fabric为canvas提供了一个跟踪的对象模型，以及一个SVG解析器、交互层和一整套其他不可缺少的工具。这是一个完全开源的项目，由麻省理工学院授权，多年来做出了许多贡献。为什么使用Fabricweb Canvas提供一些非常好的图像API,但是这些...

Part 2动画我们通过set方法就可以快速的修改canvas上的图形的属性。但是，往往我们在开发网站的时候除了完成功能需求之外，也需要提高网页的美观。所以动画是一个必不可少的功能。举个例子：rect.set('angle', 45);给这个变化属性添加动画非常简单，因为每一个图形对象都有一个animate的方法，只需要传入相应的参数即可rect.animate('angle', 4...