HTML5画布框架fabricjs学习笔记(一)——引入

前言

由于需要实现一个前端的画布编辑器,因此找到了一个老牌的前端开源画布框架——fabricjs,他的维护者们目前仍在高速迭代着,大约每个月会有一个Release。我在撰写这篇博文时,它的最新Release版本是4.6.0

作为首篇博文,我们的目标是引入并实现一个画布,然后学习在其中绘制所有的基础对象,最终效果图如下:
请添加图片描述


它能做什么?

以下是官方的介绍:

  • fabricjs 是一个框架,可以很容易地使用HTML5 canvas元素。 它是一个位于画布元素之上的交互式对象模型。 它也是一个svg到画布的解析器。
  • 使用Fabric.js,你可以在画布上创建和填充对象; 对象喜欢简单的几何形状——矩形、圆形、椭圆、多边形或由成百上千条简单路径组成的更复杂的形状。 然后你可以用鼠标缩放、移动和旋转这些对象; 修改它们的属性、颜色、透明度、z-index等。 你也可以一起操作这些对象——通过简单的鼠标选择将它们分组。

按照通俗的理解,fabricjs是一个前端画布框架,它支持:

  1. 在画布上绘制圆、三角、矩形、线条等常规图形
  2. 在画布中添加文本框、图片等
  3. 通过鼠标与画布中的图形对象进行交互
  4. 导入并渲染SVG图片
  5. 将画布的数据序列化为JSON字符串,并在需要的时候将其反序列化并渲染出来

安装与引入

安装

npm install fabric

引入到项目中

import {fabric} from "fabric";

初始化

初始化时需要我们先创建一个HTML5的canvas标签,它需要几个必要的属性:

  • id:用于通过唯一标识和定位该canvas标签
  • width:不同于style中的width,用于表示画布的宽度
  • height:不同于style中的height,用于表示画布的高度

代码

  • html
    添加一个id为canvas,宽度为300px,长度为200px的canvas标签
<canvas id="canvas" width="300px" height="200px"/>
  • css
    为画布添加上边框
  #canvas {
    border: 1px solid black;
  }
  • javaScript
    实例化fabric的canvas对象
// 传入的"canvas"即上文中的标签id
// 这个canvas对象就是本文的主角,通过它对画布进行各种操作
let canvas = new fabric.Canvas("canvas");

结果

初始画布


绘制基础图形

矩形(fabric.Rect)

为了举例,我们绘制一个矩形在画布上

代码

  let properties = {
      left: 20,  // 左上角顶点横坐标20px
	  top: 20,  // 左上角顶点纵坐标20px
	  fill: '#AFE164',  // 填充颜色为#AFE164
	  width: 60,  // 宽度为60px
	  height: 60,  // 高度为60px
	  objectCaching: false,  // 对象缓存设为false
	  stroke: 'transparent',  //边框线颜色为透明
	  strokeWidth: 1  //边框线宽度设为1px 
  };
  let rect = new fabric.Rect(properties);
	
  // 将矩形添加到画布上
  canvas.add(rect);

结果

于是我们在画布上得到了:
在这里插入图片描述

圆形(fabric.Circle)

代码

  let properties = {
      left: 80,  // 左上角顶点横坐标80px
      top: 80,  // 左上角顶点纵坐标80px
      fill: '#7DD2F0',  // 填充颜色为#7DD2F0
      radius: 30,  // 半径为30px
      objectCaching: false,  // 对象缓存设为false
      stroke: 'transparent',  //边框线颜色为透明
      strokeWidth: 1  //边框线宽度设为1px
  };
  let circle = new fabric.Circle(properties);
  canvas.add(circle);

结果

在这里插入图片描述

三角形(fabric.Triangle)

代码

  let properties = {
      left: 120,  // 左上角顶点横坐标120px
      top: 40,  // 左上角顶点纵坐标40px
      fill: '#B61234',  // 填充颜色为#B61234
      width: 50,
      height: 60,  // 半径为30px
      objectCaching: false,  // 对象缓存设为false
      stroke: 'transparent',  //边框线颜色为透明
      strokeWidth: 1  //边框线宽度设为1px
  };
  let triangle = new fabric.Triangle(properties);
  canvas.add(triangle);

结果

在这里插入图片描述

直线(fabric.Line)

代码

  let points = [140, 20, 240, 40];  // 两个点确定一条直线,[x1, y1, x2, y2]
  let properties = {
      strokeWidth: 4,  //线段宽度设为4px
      stroke: "#000000",  // 线段颜色为#000000
      objectCaching: false  // 对象缓存设为false
  };
  let line = new fabric.Line(points, properties);
  canvas.add(line);

结果

在这里插入图片描述

文本框

文本框有三种:基础静态文本框Text,可交互的单行文本框IText和可交互的多行文本框Textbox。关系上,IText继承了Text,Textbox又继承了IText。

  fabric.Text = fabric.util.createClass(fabric.Object, {...});
  fabric.IText = fabric.util.createClass(fabric.Text, fabric.Observable, {...});
  fabric.Textbox = fabric.util.createClass(fabric.IText, fabric.Observable, {...});

静态文本框(fabric.Text)

Text是静态的文本框,仅显示设定的文本,类似于一个Label,不可交互。
构造方法接受两个参数textoptions

    initialize: function(text, options) {...}
  • text:要显示的文本内容
  • option:初始的一些属性,如topleftstroke

代码

  let properties = {
       left: 180,  // 左上角顶点横坐标180px
       top: 100,  // 左上角顶点纵坐标100px
       strokeWidth: 1,  // 字体宽度1px
       fontSize: 24,  // 字体大小24px
       fill: "orange",  // 字体颜色为橘色
       objectCaching: false  // 对象缓存设为false
  };
  let text = new fabric.Text("Static Text", properties);
  canvas.add(text);

结果

在这里插入图片描述

可交互的单行文本框(fabric.IText)

IText是可交互的单行文本框,顾名思义,其有两个特点:

  1. 可交互,用户可通过双击使其变为编辑态,并可修改其中的文本内容,失去焦点时即退出编辑态。
  2. 单行,当其中的文本内容越来越多时,其宽度width会变得越来越大以适应不断增多的文字,不会换行,因此当文字过多时他会超出画布,超出话不得部分无法显示出来。

代码

	let properties = {
		left: 60,  // 左上角顶点横坐标60px
	    top: 160,  // 左上角顶点纵坐标140px
	    fontSize: 24,  // 字体大小24px
	    fill: "pink",  // 字体颜色为粉色
	    objectCaching: false  // 对象缓存设为false
	};
	let iText = new fabric.IText("Interactive one line Text", properties);
	canvas.add(iText);

结果

请添加图片描述

可交互的多行文本框(fabric.Textbox)

TextboxIText的区别是,前者可以固定宽度值width,当其中的文本内容越来越多时,其高度height会按需膨胀,即将超过宽度的文字自动流入下一行。

代码

	let properties = {
		left: 10,  // 左上角顶点横坐标10px
	    top: 140,  // 左上角顶点纵坐标140px
	    fontSize: 24,  // 字体大小24px
	    fill: "purple",  // 字体颜色为紫色
	    width: 210,  // 最大宽度为210px
	    objectCaching: false  // 对象缓存设为false
	};
	let textbox = new fabric.Textbox("Interactive multi-line Text", properties);
	canvas.add(textbox);

结果

可见,文本内容的总长度超过设定的210px时,fabric.Textbox会自动换行
请添加图片描述


总览

现在再来看看这一节中,我们的画布,和绘制出来的所有基础对象
请添加图片描述

本节完整代码见Codepen


系列博文

HTML5画布框架fabricjs学习笔记(一)——引入
HTML5画布框架fabricjs学习笔记(二)——图片与背景
HTML5画布框架fabricjs学习笔记(三)——自定义选择控制框样式

(以下博文创作中,敬请期待)
HTML5画布框架fabricjs学习笔记(四)——用户交互(上)


后记

开始学习使用fabricjs之后,由于作者是外国人,因此第一手的文档都是英文的。在这过程中通过自行翻译、理解,并对照等着代码和注释进行学习,对深入理解大神的代码颇有裨益。

从这篇博文开始,我会写一些使用该框架过程中的踩坑、爬坑经过,还有一些基于该框架的我自己实现的功能。

参与评论 您还未登录,请先 登录 后发表或查看评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:大白 设计师:CSDN官方博客 返回首页

打赏作者

IMplementist

你的鼓励,是我继续写文章的动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值