fabricjs基础

妮呀

已于 2024-07-16 14:13:16 修改

阅读量722

点赞数 26

文章标签： fabric

于 2024-07-16 10:30:34 首次发布

本文链接：https://blog.csdn.net/lln0001/article/details/140455262

版权

初始化画布

<canvas id="fabric-canvas"></canvas>

 import { fabric } from "fabric";
 let canvas = new fabric.Canvas("fabric-canvas", {
    backgroundColor: '#FAFAFA',
    width: 500,
    height: 500,
    preserveObjectStacking: true,
    altSelectionKey: "altKey",
  });

基础知识

objects

公共属性

type

分类，可根据 canvas.getObjects(type) 获取所有的同type的objects

stroke

border色调

strokeWidth

border 的宽度

selection

是否可以选择

evented

是否可以事件响应

hasControls

是否有控制器

lockMovementX， lockMovementY

是否锁定x值、y值，锁定后，无法拖动

defaultCursor、hoverCursor

鼠标光标的样式
可选值【pointer、move、crosshair】

公共方法

object.on(event, callback)

event 值可选

click 当前object被点击时触发
mousedown【mousemove 、 mouseup 、 mouseover、mouseout】鼠标在操作按下【移动、释放、移动到上方、离开】时触发
mousedblclick 鼠标双击时触发
selected 当前object被选中时触发
deselected 当前object取消选择时触发
scaling 当前object正在被缩放
moving当前object正在被移动
rotating当前object正在被旋转

常用的object

fabric.Line 线段

添加一条从点（x1, y1）到点（x2， y2）的线段

let line = new fabric.Line([x1, y1, x2, y2], {
  type: "adsorption", //分类，可根据 canvas.getObjects(type) 获取所有的 同type的objects
  stroke: "#14C9C9",
  strokeWidth: 1,
  strokeUniform: true,
  selection: false,
})
canvas.add(line)

防止放大的时候，锯齿状渲染

new fabric.Line([x1, y1, x2, y2], {
  ...
  strokeUniform: true,
  objectCaching: false, // 禁用对象缓存以强制重新渲染  
  smoothing: 1, // 启用抗锯齿
})

fabric.Polygon 多边形

添加一个顶点为 [ {x: x1, y: y1}, {x: x2, y: y2}, {x: x3, y: y3}, {x: x4, y: y4}, {x: x5, y: y5}, ] 的五边形

 let polygon = new fabric.Polygon(
	[ {x: x1, y: y1}, {x: x2, y: y2}, {x: x3, y: y3}, {x: x4, y: y4}, {x: x5, y: y5}, ],
	{
		stroke: '#e6a23c',
		strokeWidth: 1,
		hasBorders: false,
		selectable: false,
		evented: false,
		controls: [],
		fill: 'transparent',
		lockMovementX: true,
		lockMovementY: true,
		objectCaching: false, // 禁用对象缓存以强制重新渲染  
		smoothing: 1, // 启用抗锯齿
	}
)
      canvas.add(polygon)

多边形绘图时，一般会有偏移量，所以一般需要校对一下

var boundingRect = polygon.getBoundingRect();
polygon.top = boundingRect.top + 0.5;
polygon.left = boundingRect.left + 0.5;

多边形可通过顶点拖拽改变形状

fabric.Rect 矩形

添加一个rect

    var rect = new fabric.Rect({
      left: 100,
      top: 50,
      fill: 'yellow',
      width: 200,
      height: 100,
      objectCaching: false,
      stroke: 'lightgreen',
      strokeWidth: 4,
    });

    canvas.add(rect);

circle 圆

添加一个圆

this.obj = new fabric.Circle({
      left: p.x,
      top: p.y,
      radius: 1,
      strokeWidth: 1,
      strokeUniform: true,
      stroke: 'rgba(204, 204, 204, 0.6)',
      fill: 'transparent',
      lineInstance: this,
      hasControls: false,
      hasBorders: false,
      selectable: false,
      controls: false,
      evented: false,
      originX:'center',
      originY: 'center',
      objectCaching: false, // 禁用对象缓存以强制重新渲染  
      smoothing: 1, // 启用抗锯齿
    })

常用属性

canvas.viewportTransform

画布的变换 [scaleX, skewY, skewX, scaleY, translateX, translateY]
– scaleX、scaleY 缩放
– skewY、 skewX 画布在水平和垂直方向上的倾斜角度
– skewY、translateY 平移
可直接赋值更改，也可通过 setViewportTransform

canvas.viewportTransform = [1, 0, 0, 1, 100, 200];
canvas.setViewportTransform([1, 0, 0, 1, 100, 200]);

常用方法

canvas.add(object)

添加并渲染object

canvas.remove(object)

删除object

canvas.getObjects(type)

当type为空时，获取所有的objects
当type有值时，获取有设置相对应type的objects

let circle1 = new fabric.Circle({
  type: 'circle1',
  ...
 })
canvas.add(circle1 )

let circle2 = new fabric.Circle({
  type: 'circle2',
  ...
 })
canvas.add(circle2 )
canvas.getObjects('circle1');// [circle1 ]
canvas.getObjects();// [circle1,  circle2]

canvas.zoomToPoint(zoom, point)

以某一个中心点进行缩放
zoom Number 缩放大小
point Object {x, y} 中心点

canvas.relativePan(point)

画布向x轴偏移movementX，y轴偏移movementY

const point = new fabric.Point(movementX, movementY)
canvas.relativePan(point);

canvas.requestRenderAll、canvas.renderAll

canvas.requestRenderAll 异步渲染，可避免短时间内重复绘制画布
canvas.renderAll 同步渲染

canvas.setActiveObject、canvas.discardActiveObject

设置或取消当前active的object

canvas.restorePointerVpt(pointer)

根据视口坐标，返回画布指针坐标
当鼠标悬浮在画布上方，我们监听画布DOM的事件，此时获取的就是pointer，通过 canvas.restorePointerVpt 获取到不受放大、缩小、偏移等影响的实际画布坐标。

canvas.on(event, callback)

event 值可选

mouse:down【mouse:move 、 mouse:up 、 mouse:over、mouse:out】鼠标在操作按下【移动、释放、移动到上方、离开】时触发
mouse:dblclick 鼠标双击时触发
object:scaling 当object正在被缩放
object:moving当object正在被移动
object:rotating当object正在被旋转