使用vue+element-ui+canvas实现一个画板的功能，可以调节画笔的颜色

jsmeng626

已于 2023-06-27 09:55:25 修改

阅读量1.7k

点赞数 1

分类专栏： vue 文章标签： vue.js ui javascript

于 2023-05-18 17:13:23 首次发布

本文链接：https://blog.csdn.net/jsmeng626/article/details/130751310

版权

vue 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

首先，安装element-ui和canvas库：

npm install element-ui canvas --save

引入element-ui和canvas库：

import { ColorPicker } from 'element-ui';
import { createRenderer } from 'canvas';

在Vue组件中定义一个画布元素和一些变量来保存画笔的颜色和绘图上下文：

<template>
  <div>
    <el-color-picker v-model="color" />
    <canvas ref="canvas" @mousedown="startDrawing" @mousemove="draw" @mouseup="stopDrawing"></canvas>
  </div>
</template>

<script>
export default {
  data() {
    return {
      color: '#000000',
      isDrawing: false,
      context: null,
    };
  },
  mounted() {
    const canvas = this.$refs.canvas;
    this.context = createRenderer(canvas).getContext('2d');
  },
  methods: {
    startDrawing(event) {
      this.isDrawing = true;
      this.context.beginPath();
      this.context.moveTo(event.offsetX, event.offsetY);
    },
    draw(event) {
      if (!this.isDrawing) return;
      this.context.lineTo(event.offsetX, event.offsetY);
      this.context.strokeStyle = this.color;
      this.context.stroke();
    },
    stopDrawing() {
      this.isDrawing = false;
    },
  },
};
</script>

在上面的代码中，我们使用了<el-color-picker>组件来让用户选择画笔的颜色。当用户选择一个新的颜色时，color变量会更新。

在mounted()生命周期函数中，我们使用createRenderer()方法来创建一个绘图上下文，并将其保存到context变量中。

在startDrawing()方法中，我们设置isDrawing为true，开始一条新的路径，并将起始点设置为鼠标的当前位置。

在draw()方法中，如果isDrawing为true，则将当前点连接到鼠标的当前位置，并设置画笔的颜色为color变量的值，并绘制路径。

在stopDrawing()方法中，我们将isDrawing设置为false，表示绘图已经结束。

这样，我们就完成了一个简单的画板功能，并且可以通过element-ui的颜色选择器来调节画笔的颜色。

vue3版本

<script setup lang='ts'>
const color = ref('#000000')
const isDrawing = ref(false)

function startDrawing() {
  isDrawing.value = true;
}

function draw(event: any) {
  if (isDrawing) {
    const canvas = document.querySelector('.canvas');
    const context = canvas.getContext('2d');
    context.fillStyle = color.value;
    context.fillRect(event.offsetX, event.offsetY, 5, 5);
  }
}

function stopDrawing() {
  isDrawing.value = false;
}
</script>

<template>
  <div>
    <el-color-picker v-model="color" />
  </div>
  <canvas class="canvas" @mousedown="startDrawing" @mousemove="draw" @mouseup="stopDrawing"></canvas>
</template>

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