fabric操作canvas绘图(1)共32节

时间：2024-11-11 10:55:38

对于前端而言，离不开canvas就像鱼离不开水，前端canvas神器fabric你值得拥有！接下来我们就来一步步揭开她的面纱。

一、fabric的理解

用原生的canvas来实现，代码量会比较大，而且还要处理很多细节，而Fabric就是解决这些问题。如果说有什么功能能让canvas在眼前一亮，那一定是它能够很好的支持*绘图！由于画布只是一个2D位图， Fabric为我们提供了一张纸：可以*绘画，而且非常自然。

只需将Fabric canvas的isDrawingMode属性设置为true即可实现*绘制模式。这样画布上的点击和移动就会被立刻解释为铅笔或刷子。

先安排一个vue中使用的例子：

<template>
  <div class="app">
    <canvas id="canvas" width="300" height="200"></canvas>
  </div>
</template>

<script>
import * as fabric from "fabric"
export default {
  mounted(){
    var canvas = new fabric.Canvas("canvas",{backgroundColor:"grey"});
    var rect = new fabric.Rect({
      left:100,
      top:100,
      fill:"red",
      width:20,
      height:20,
    });
    canvas.add(rect);
  }
}
</script>

效果如下图：

在Fabric中，我们对对象进行操作——实例化它们，更改其属性并将其添加到画布。这些对象是直接操作canvas的语法糖。

二、Fabric.js 基础对象

基础对象：

fabric.Rect 矩形
fabric.Circle 圆形
fabric.Triangle 三角形
fabric.Ellipse 椭圆
fabric.Line 线型
fabric.Polyline 折线
fabric.Polygon 多边形

方法：

add(object)  添加
remove(object) 移除
forEachObject 循环遍历
getObjects() 获取所有对象
item(int) 获取子项
isEmpty() 判断是否空画板
size() 画板元素个数
contains(object) 查询是否包含某个元素
fabric.util.drawDashedLine 绘制虚线
getWidth() setWidth()
getHeight()
clear() 清空
renderAll() 重绘
requestRenderAll() 请求重新渲染
rendercanvas() 重绘画板
getCenter().top/left 获取中心坐标
toDatalessJSON() 画板信息序列化成最小的json
toJSON() 画板信息序列化成json
moveTo(object,index) 移动
dispose() 释放
setCursor() 设置手势图标
getSelectionContext()获取选中的context
getSelectionElement()获取选中的元素
getActiveObject() 获取选中的对象

getActiveObjects() 获取选中的多个对象
discardActiveObject()取消当前选中对象
isType() 图片的类型
setColor(color) = canvas.set("full","");
rotate() 设置旋转角度
setCoords() 设置坐标
三、操作对象

我们更改某些鼠标交互时的对象属性（颜色，不透明度，大小，位置）。

Fabric和vue一样，数据驱动视图，我们只要变更对应对象的属性值，就可以驱动视图发生相应的变化。这些可供修改的属性，都与定位有关——left、top；尺寸——width、height；渲染——fill、opacity、stroke、strokeWidth；缩放和旋转——scaleX、scaleY、angle；甚至与翻转相关的内容——flipX、flipY和倾斜的skewX、skewY。

//读取
obj.get('属性名')
//设置
obj.set({属性名：属性值})
polygon.set("fill", "blue").set("stroke", "red");//将上文的多边形填充和边框颜色变更
//改变层级
下移：canvas.sendBackwards(canvas.getActiveObject());
上移：canvas.bringForward(canvas.getActiveObject());
置顶：canvas.bringToFront(canvas.getActiveObject());
置底：canvas.sendToBack(canvas.getActiveObject());


//自定义原型对象属性方法
fabric.Object.prototype.getWidth = function () {
      return this.get("width");
};
    //新建画布对象
    const canvas = new fabric.Canvas("canvas", {
      backgroundColor: "pink",
      selectionColor: "blue",
      selectionLineWidth: 2,
    });
    // 多边形
    const polygon = new fabric.Polygon(
      [
        {
          x: 100,
          y: 10,
        },
        {
          x: 250,
          y: 10,
        },
        {
          x: 250,
          y: 180,
        },
        {
          x: 150,
          y: 180,
        },
      ],
      {
        left: 100,
        top: 50,
        fill: "red",
        strokeWidth: 4,
        stroke: "green",
        perPixelTargetFind: true,
      }
    );
    canvas.add(polygon);
    console.log("获取宽度", polygon.getWidth());

// 图像对象 本地和网络图片

<template>
  <div id="app">
    <!-- 1、创建 canvas 元素 -->
    <canvas
      width="800"
      height="800"
      id="canvas"
      style="border: 1px solid #ccc"
    ></canvas>
    <img
      src="@/assets/imgs/ai1.jpeg"
      alt="picture"
      id="img"
      width="100"
      height="auto"
      @load="imageLoad"
    />
  </div>
</template>

<script>
//引入fabric
import * as fabric from "fabric";
export default {
  name: "App",
  components: {},
  mounted(){
  //   var canvas = new fabric.Canvas("canvas",{backgroundColor:"grey"});
  //   var rect = new fabric.Rect({
  //     left:100,
  //     top:100,
  //     fill:"red",
  //     width:20,
  //     height:20,
  //   });
  //   canvas.add(rect);//在画布对象上添加这个矩形
	// // 位移
  //   rect.set({left:20,top:50});//修改举行对象的位置属性
  //   canvas.renderAll()//修改完之后重新渲染
  },
  data() {
    return {};
  },
  methods: {
    imageLoad() {
      var canvas = new fabric.Canvas("canvas",{backgroundColor:"rgb(100,200,200)"});
      const imgElement = document.getElementById("img");
      const imgInstance = new fabric.Image(imgElement, {
        left: 100,
        top: 100,
        angle: 45,
        opacity: 0.6,
      });
      console.log(imgInstance);
      canvas.add(imgInstance);
    },
  },
};
</script>

<style scoped lang="scss"></style>

好，到这里我们对 Fabric 有了基本的了解，后面章节，我们进入实战，开发一个画板编辑器

相关文章