每周三集前端免费视频
每年帮助超100万前端爱好者学习

步入Fabric.js 中文视频教程

前言和初衷:

Fabric.js在我们这里(天朝)使用的并不是很多,但是这并不能掩盖它的优点,正所谓:大米饭永远盖不住四喜丸子。我在网上搜了很多Fabric的文章,多是英文的,几乎没什么中文的介绍和教程。由于英文的原因增加了小伙伴们的学习梯度,那我就把我对Fabric.js所掌握的知识和了解的东西,写成文章,做成视频,希望可以帮助更多的小伙伴进行学习。

这套教程每一节都会有文字版和视频版,如果你在工作时不方便观看视频教程,您可以阅读文字版的教程。

最近GitHub被墙,所以提供国内的coding作为源码仓库。

源码:https://coding.net/u/shenghongyu/p/fabric.js-Demo/git


第01节:初识简单而且强大的Fabric.js库

Fabric.js是一个功能强大和简单Javascript HTML5的canvas库。Fabric提供了很多可以互动的Canvas元素,还在canvas上提供了SVG的语法分析器。

你可以轻松的使用Fabric.js做到下面的操作:

  • 在canvas上创建和填充填充简单的几何图形。
  • 放上一张已经准备好的照片。
  • 作一些有复杂路径组成的图形。
  • 给任何图形填充渐变色。
  • 编辑canvas上文字的大小,对齐方式,字体和其他属性。
  • 对一张图片进行效果叠加,例如变成黑白色,变成偏红色。
  • 进行动画编辑和互动操作。
  • 在canvas上进行移动,缩放你选择的图形。
  • 进行群组编辑。
  • 自由绘画,就像你在纸上绘画一样。
  • 生产JSON或SVG数据,并在你需要的时候进行恢复。

如果你觉的这篇文章满足不了您的需求或者你想了解更多关于Fabric.js的信息,你可以上它的官方网站或者访问Github网址。

Fabric.js的官网地址:http://fabricjs.com

GitHub地址:https://github.com/kangax/fabric.js/

 

其实Fabric.js的开发环境没有什么特殊要求,它只是一个纯粹的JavaScript库。我们只要下载Fabric.js并像正常引入Javascript就可以开始开发了。

虽然不难,但是我还是给出一个简单的步骤:

  1. 下载Fabric.js:您可以去Github上下载,也可以在官网下载(http://fabricjs.com/build/).
  2. 这里推荐在官网进行下载,进入网址后,点击“select all”选择全部,然后点击“Dev build” 进行下载。
  3. 把下载好的fabric.js复制到你的开发目录。
  4. 在HTML里用<script>标签引入fabric.js库。

我们可以通过画一个简单的正方形来感受一下fabric.js的魅力。

写完这段代码你就可以在浏览器上看到我们绘制的红色正方形了。恭喜你,你已经走进了Fabric.js的世界,让我们下节课一起继续冒险吧。


1 2 3 4 5 6 7 8 9 10 11 12 13
未经允许不得转载:技术胖-胜洪宇关注web前端技术 » 步入Fabric.js 中文视频教程
分享到: 更多 (0)

评论 23

  1. #19

    技术胖,不知道该教程会不会继续更新,很棒!留个言,有个问题,希望您看到后能给我个提示,画布上有多张图片,每张图片是不规则的,当我鼠标滑过某一张图片时,只有鼠标经过图片有效边框区域的时候,再点击进行选中,而不是一进入该张图片的整个区域的时候,点击就可以选中?不知道这么说,胖哥能够明白?

    匿名2周前 (07-06)回复
  2. #18

    第六节:img.applyFilters(); 已经不需要传参进去了

    匿名5个月前 (03-07)回复
  3. #17

    我用Vue结合fabric,写将图片复制拖拽到canvas里面,不能多次拖拽复制 主要是var canvas = new fabric.Canvas(‘canvas’)不知道卸载哪儿 ; 只想new一次

    匿名5个月前 (03-06)回复
  4. #16

    当我已经画出了一个有颜色的图形,我想修改画出来的图形的颜色,应该怎么操作啊?

    匿名7个月前 (01-04)回复
  5. #15

    序列化后的内容怎么这么大?存数据库合适吗

    匿名7个月前 (12-25)回复
  6. #14

    感觉技术胖太牛逼了,我现在要用的东西,在你的博客都有教程。

    匿名7个月前 (12-25)回复
  7. #13

    大神!怎么设置画布的内部编辑区域。就是体恤定制,在T恤上画一个可编辑区域?

    匿名7个月前 (12-22)回复
  8. #12

    功能强大,教程很详细

    匿名7个月前 (12-18)回复
  9. #11

    哈哈。我看文档是有的。打扰了~。~

    匿名7个月前 (12-13)回复
  10. #10

    胖哥!多边形如何画?我看你说用 svg?

    匿名7个月前 (12-13)回复
  11. #9

    很好的教程,期望继续出高阶教程,看的人会越来越多的,加油

    匿名8个月前 (12-05)回复
  12. #8

    胜哥这个教程非常好,能不能再出个中阶或者高阶的教程呢?非常感谢!

    东方元永8个月前 (11-07)回复
    • 看的人不多,所以可能不会继续出了。

      技术胖8个月前 (11-07)回复
  13. #7

    层级怎么修改啊

    西安-水神9个月前 (10-31)回复
  14. #6

    请问fabric.js如何改变对象边框的边角,要一图片显示出来,如何做到?

    言叶11个月前 (09-01)回复
  15. #5

    胖哥 你的教程真的很不错, 在一一学习中…

    小米11个月前 (08-21)回复
  16. #4

    在Vue中使用Fabric.js ,创建一个image对象,打包发布之后,图片设置的宽高失效了

    mory12个月前 (07-28)回复
  17. #3

    还有一个关于group的功能
    比如老师画了一个房子,一棵树,一个人,一个太阳,一把伞。然后这个时候老师想把伞和人合并为一个组,其余的仍然单独操作,但是人和伞合并在一个组内操作。描述得不好,如果可以,希望能加一下你的QQ获得一下帮助

    谢浪1年前 (2017-02-09)回复
  18. #2

    你好,我是在github上看见你的,然后疯狂百度你。
    很好的教程,对新手帮助肯定很大,希望能写一些进阶文档,国内用fabric的太少,想实现一些复合功能还有一点难度。
    我这需要做一个教学项目,教师端绘制画布,然后推送到学生平板上,基本功能都已经实现。但是还有几点希望能提供一些思路,感激不尽。
    1.学生通过isDrawingMode自由绘制线后的一个橡皮擦功能,困惑好久了,一直实现不了
    2.学生端通过touchstart和touchend的坐标断电画一根直线,感觉我现在实现的方法我感觉有点low,fabric有提供类似功能的api吗?英文不好看着真太累了
    3.这一点我一点头绪也没有,也没做过类似功能,绘制后有一个回退和撤销回退,CTRL+Z那种,希望胜哥能在闲暇之余指点一二

    谢浪1年前 (2017-02-09)回复
  19. #1

    Fabric 如何添加鼠标右键 在图形 或Itext 里

    Klaus1年前 (2017-02-09)回复
    • var canvas = new fabric.Canvas(‘c’, {
      backgroundColor: ‘#fff’,
      selectionLineWidth: 2,
      width: 780,
      height: 600,
      preserveObjectStacking: true,//选中Obiect时当前图形是否置于顶层
      fireRightClick: true//开启右键事件
      });

      //打开右键菜单
      canvas.on(‘mouse:down’, function (opation) {
      if (opation.e.button === 2) {
      if (opation.target) {
      canvas.setActiveObject(opation.target)
      $(‘.popupMenu’).show().css({
      left: opation.e.clientX,
      top: opation.e.clientY
      }).find(‘.toPre’).on(‘click’, function (e) {//上移一层
      e.stopPropagation();
      canvas.bringForward(opation.target)
      $(this).parent().hide().children().unbind(‘click’)
      }).end().find(‘.toNext’).on(‘click’, function (e) {//下移一层
      e.stopPropagation();
      canvas.sendBackwards(opation.target)
      $(this).parent().hide().children().unbind(‘click’)
      }).end().find(‘.removeSvg’).on(‘click’, function (e) {//删除图层
      e.stopPropagation();
      opation.target.remove()
      $(this).parent().hide().children().unbind(‘click’)
      }).end().find(‘.toTop’).on(‘click’, function (e) {//图层置顶
      e.stopPropagation();
      canvas.bringToFront(opation.target)
      $(this).parent().hide().children().unbind(‘click’)
      }).end().find(‘.toBottom’).on(‘click’, function (e) {//图层置底
      e.stopPropagation();
      canvas.sendToBack(opation.target)
      $(this).parent().hide().children().unbind(‘click’)
      }).end().find(‘.clone’).on(‘click’, function (e) {//克隆
      e.stopPropagation();

      $(this).parent().hide().children().unbind(‘click’)
      })
      }

      }
      })

      谢浪1年前 (2017-02-13)回复