vue2+Fabric.js库的使用（5）--Fabric的画板项目搭建1

最新推荐文章于 2024-06-03 11:31:46 发布
最新推荐文章于 2024-06-03 11:31:46 发布
阅读量2.1k 收藏 33
点赞数 35
文章标签： fabric javascript 运维 vue.js canva可画
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/M_lucklu/article/details/135402404
版权

文章目录

前言

本篇文章会开始进行图形的自由绘制，第二篇文章是绘制固定的图形，现在是在此基础上，进行自由的绘制，也是项目的开始阶段

提示：以下是本篇文章正文内容，下面案例可供参考

一、自由绘制原理说明

自由绘制图形需要先选中要绘制的图形，然后在画布中监听鼠标，根据鼠标去绘制选择的图形。其中需要分为两类：

一类是矩形、线段、三角形、圆形等。这类图形只需要监听鼠标按下的地方，然后鼠标松开的地方，即可进行绘制。

一类是连续的折线，这类图形需要监听鼠标按下的每个地方，然后鼠标双击或者鼠标右键的地方为终点，进行绘制。

下面会分别进行绘制

二、自由绘制图形

1.框架搭建

1.1首先把基础框架搭建出来
我采用了element-ui这个UI库进行界面搭建，可直接安装，并引入

安装：

npm i element-ui -S

在main.js中引入：

import Vue from 'vue'
import App from './App.vue'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.config.productionTip = false
Vue.use(ElementUI)

new Vue({
  render: h => h(App),
}).$mount('#app')

因为是演示，我这里采用的是全局引入的方式

1.2然后把绘制的框架搭建起来
操作栏：

    <!-- 操作栏 -->
    <el-radio-group v-model="clickMenubarName" size="mini">
      <el-radio border v-for="item in menubarFun" :key="item.id" @click="clickEvent(item.name)" :title="item.name" :label='item.name'>{{item.title}}</el-radio>
    </el-radio-group>

通过循环渲染：

      menubarFun: [
        {
          id: 1,
          name: 'select',
          title: '选择', //提示
        },
        {
          id: 2,
          name: 'drawing',
          title: '自由绘画',
        },
        {
          id: 3,
          name: 'line',
          title: '直线',
        },
        {
          id: 4,
          name: 'dotted',
          title: '虚线',
        },
        {
          id: 11,
          name: 'arrow',
          title: '箭头',
        },
        {
          id:9,
          name:'broken',
          title:'折线',
        },
        {
          id: 5,
          name: 'rect',
          title: '矩形',
        },
        {
          id: 6,
          name: 'circle',
          title: '圆形',
        },
        {
          id: 7,
          name: 'ellipse',
          title: '椭圆形',
        },
        {
          id: 8,
          name: 'triangle',
          title: '三角形',
        },
        {
          id: 10,
          name: 'text',
          title: '文本',
        }
      ],

效果如下：
在这里插入图片描述
1.3当选择不同的图形之后，就可以执行不同的绘制操作
需要定义菜单的点击事件：

      //菜单栏按钮点击事件
      clickEvent(value) {
      this.clickMenubarName = value
      if (value == 'select') {
        this.canvasObj.skipTargetFind = false // 允许选中
        this.canvasObj.isDrawingMode = false //关闭自由绘画
      } else if (value == 'drawing') {
        this.canvasObj.selection = false // 去除框选
        this.canvasObj.skipTargetFind = true // 不允许选中
        this.canvasObj.isDrawingMode = true //开启自由绘画
      } else {
        this.canvasObj.selection = false  // 去除框选
        this.canvasObj.skipTargetFind = true  // 不允许选中
        this.canvasObj.isDrawingMode = false  //关闭自由绘画
      }
    },

定义三类：

  • 点击选择按钮：不进行绘制
  • 点击自由绘制：可以在画布中进行自由的绘制
  • 点击其它的图形：可以进行图形绘制

效果如下：
在这里插入图片描述

1.4监听鼠标的事件，进行不同图形的绘制

      //创建图形
      drawing() {
        switch (this.clickMenubarName) {
          case 'rect':  //绘制矩形
            break
          case 'ellipse':   //绘制椭圆形
            break
          case 'line':    //绘制直线
            break
          case 'dotted':   //绘制虚线
            break
          case 'circle':   //绘制圆形
            break
          case 'triangle':   //绘制三角形
            break
          case 'broken':      //绘制折线
            break;
          case 'arrow':   //绘制箭头
            break
          case 'text':   //绘制文本
            break
        }
      },

1.5图形绘制的步骤
除了折线和文本外，其它基础图形的绘制步骤都是一样的，如下：

  1. 鼠标选中图形
  2. 鼠标在画布中按下，按下的时候记住按下的坐标
  3. 鼠标按下在画布中移动，每次移动需要重新获取坐标点，并且重新绘制当前的图形
  4. 当鼠标松开的时候，记住松开的时候的坐标，根据按下时的坐标和结束时的坐标进行图形绘制
  5. 然后把绘制好的图形放在栈中存储

折线和文本的稍微复杂一点，后面介绍

下面先以矩形的绘制进行说明，后续的其他图形的框架类似，只是图形绘制的方法不一样

1.绘制矩形

按照上述的步骤进行绘制
1.鼠标选中图形
2.鼠标在画布中按下
按下之后，记住按下的坐标，同时调用绘制图形的方法，进行图形绘制

        //鼠标按下
        'mouse:down': opt => {
          this.downPoint = opt.absolutePointer //记录下鼠标按下时的坐标
          this.drawing()  //绘制图形
        },

绘制图形的方法如下：

      //创建图形
      drawing() {
        switch (this.clickMenubarName) {
          case 'rect':  //绘制矩形
            this.patternClass = new fabric.Rect({
              top: this.downPoint.y, //创建对象的坐标
              left: this.downPoint.x,
              width: 0, //宽和高
              height: 0,
              fill: 'transparent', //填充颜色
              stroke: this.borderColor, //线条颜色
              strokeWidth: this.borderWidth //线条宽度
            })
            this.canvas.add(this.patternClass)
            break
          case 'ellipse':   //绘制椭圆形
            break
          case 'line':    //绘制直线
            break
          case 'dotted':   //绘制虚线
            break
          case 'circle':   //绘制圆形
            break
          case 'triangle':   //绘制三角形
            break
          case 'broken':      //绘制折线
            break;
          case 'arrow':   //绘制箭头
            break
          case 'text':   //绘制文本
            break
        }
      },

3.鼠标在画布中移动
鼠标在移动的时候，需要不断获取鼠标的坐标，并且不断的重新绘制图形

        //鼠标移动
        'mouse:move': opt => {
          this.patternFun(opt)  //重绘图形
        },

重绘图形的方法如下：

      //重新绘制图形
      patternFun(e) {    
      if (this.patternClass) {
        switch (this.clickMenubarName) {
          case 'rect':
            let rectW = Math.abs(this.downPoint.x - e.absolutePointer.x)
            let rectH = Math.abs(this.downPoint.y - e.absolutePointer.y)
            // 设置尺寸和所在位置
            this.patternClass.set('width', rectW)
            this.patternClass.set('height', rectH)
            this.patternClass.set('top', Math.min(e.absolutePointer.y, this.downPoint.y))
            this.patternClass.set('left', Math.min(e.absolutePointer.x, this.downPoint.x))
            // 刷新一下画布
            this.canvas.requestRenderAll()
            break
          case 'ellipse':
            break
          case 'line':
            break
          case 'arrow':
            break
          case 'dotted':
            break
          case 'circle':
            break
          case 'triangle':
            break
          case 'broken':
            break
        }
      }
    },

4.当鼠标松开的时候
鼠标松开之后，过滤掉一些杂的图形（即开始点和结束点一样的图形），然后把绘制好的图形放在栈中存储

        //鼠标抬起
        'mouse:up': opt => {
          if(this.clickMenubarName != 'broken'){
            if (JSON.stringify(this.downPoint) === JSON.stringify(opt.absolutePointer)) {
            this.canvas.remove(this.patternClass)
          } else {
            //将当前对象压入栈中
            this.backStack.push(this.patternClass)
          }
          //将创建的对象置空
          this.patternClass = null
          }
        },

这样，矩形的自由绘制就完成了，其中backStack里面会存储所有绘制的图形对象，看下效果：
在这里插入图片描述
完整代码：

<template>
  <div class="hello">
    <!-- 操作栏 -->
    <el-radio-group v-model="clickMenubarName"  @change="clickEvent" size="mini">
      <el-radio border v-for="item in menubarFun" :key="item.id" :title="item.name" :label='item.name'>{{item.title}}</el-radio>
    </el-radio-group>
    
    <br>

    <!-- 画布元素 -->
    <canvas width="1200" height="500" id="canvas-box" style="border: 1px solid #ccc;"></canvas>    
  </div>
</template>

<script>

import { fabric } from 'fabric'

export default {
  name: 'HelloWorld',
  data() {
    return {
      menubarFun: [
        {
          id: 1,
          name: 'select',
          title: '选择', //提示
        },
        {
          id: 2,
          name: 'drawing',
          title: '自由绘画',
        },
        {
          id: 3,
          name: 'line',
          title: '直线',
        },
        {
          id: 4,
          name: 'dotted',
          title: '虚线',
        },
        {
          id: 11,
          name: 'arrow',
          title: '箭头',
        },
        {
          id:9,
          name:'broken',
          title:'折线',
        },
        {
          id: 5,
          name: 'rect',
          title: '矩形',
        },
        {
          id: 6,
          name: 'circle',
          title: '圆形',
        },
        {
          id: 7,
          name: 'ellipse',
          title: '椭圆形',
        },
        {
          id: 8,
          name: 'triangle',
          title: '三角形',
        },
        {
          id: 10,
          name: 'text',
          title: '文本',
        }
      ],
      clickMenubarName: 'select', //当前点击的name
      downPoint: {}, //鼠标按下的点位置
      borderWidth: 4, //所有图形边框的宽度
      borderColor: '#000000', //所有图形边框的颜色
      backStack: [], //所有的绘画对象栈
      patternClass: null, //鼠标按下绘制的对象
    }
  },

  mounted(){
    this.init()
  },

  methods:{
    init(){
      this.canvas = new fabric.Canvas('canvas-box') // 这里传入的是canvas的id

      this.canvas.on({
        //鼠标按下
        'mouse:down': opt => {
          this.downPoint = opt.absolutePointer //记录下鼠标按下时的坐标
          this.drawing()  //绘制图形
        },

        //鼠标移动
        'mouse:move': opt => {
          this.patternFun(opt)  //重绘图形
        },

        //鼠标抬起
        'mouse:up': opt => {
          if(this.clickMenubarName != 'broken'){
            if (JSON.stringify(this.downPoint) === JSON.stringify(opt.absolutePointer)) {
            this.canvas.remove(this.patternClass)
          } else {
            //将当前对象压入栈中
            this.backStack.push(this.patternClass)
          }
          //将创建的对象置空
          this.patternClass = null
          }
        },

      })
    },

      //创建图形
      drawing() {
        switch (this.clickMenubarName) {
          case 'rect':  //绘制矩形
            this.patternClass = new fabric.Rect({
              top: this.downPoint.y, //创建对象的坐标
              left: this.downPoint.x,
              width: 0, //宽和高
              height: 0,
              fill: 'transparent', //填充颜色
              stroke: this.borderColor, //线条颜色
              strokeWidth: this.borderWidth //线条宽度
            })
            this.canvas.add(this.patternClass)
            break
          case 'ellipse':   //绘制椭圆形
            break
          case 'line':    //绘制直线
            break
          case 'dotted':   //绘制虚线
            break
          case 'circle':   //绘制圆形
            break
          case 'triangle':   //绘制三角形
            break
          case 'broken':      //绘制折线
            break;
          case 'arrow':   //绘制箭头
            break
          case 'text':   //绘制文本
            break
        }
      },

      //重新绘制图形
      patternFun(e) {    
      if (this.patternClass) {
        switch (this.clickMenubarName) {
          case 'rect':
            let rectW = Math.abs(this.downPoint.x - e.absolutePointer.x)
            let rectH = Math.abs(this.downPoint.y - e.absolutePointer.y)
            // 设置尺寸和所在位置
            this.patternClass.set('width', rectW)
            this.patternClass.set('height', rectH)
            this.patternClass.set('top', Math.min(e.absolutePointer.y, this.downPoint.y))
            this.patternClass.set('left', Math.min(e.absolutePointer.x, this.downPoint.x))
            // 刷新一下画布
            this.canvas.requestRenderAll()
            break
          case 'ellipse':
            break
          case 'line':
            break
          case 'arrow':
            break
          case 'dotted':
            break
          case 'circle':
            break
          case 'triangle':
            break
          case 'broken':
            break
        }
      }
    },

      //菜单栏按钮点击事件
      clickEvent(value) {
        console.log(value)
        this.clickMenubarName = value
        if (value == 'select') {
          this.canvas.skipTargetFind = false // 允许选中
          this.canvas.isDrawingMode = false //关闭自由绘画
        } else if (value == 'drawing') {
          this.canvas.selection = false // 去除框选
          this.canvas.skipTargetFind = true // 不允许选中
          this.canvas.isDrawingMode = true //开启自由绘画
        } else {
          this.canvas.selection = false  // 去除框选
          this.canvas.skipTargetFind = true  // 不允许选中
          this.canvas.isDrawingMode = false  //关闭自由绘画
        }
      },
  },
}
</script>

<style scoped lang="less">
.hello{
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction:column ;
  justify-content:center;
  align-items:center;
}

/deep/.el-radio{
  margin: 0;
}
</style>

后续的基础图形绘制的框架都是这个框架，即鼠标按下调用绘制的方法，鼠标移动就重新绘制图形，鼠标松开之后把绘制的图形存入栈中（把图形存入栈中的目的是为了序列化和反序列化，即重新加载渲染或者导出），不同的是绘制方法不一样，然后重新绘制的方法不一样

3.绘制直线

绘制方法：

          case 'line':    //绘制直线
            this.patternClass = new fabric.Line(
              [
                this.downPoint.x, //直线的开始坐标
                this.downPoint.y,
                this.downPoint.x, //直线的结束坐标
                this.downPoint.y
              ],
              {
                fill: 'transparent',
                stroke: this.borderColor,
                strokeWidth: this.borderWidth
              }
            )
            this.canvas.add(this.patternClass)
            break

重新渲染方法：

          case 'line':
            this.patternClass.set('x2', this.downPoint.x)
            this.patternClass.set('y2', this.downPoint.y)
            let newX = e.absolutePointer.x  
            let newY = e.absolutePointer.y
            this.patternClass.set({ x1: newX, y1: newY });  
            this.canvas.requestRenderAll()
            break

4.绘制虚线

绘制方法：

          case 'dotted':   //绘制虚线
            this.patternClass = new fabric.Line(
              [
                this.downPoint.x, //虚线的开始坐标
                this.downPoint.y,
                this.downPoint.x, //第二个结束的坐标
                this.downPoint.y
              ],
              {
                fill: 'transparent',
                strokeDashArray: [10, 3], //设置为虚线，第一个值是实线的长度，第二个是虚线的长度
                stroke: this.borderColor,
                strokeWidth: this.borderWidth
              }
            )
            this.canvas.add(this.patternClass)
            break

重新渲染方法：

          case 'dotted':
            this.patternClass.set('x2', this.downPoint.x)
            this.patternClass.set('y2', this.downPoint.y)
            let new1X = e.absolutePointer.x  
            let new1Y = e.absolutePointer.y
            this.patternClass.set({ x1: new1X, y1: new1Y });  
            this.canvas.requestRenderAll()
            break

5.绘制箭头

绘制方法：

          case 'arrow':   //绘制箭头
            let path = this.changePath(this.downPoint.x, this.downPoint.y, this.downPoint.x, this.downPoint.y, 17.5, 17.5)
            this.patternClass = new fabric.Path(path, {
              stroke: this.borderColor,
              fill: 'transparent',
              strokeWidth: this.borderWidth
            })
            this.canvas.add(this.patternClass)
            break

重新渲染方法：

          case 'arrow':
            //先移除当前的图形，在重新生成新的
            this.canvas.remove(this.patternClass)
            let path = this.changePath(this.downPoint.x, this.downPoint.y, e.absolutePointer.x, e.absolutePointer.y, 17.5, 17.5)
            this.patternClass = new fabric.Path(path, {
              stroke: this.borderColor,
              fill: 'transparent',
              strokeWidth: this.borderWidth
            })
            this.canvas.add(this.patternClass)
            this.canvas.requestRenderAll()
            break

箭头这里还需要一个方法，即获取箭头的路径的方法——changePath（）。这个方法如下：

      //返回绘制箭头的路径值
      changePath(fromX, fromY, toX, toY, theta, headlen) {
        theta = typeof theta != 'undefined' ? theta : 30
        headlen = typeof theta != 'undefined' ? headlen : 10
        // 计算各角度和对应的P2,P3坐标
        let angle = (Math.atan2(fromY - toY, fromX - toX) * 180) / Math.PI,
          angle1 = ((angle + theta) * Math.PI) / 180,
          angle2 = ((angle - theta) * Math.PI) / 180,
          topX = headlen * Math.cos(angle1),
          topY = headlen * Math.sin(angle1),
          botX = headlen * Math.cos(angle2),
          botY = headlen * Math.sin(angle2)
        let arrowX = fromX - topX,
          arrowY = fromY - topY
        let path = ' M ' + fromX + ' ' + fromY
        path += ' L ' + toX + ' ' + toY
        arrowX = toX + topX
        arrowY = toY + topY
        path += ' M ' + arrowX + ' ' + arrowY
        path += ' L ' + toX + ' ' + toY
        arrowX = toX + botX
        arrowY = toY + botY
        path += ' L ' + arrowX + ' ' + arrowY
        return path
      },

6.绘制圆形

绘制方法：

          case 'circle':   //绘制圆形
            this.patternClass = new fabric.Circle({
              top: this.downPoint.y,
              left: this.downPoint.x,
              radius: 0, // 圆的半径
              fill: 'transparent',
              stroke: this.borderColor,
              strokeWidth: this.borderWidth
            })
            this.canvas.add(this.patternClass)
            break

重新渲染方法：

          case 'circle':
            let circleX = Math.abs(this.downPoint.x - e.absolutePointer.x) / 2
            let circleY = Math.abs(this.downPoint.y - e.absolutePointer.y) / 2
            let circleTop = e.absolutePointer.y > this.downPoint.y ? this.downPoint.y : this.downPoint.y - circleY * 2
            let circleLeft = e.absolutePointer.x > this.downPoint.x ? this.downPoint.x : this.downPoint.x - circleX * 2
            this.patternClass.set('radius', Math.max(circleX, circleY))
            this.patternClass.set('top', circleTop)
            this.patternClass.set('left', circleLeft)
            this.canvas.requestRenderAll()
            break

7.绘制椭圆

绘制方法：

          case 'ellipse':   //绘制椭圆形
            this.patternClass = new fabric.Ellipse({
              top: this.downPoint.y,
              left: this.downPoint.x,
              rx: 0, //椭圆的两个中心点
              ry: 0,
              fill: 'transparent',
              stroke: this.borderColor,
              strokeWidth: this.borderWidth
            })
            this.canvas.add(this.patternClass)
            break

重新渲染方法：

          case 'ellipse':
            let rx = Math.abs(this.downPoint.x - e.absolutePointer.x) / 2
            let ry = Math.abs(this.downPoint.y - e.absolutePointer.y) / 2
            let top = e.absolutePointer.y > this.downPoint.y ? this.downPoint.y : this.downPoint.y - ry * 2
            let left = e.absolutePointer.x > this.downPoint.x ? this.downPoint.x : this.downPoint.x - rx * 2
            // 设置椭圆尺寸和所在位置
            this.patternClass.set('rx', rx)
            this.patternClass.set('ry', ry)
            this.patternClass.set('top', top)
            this.patternClass.set('left', left)
            this.canvas.requestRenderAll()
            break

8.绘制三角形

绘制方法：

          case 'triangle':   //绘制三角形
            this.patternClass = new fabric.Triangle({
              left: this.downPoint.x,
              top: this.downPoint.y,
              width: 0, //三角形底边的宽度
              height: 0, //底边到顶部角的高度
              fill: 'transparent',
              stroke: this.borderColor,
              strokeWidth: this.borderWidth
            })
            this.canvas.add(this.patternClass)
            break

重新渲染方法：

          case 'triangle':
            let triangleHeight = Math.abs(e.absolutePointer.y - this.downPoint.y)
            this.patternClass.set('width', Math.sqrt(Math.pow(triangleHeight, 2) + Math.pow(triangleHeight / 2.0, 2)))
            this.patternClass.set('height', triangleHeight)
            this.patternClass.set('top', Math.min(e.absolutePointer.y, this.downPoint.y))
            this.patternClass.set('left', Math.min(e.absolutePointer.x, this.downPoint.x))
            this.canvas.requestRenderAll()
            break

完整代码

完整代码如下（示例）：

<template>
  <div class="hello">
    <!-- 操作栏 -->
    <el-radio-group v-model="clickMenubarName"  @change="clickEvent" size="mini">
      <el-radio border v-for="item in menubarFun" :key="item.id" :title="item.name" :label='item.name'>{{item.title}}</el-radio>
    </el-radio-group>
    
    <br>

    <!-- 画布元素 -->
    <canvas width="1200" height="500" id="canvas-box" style="border: 1px solid #ccc;"></canvas>    
  </div>
</template>

<script>

import { fabric } from 'fabric'

export default {
  name: 'HelloWorld',
  data() {
    return {
      menubarFun: [
        {
          id: 1,
          name: 'select',
          title: '选择', //提示
        },
        {
          id: 2,
          name: 'drawing',
          title: '自由绘画',
        },
        {
          id: 3,
          name: 'line',
          title: '直线',
        },
        {
          id: 4,
          name: 'dotted',
          title: '虚线',
        },
        {
          id: 11,
          name: 'arrow',
          title: '箭头',
        },
        {
          id:9,
          name:'broken',
          title:'折线',
        },
        {
          id: 5,
          name: 'rect',
          title: '矩形',
        },
        {
          id: 6,
          name: 'circle',
          title: '圆形',
        },
        {
          id: 7,
          name: 'ellipse',
          title: '椭圆形',
        },
        {
          id: 8,
          name: 'triangle',
          title: '三角形',
        },
        {
          id: 10,
          name: 'text',
          title: '文本',
        }
      ],
      clickMenubarName: 'select', //当前点击的name
      downPoint: {}, //鼠标按下的点位置
      borderWidth: 4, //所有图形边框的宽度
      borderColor: '#000000', //所有图形边框的颜色
      backStack: [], //所有的绘画对象栈
      patternClass: null, //鼠标按下绘制的对象
    }
  },

  mounted(){
    this.init()
  },

  methods:{
    init(){
      this.canvas = new fabric.Canvas('canvas-box',{
        targetFindTolerance: 10, //当元素以实际内容选择时，这个值越大越表面容易被选择到
        perPixelTargetFind: true // 选择绘画对象时，以对象实际内容选择，而不是所处边界
      }) // 这里传入的是canvas的id

      this.canvas.on({
        //鼠标按下
        'mouse:down': opt => {
          this.downPoint = opt.absolutePointer //记录下鼠标按下时的坐标
          this.drawing()  //绘制图形
        },

        //鼠标移动
        'mouse:move': opt => {
          this.patternFun(opt)  //重绘图形
        },

        //鼠标抬起
        'mouse:up': opt => {
          if(this.clickMenubarName != 'broken'){
            if (JSON.stringify(this.downPoint) === JSON.stringify(opt.absolutePointer)) {
            this.canvas.remove(this.patternClass)
          } else {
            //将当前对象压入栈中
            this.backStack.push(this.patternClass)
          }
          //将创建的对象置空
          this.patternClass = null
          }
        },

      })
    },

      //创建图形
      drawing() {
        switch (this.clickMenubarName) {
          case 'rect':  //绘制矩形
            this.patternClass = new fabric.Rect({
              top: this.downPoint.y, //创建对象的坐标
              left: this.downPoint.x,
              width: 0, //宽和高
              height: 0,
              fill: 'transparent', //填充颜色
              stroke: this.borderColor, //线条颜色
              strokeWidth: this.borderWidth //线条宽度
            })
            this.canvas.add(this.patternClass)
            break
          case 'ellipse':   //绘制椭圆形
            this.patternClass = new fabric.Ellipse({
              top: this.downPoint.y,
              left: this.downPoint.x,
              rx: 0, //椭圆的两个中心点
              ry: 0,
              fill: 'transparent',
              stroke: this.borderColor,
              strokeWidth: this.borderWidth
            })
            this.canvas.add(this.patternClass)
            break
          case 'line':    //绘制直线
            this.patternClass = new fabric.Line(
              [
                this.downPoint.x, //直线的开始坐标
                this.downPoint.y,
                this.downPoint.x, //直线的结束坐标
                this.downPoint.y
              ],
              {
                fill: 'transparent',
                stroke: this.borderColor,
                strokeWidth: this.borderWidth
              }
            )
            this.canvas.add(this.patternClass)
            break
          case 'dotted':   //绘制虚线
            this.patternClass = new fabric.Line(
              [
                this.downPoint.x, //虚线的开始坐标
                this.downPoint.y,
                this.downPoint.x, //第二个结束的坐标
                this.downPoint.y
              ],
              {
                fill: 'transparent',
                strokeDashArray: [10, 3], //设置为虚线，第一个值是实线的长度，第二个是虚线的长度
                stroke: this.borderColor,
                strokeWidth: this.borderWidth
              }
            )
            this.canvas.add(this.patternClass)
            break
          case 'circle':   //绘制圆形
            this.patternClass = new fabric.Circle({
              top: this.downPoint.y,
              left: this.downPoint.x,
              radius: 0, // 圆的半径
              fill: 'transparent',
              stroke: this.borderColor,
              strokeWidth: this.borderWidth
            })
            this.canvas.add(this.patternClass)
            break
          case 'triangle':   //绘制三角形
            this.patternClass = new fabric.Triangle({
              left: this.downPoint.x,
              top: this.downPoint.y,
              width: 0, //三角形底边的宽度
              height: 0, //底边到顶部角的高度
              fill: 'transparent',
              stroke: this.borderColor,
              strokeWidth: this.borderWidth
            })
            this.canvas.add(this.patternClass)
            break
          case 'broken':      //绘制折线
            break;
          case 'arrow':   //绘制箭头
            let path = this.changePath(this.downPoint.x, this.downPoint.y, this.downPoint.x, this.downPoint.y, 17.5, 17.5)
            this.patternClass = new fabric.Path(path, {
              stroke: this.borderColor,
              fill: 'transparent',
              strokeWidth: this.borderWidth
            })
            this.canvas.add(this.patternClass)
            break
          case 'text':   //绘制文本
            break
        }
      },

      //重新绘制图形
      patternFun(e) {    
      if (this.patternClass) {
        switch (this.clickMenubarName) {
          case 'rect':
            let rectW = Math.abs(this.downPoint.x - e.absolutePointer.x)
            let rectH = Math.abs(this.downPoint.y - e.absolutePointer.y)
            // 设置尺寸和所在位置
            this.patternClass.set('width', rectW)
            this.patternClass.set('height', rectH)
            this.patternClass.set('top', Math.min(e.absolutePointer.y, this.downPoint.y))
            this.patternClass.set('left', Math.min(e.absolutePointer.x, this.downPoint.x))
            // 刷新一下画布
            this.canvas.requestRenderAll()
            break
          case 'ellipse':
            let rx = Math.abs(this.downPoint.x - e.absolutePointer.x) / 2
            let ry = Math.abs(this.downPoint.y - e.absolutePointer.y) / 2
            let top = e.absolutePointer.y > this.downPoint.y ? this.downPoint.y : this.downPoint.y - ry * 2
            let left = e.absolutePointer.x > this.downPoint.x ? this.downPoint.x : this.downPoint.x - rx * 2
            // 设置椭圆尺寸和所在位置
            this.patternClass.set('rx', rx)
            this.patternClass.set('ry', ry)
            this.patternClass.set('top', top)
            this.patternClass.set('left', left)
            this.canvas.requestRenderAll()
            break
          case 'line':
            this.patternClass.set('x2', this.downPoint.x)
            this.patternClass.set('y2', this.downPoint.y)
            let newX = e.absolutePointer.x  
            let newY = e.absolutePointer.y
            this.patternClass.set({ x1: newX, y1: newY });  
            this.canvas.requestRenderAll()
            break
          case 'arrow':
            //先移除当前的图形，在重新生成新的
            this.canvas.remove(this.patternClass)
            let path = this.changePath(this.downPoint.x, this.downPoint.y, e.absolutePointer.x, e.absolutePointer.y, 17.5, 17.5)
            this.patternClass = new fabric.Path(path, {
              stroke: this.borderColor,
              fill: 'transparent',
              strokeWidth: this.borderWidth
            })
            this.canvas.add(this.patternClass)
            this.canvas.requestRenderAll()
            break
          case 'dotted':
            this.patternClass.set('x2', this.downPoint.x)
            this.patternClass.set('y2', this.downPoint.y)
            let new1X = e.absolutePointer.x  
            let new1Y = e.absolutePointer.y
            this.patternClass.set({ x1: new1X, y1: new1Y });  
            this.canvas.requestRenderAll()
            break
          case 'circle':
            let circleX = Math.abs(this.downPoint.x - e.absolutePointer.x) / 2
            let circleY = Math.abs(this.downPoint.y - e.absolutePointer.y) / 2
            let circleTop = e.absolutePointer.y > this.downPoint.y ? this.downPoint.y : this.downPoint.y - circleY * 2
            let circleLeft = e.absolutePointer.x > this.downPoint.x ? this.downPoint.x : this.downPoint.x - circleX * 2
            this.patternClass.set('radius', Math.max(circleX, circleY))
            this.patternClass.set('top', circleTop)
            this.patternClass.set('left', circleLeft)
            this.canvas.requestRenderAll()
            break
          case 'triangle':
            let triangleHeight = Math.abs(e.absolutePointer.y - this.downPoint.y)
            this.patternClass.set('width', Math.sqrt(Math.pow(triangleHeight, 2) + Math.pow(triangleHeight / 2.0, 2)))
            this.patternClass.set('height', triangleHeight)
            this.patternClass.set('top', Math.min(e.absolutePointer.y, this.downPoint.y))
            this.patternClass.set('left', Math.min(e.absolutePointer.x, this.downPoint.x))
            this.canvas.requestRenderAll()
            break
          case 'broken':
            break
        }
      }
    },

      //返回绘制箭头的路径值
      changePath(fromX, fromY, toX, toY, theta, headlen) {
        theta = typeof theta != 'undefined' ? theta : 30
        headlen = typeof theta != 'undefined' ? headlen : 10
        // 计算各角度和对应的P2,P3坐标
        let angle = (Math.atan2(fromY - toY, fromX - toX) * 180) / Math.PI,
          angle1 = ((angle + theta) * Math.PI) / 180,
          angle2 = ((angle - theta) * Math.PI) / 180,
          topX = headlen * Math.cos(angle1),
          topY = headlen * Math.sin(angle1),
          botX = headlen * Math.cos(angle2),
          botY = headlen * Math.sin(angle2)
        let arrowX = fromX - topX,
          arrowY = fromY - topY
        let path = ' M ' + fromX + ' ' + fromY
        path += ' L ' + toX + ' ' + toY
        arrowX = toX + topX
        arrowY = toY + topY
        path += ' M ' + arrowX + ' ' + arrowY
        path += ' L ' + toX + ' ' + toY
        arrowX = toX + botX
        arrowY = toY + botY
        path += ' L ' + arrowX + ' ' + arrowY
        return path
      },
      //菜单栏按钮点击事件
      clickEvent(value) {
        this.clickMenubarName = value
        if (value == 'select') {
          this.canvas.selection = true // 允许框选
          this.canvas.selectionColor = 'rgba(100, 100, 255, 0.3)' // 选框填充色：半透明的蓝色
          this.canvas.selectionBorderColor = 'rgba(255, 255, 255, 0.3)' // 选框边框颜色：半透明灰色
          this.canvas.skipTargetFind = false // 允许选中
          this.canvas.isDrawingMode = false //关闭自由绘画
        } else if (value == 'drawing') {
          this.canvas.selection = false // 去除框选
          this.canvas.skipTargetFind = true // 不允许选中
          this.canvas.isDrawingMode = true //开启自由绘画
        } else {
          this.canvas.selection = false  // 去除框选
          this.canvas.skipTargetFind = true  // 不允许选中
          this.canvas.isDrawingMode = false  //关闭自由绘画
        }
      },
  },
}
</script>

<style scoped lang="less">
.hello{
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction:column ;
  justify-content:center;
  align-items:center;
}

/deep/.el-radio{
  margin: 0;
}
</style>

效果如下：
在这里插入图片描述

总结

本文主要介绍了基本图形的绘制方法，可以通过鼠标在画布上点击自由进行绘制，而不是固定的绘制，下一章会继续介绍文本和折线的自由绘制方法。

M_lucklu
关注
  • 35
    点赞
  • 踩
  • 33
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
vue-fabric:基于canvas fabric.js库 创建的vue fabric组件，定制画板，图片组合绘制
04-28
vue-fabric purestart vue-fabric. Installation npm install vue-fabric --save 依赖 下载.和 .到本地 static/js/文件下 本地项目 index.html 引入 [removed][removed] [removed][removed] Import 在main.js中 import 'vue-fabric/dist/vue-fabric.min.css'; import { Fabric } from 'vue-fabric'; Vue.use(Fabric); 使用 <
vue2+Fabric.js库的使用（1）--Fabric的介绍
M_lucklu的博客
01-03 1620
基于vue2+Fabric.js进行项目搭建，开发图形编辑器
vue2签名版、画板 组件
最新发布
sdgjah2的博客
06-03 331
【代码】vue2签名版、画板 组件。
vue 使用canvas 详细教程
一步一个脚印，踏实努力，向着目标前进
09-12 6525
Vue.js 是一个流行的 JavaScript 框架，用于构建用户界面。它提供了一种简洁的方式来管理和渲染数据，同时也支持与其他库和工具的集成。方法获取当前的时间，并根据小时、分钟和秒钟的值计算出指针的位置。然后，我们定义了一些函数来绘制时钟的各个部分。方法绘制了一个填充整个 Canvas 的矩形。方法绘制一个矩形路径，并使用。方法绘制一个圆形路径，并使用。方法开始一个新的路径，使用。方法开始一个新的路径，使用。函数，实现时钟的动态效果。函数用于绘制时钟的外圆，函数用于绘制时钟的刻度，
vue2+Fabric.js库的使用（3）--Fabric的画布详解
M_lucklu的博客
01-05 3372
本文介绍了Fabric画布的一些操作，便于了解画布的一些延展，为后续项目做基础
vue中使用fabric.js所遇到的问题汇总
西瓜甜甜的博客
08-10 5435
最近写一个批改的功能，用canvas的原生api真的太吃力了，之后了解到fabric这个库，好用是好用，但是真的踩了很多坑，能百度的资料少之又少，真的是一步一步踩着泥路走过来。 首先项目中引入vue-fabric vue-fabric gitHub地址 里面有教程和基本api用法，下面是记录项目我踩的坑，我觉得这些坑还是挺有代表性的。 一.画布初始化 项目需要批改试卷，首先动态获取宽高加载图片，画布用v-if进行判断，获取到高度再进行初始化 let img = new Image(); img.src
fabric.js 在vue中的使用
热门推荐
看风听雨
08-08 1万+
Fabric.js 用法总结 （在vue中使用时，因为this的指向不同，所以在Fabric.js方法内部，this是无法使用指向外部的值的） 这只是我在使用fabric.js的过程中的一些总结，文章底部有一个fabric入门的链接，新手入门可以先看一下，适合新手 1. canvas.setBackgroundImage(require('../assets/logo.png')...
fabric 在vue中的简单使用
阿豪
03-02 1633
原文链接: fabric 在vue中的简单使用 上一...
【前端开发】Vue + Fabric.js + Element-plus 实现简易的H5可视化图片编辑器
go
11-11 1万+
目录前言一 、实战效果技术选型核心功能代码实现二、Fabric.js 简介安装创建画布监听画布事件鼠标事件监听设置画布背景设置背景颜色向画布添加图层对象获取当前选中的对象控制图层层级将画布导出成图片下载为图片画布状态记录清除对象/图层清除画布 前言 canves 绘图的运用是前端必知必会的基础，但是canves 本身并不好用，而fabric.js是基于canves的一个绘图框架库，用起来可比canves友好多了！接下来带你看看案例和初识fabric.js~ 一 、实战效果 编辑前： 编辑中： 技术选型
2021-10-11
noscallion的博客
10-11 237
vue中使用fabric 项目中安装命令： npm install fabric 在main.js中添加： import fabric from 'fabric' Vue.use(fabric) 3.在.vue文件中 <template> <div> <canvas id="canvas" width="1000" height="1000"></canvas> </div> </template> &
推荐开源项目：Vue-Fabric - 基于Vue.js的Fabric.js封装库
gitblog_00051的博客
04-19 433
推荐开源项目：Vue-Fabric - 基于Vue.js的Fabric.js封装库 项目地址:https://gitcode.com/purestart/vue-fabric 在前端开发中，交互式设计和图形编辑功能往往需要强大的图形库支持。Vue-Fabric就是这样一个项目，它将流行的Fabric.js库与Vue.js框架无缝融合，为开发者提供了一套轻巧且功能丰富的图形编辑解决方案。 项目简介 ...
vue2-drawboard:基于vue2.x的画板
05-26
vue2画板 介绍 这是基于vue2.x和canvas的绘图板工具。 通过此工具，您可以在图片上标记所需的信息并获取相应的数据。 此外，您还可以将其用作普通绘图板，在其中可以自由在其上绘制图形。 当前支持的类型为折线，矩形，多边形，点等。可以支持放大，缩小，旋转，平移和其他操作。此外，您还可以灵活地配置图形信息。 安装 npm install vue2-drawboard -S 用法 import DrawBoard from 'vue2-drawboard' import 'vue2-drawboard/lib/drawboard.css' Vue . use ( DrawBoard ) ; 例子 < template> < div xss=removed> < drawboard : url = " url " @ updateData = " updateData
uni-app+Vue3+pinia+uview-plus搭建的项目包
12-28
uni-app+Vue3+pinia+uview-plus搭建的项目包！uni-app+Vue3+pinia+uview-plus搭建的项目包！uni-app+Vue3+pinia+uview-plus搭建的项目包！uni-app+Vue3+pinia+uview-plus搭建的项目包！uni-app+Vue3+pinia+uview-...
vue-fabric-next:Vue 3的fabric.js库包装
04-17
该模板将帮助您开始在Vite中使用Vue 3和Typescript进行开发。 推荐的IDE设置 + 。 确保在设置中启用vetur.experimental.templateInterpolationService ！ 如果使用[removed] 是当前处于RFC阶段的功能。 要获得...
office-ui-fabric-vue:Vue.js的Office UI Fabric实现
05-02
介绍Vue.js的Office UI Fabric实现，使用构建依存关系vue.js 2.2.0+安装 $ yarn add office-ui-fabric-vue // or $ npm install office-ui-fabric-vue用法 import Vue from 'vue' import OfficeUIFabricVue from '...
项目实战视频课程：美团网（Vue2+Node.js+Express+支付+Electron）
06-09
采用异步的方式，通过AJAX从服务端获取数据，并使用Vue2和jQuery动态更新数据。美团网实现的功能包括首页分类显示、注册登录、商品页面、套餐页面、购物，支付（使用Node.js实现）、个人中心等。
Vue+OpenLayers7入门到实战：OpenLayers实现鼠标拖拽方式绘制矩形（正方形和长方形）
GIS地图技术分享(GIS入门、Openlayers教程、Leaflet教程)，做最好的GIS地图开发教程
05-10 196
本章介绍如何使用OpenLayers7在地图上实现鼠标拖拽方式绘制矩形（拖拽方式长方形和正方形）。OpenLayers本身是可以通过鼠标点击多个点的方式来绘制多边形的，当然也包括长方形和正方形，但是这种多边形绘制出来的图形并不是准确的“长方形”和“正方形”，多多少少都会有一些变形（形状不规则），而且也不好控制。本章就是为了解决上述问题，只需要通过鼠标拖拽方式就可以直接实时生成形状规则的“矩形”。
利用vue+fabric.js获取图片坐标，并实现图片拖拽、旋转、拉伸等功能
weixin_42252416的博客
11-14 9290
什么是Fabric.js? Fabric.js是一个可以简化Canvas程序编写的库。 Fabric.js为Canvas提供所缺少的对象模型, svg parser, 交互和一整套其他不可或缺的工具。 为什么要使用Fabric.js？ Canvas提供一个好的画布能力, 但是Api不够友好。绘制简单图形其实还可以, 不过做一些复杂的图形绘制, 编写一些复杂的效果，就不是那么方便了。Fabri...
vue结合 Fabric.js 实现鼠标拖动画布、滚轮缩放画布的功能
@必意玲
02-21 1万+
1. 效果展示 vue 结合 fabric.js 用canvas画布画底图 实现鼠标拖动画布底图 实现鼠标滚动对画布底图进行放大缩小 2. 引入 fabric.js 2.1 npm 安装 npm install fabric --save 2.2 main.js 导入 import { fabric } from 'fabric' Vue.use(fabric); 3.3 vue 页面实...
vue2使用fabric.js标注
08-15
在Vue2中使用fabric.js进行标注，可以按照以下步骤进行： 1. 首先，安装fabric.js库。可以使用npm或yarn进行安装： ``` npm install fabric ``` 或 ``` yarn add fabric ``` 2. 创建一个Vue组件，例如AnnotationCanvas.vue，在该组件中引入fabric.js库： ```vue <template> <canvas ref="canvas"></canvas> </template> <script> import fabric from 'fabric'; export default { mounted() { this.initializeFabric(); }, methods: { initializeFabric() { const canvas = new fabric.Canvas(this.$refs.canvas); // 在canvas上添加一些初始对象 const rect = new fabric.Rect({ left: 100, top: 100, width: 200, height: 200, fill: 'red' }); canvas.add(rect); } } } </script> ``` 3. 在需要使用标注的地方，引入AnnotationCanvas组件： ```vue <template> <div> <h1>Image Annotation</h1> <annotation-canvas></annotation-canvas> </div> </template> <script> import AnnotationCanvas from './AnnotationCanvas.vue'; export default { components: { AnnotationCanvas } } </script> ``` 这样，你就可以在Vue2中使用fabric.js进行

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

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值