Canvas 库 fabric.js 可以实现哪些功能？ 动图介绍

[nihaojob]

我是开源图形编辑器vue-fabric-editor的作者，它是基于 fabric.js 和 Vue 开发的插件化图片编辑器，可自定义字体、素材、设计模板、右键菜单、快捷键。可以非常方便的二次开发，帮助开发者快速构建图片编辑应用。

fabric.js 是一个 canvas 库，今天整理了一下 fabric.js 可以实现的功能，用动图的形式分享给大家，方便快速了解 fabric.js 。

源码见链接

辅助线

曲线文字

垂直文字

3D 结合

自定义文字条

缩略图

白板

自定义控制条

Gif 展示

图表展示

多边形绘制

拼图

笔刷

多图生成

导入 PDF

流动线条

拖入元素

开源应用

[yuuko]

有些图挂了

[nihaojob]

@yuuko 可能图片比较大 可以在 github 上看 https://github.com/nihaojob/vue-fabric-editor

[caixiaomao]

学习了

[Geekerstar]

牛逼

[EspoirBao]

有没有 fabric 坐标转 dom 坐标的 demo ？ fabric 里面绘制完对象之后在 dom 上面用 canvas 再覆盖一层带材质的贴图，这个功能做了几个月了没做好，始终有个偏移量，覆盖不完整

[nihaojob]

@EspoirBao 为啥这么蹩脚的实现呢？ 直接用不行吗？ 这种还涉及画笔的缩放和拖拽，视口变化后，就不好映射到 DOM 的坐标了

[EspoirBao]

@nihaojob 程序嘛，是这个样子的，老板提的需求，要求在绘制了线之后可以改成动态的材质，类似 webgl 那样可以随便将线的材质贴上去，现在材质也能贴了，覆盖的 webgl 层也没问题了，就是这个坐标很麻烦

[Yjhenan]

看着功能挺强的，我写了个打印编辑器，用来给客户自定义标签用，dom 实现的，挺费劲的😓