3. Fabric 基本使用

1. 画正方形

javascript 复制代码
  let canvas = new fabric.Canvas('canvas', { backgroundColor: 'grey' })
  // 画正方形
  let rect = new fabric.Rect({
    left: 100,
    top: 100,
    fill: 'red',
    width: 20,
    height: 20,
    angle: 45
  })

canvas.add(rect)

2. 画圆

javascript 复制代码
  let canvas = new fabric.Canvas('canvas', { backgroundColor: 'grey' })
  // 画圆
  let circle = new fabric.Circle({
    left: 100,
    top: 100,
    fill: 'green',
    width: 20,
    height: 20,
    radius: 20
  })

canvas.add(circle)

3. 画三角形

javascript 复制代码
  let canvas = new fabric.Canvas('canvas', { backgroundColor: 'grey' })
  // 画三角形
  let triangle = new fabric.Triangle({
    width: 20,
    height: 30,
    fill: 'blue',
    left: 50,
    top: 50
  })

canvas.add(triangle)

4. 画椭圆

javascript 复制代码
  let canvas = new fabric.Canvas('canvas', { backgroundColor: 'grey' })
  // 画椭圆
  let ellipse = new fabric.Ellipse({
    rx: 20,
    ry: 30,
    left: 200,
    top: 200,
    fill: '#87ceed'
  })

canvas.add(ellipse)

5. 画线

javascript 复制代码
  let canvas = new fabric.Canvas('canvas', { backgroundColor: 'grey' })
  // 画线
  let line = new fabric.Line([70, 100, 150, 200], {
    stroke: 'blue'
  })

canvas.add(line)

6. 画多边形

javascript 复制代码
  let canvas = new fabric.Canvas('canvas', { backgroundColor: 'grey' })
  // 画六边形
  let hexagon = new fabric.Polygon(
    [
      {
        x: 50,
        y: 0
      },
      {
        x: 25,
        y: 43.3
      },
      {
        x: -25,
        y: 43.301
      },
      {
        x: -50,
        y: 0
      },
      {
        x: -25,
        y: -43.301
      },
      {
        x: 25,
        y: -43.301
      }
    ],
    {
      stroke: 'red',
      left: 0,
      top: 0,
      strokeWidth: 2,
      strokeLineJoin: 'bevel'
    }
  )

canvas.add(hexagon)

7. 添加图片和过滤器

javascript 复制代码
  let canvas = new fabric.Canvas('canvas', { backgroundColor: 'grey' })
  // 添加图片
   let img = new Image()
   img.src = 'src/views/Fabric/1.jpg'
   img.addEventListener('load', () => {
     const imgInstance = new fabric.FabricImage(img, {
       // 设置图片位置和样子
       left: 0,
       top: 0,
       angle: 0 // 设置图形顺时针旋转角度
     })

     // 添加过滤器
     imgInstance.filters.push(new fabric.filters.Sepia())
     // 应用过滤器并在完成后重新渲染画布
     imgInstance.applyFilters()
     canvas.add(imgInstance) // 加入到canvas中
   })

canvas.add(img)

8. 添加文本和动画

javascript 复制代码
  let canvas = new fabric.Canvas('canvas', { backgroundColor: 'grey' })
    // 添加文本
  let text = new fabric.FabricText('hello world', { left: 100, top: 100 })
  canvas.add(text)

  let fn = (opt) => {
    console.log(opt)
  }
  text.on('mousedown', fn)

  text.animate(
    {
      left: 300,
      top: 200,
      fontSize: 48,
      fill: 'blue'
    },
    {
      duration: 2000, // 设置动画的持续时间为 2000 毫秒
      onChange: canvas.renderAll.bind(canvas), // 在动画过程中更新 canvas
      easing: fabric.util.ease.easeInQuad,
      onComplete: () => {
        console.log(1111)
      }
    }
  )

canvas.add(text)
相关推荐
前端小巷子3 分钟前
Web 实时通信:从短轮询到 WebSocket
前端·javascript·面试
神仙别闹6 分钟前
基于C#+SQL Server实现(Web)学生选课管理系统
前端·数据库·c#
web前端神器13 分钟前
指定阿里镜像原理
前端
枷锁—sha18 分钟前
【DVWA系列】——CSRF——Medium详细教程
android·服务器·前端·web安全·网络安全·csrf
枷锁—sha19 分钟前
跨站请求伪造漏洞(CSRF)详解
运维·服务器·前端·web安全·网络安全·csrf
群联云防护小杜35 分钟前
深度隐匿源IP:高防+群联AI云防护防绕过实战
运维·服务器·前端·网络·人工智能·网络协议·tcp/ip
DanB241 小时前
html复习
javascript·microsoft·html
汉得数字平台1 小时前
【鲲苍提效】全面洞察用户体验,助力打造高性能前端应用
前端·前端监控
花海如潮淹1 小时前
前端性能追踪工具:用户体验的毫秒战争
前端·笔记·ux
_丿丨丨_6 小时前
XSS(跨站脚本攻击)
前端·网络·xss