前端可视化：Fabric.js HTML5 canvas 工具库(1)

<canvas id="canvas"
  width="400" 
  height="400" 
  style="border: 1px solid #ccc;"
></canvas>

import { fabric } from 'fabric'
// 使用 fabric 接管容器 传入canvas的id
const canvas = new fabric.Canvas('canvas') 
// 创建一个长方形
const rect = new fabric.Rect({
  top: 30, // 距离容器顶部 30px
  left: 30, // 距离容器左侧 30px
  width: 100, // 宽 100px
  height: 60, // 高 60px
  fill: 'red' // 填充 红色
})
// 将矩形（rect）加入到canvas画布中
canvas.add(rect)

// 可交互的画布
const canvas = new fabric.Canvas('canvas')
// 不可交互的画布
const canvas = new fabric.StaticCanvas('canvas')

// 设定画布参数
const canvas = new fabric.Canvas('canvas', {
    width: 300, // 画布宽度
    height: 300, // 画布高度
    backgroundColor: '#eee', // 画布背景色
     // 元素对象被选中时保持原有层级
  preserveObjectStacking: true, // 默认false
  // 输出一个精简后的 JSON
  includeDefaultValues: false 
})

setBackgroundImage(image, callback, optionsopt) → {fabric.Canvas}

let imageUrl = 'http://fabricjs.com/assets/honey_im_subtle.png'
// 设置背景图
// 方法一：设置图片地址
canvas.setBackgroundImage(
    imageUrl, 
    canvas.renderAll.bind(canvas)
)
// 方法二：使用 fabric.Image.fromURL
fabric.Image.fromURL(imageUrl,
    (img) => {
       canvas.setBackgroundImage(
            img, 
            canvas.renderAll.bind(canvas)
        ) 
    }
)
// 旋转背景图
canvas.setBackgroundImage(
    imageUrl, 
    canvas.renderAll.bind(canvas),
    {
      angle: 15 
    }
)
// 拉伸背景图, 使图片充满全屏
canvas.setBackgroundImage(
    imageUrl,
    canvas.renderAll.bind(canvas),
    {
        scaleX: canvas.width / img.width, // 计算出图片要拉伸的宽度
        scaleY: canvas.height / img.height // 计算出图片要拉伸的高度
    }
)
// 重复背景图
canvas.setBackgroundColor(
    {
        source: imageUrl,
        repeat: 'repeat'
    }, 
  canvas.renderAll.bind(canvas)
)
// 设置覆盖图像的画布
// setOverlayImage(image, callback, optionsopt)
canvas.setOverlayImage(
    imageUrl,
    canvas.renderAll.bind(canvas)
)

const rect = new fabric.Rect({
    top: 100, // 距离容器顶部 100px
    left: 100, // 距离容器左侧 100px
    fill: 'orange', // 填充 橙色
    width: 100, // 宽度 100px
    height: 100 // 高度 100px
  })

const rect = new fabric.Rect({
    top: 100, // 距离容器顶部 100px
    left: 100, // 距离容器左侧 100px
    fill: 'orange', // 填充 橙色
    width: 100, // 宽度 100px
    height: 100, // 高度 100px
    rx: 20, // x轴的半径
    ry: 20 // y轴的半径
})

const circle = new fabric.Circle({
    top: 100,
    left: 100,
    radius: 50, // 圆的半径 50
    fill: 'green'
  })

const ellipse = new fabric.Ellipse({
    top: 20,
    left: 20,
    rx: 70,
    ry: 30,
    fill: 'hotpink'

const line = new fabric.Line(
    [
      10, 10, // 起始点坐标
      200, 300 // 结束点坐标
    ],
    {
      stroke: 'red', // 笔触颜色
    }
  )