Vue3实现canvas画布组件，自定义画板

于 2024-07-29 17:09:37 发布
阅读量482 收藏 1
点赞数 3
文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Circle_Key/article/details/140775773
版权 
<template>
  <div>
    <div class="toolbar">
      <el-color-picker v-model="currentColor" />
      <el-slider v-model="currentLineWidth" :min="1" :max="10" />
      <el-button :class="{ 'active': currentTool === 'brush' }" @click="selectTool('brush')">画笔</el-button>
      <el-button :class="{ 'active': currentTool === 'eraser' }" @click="selectTool('eraser')">橡皮擦</el-button>
      <el-slider v-if="currentTool === 'eraser'" v-model="eraserSize" :min="10" :max="100" />
      <el-button :class="{ 'active': currentTool === 'rectangle' }" @click="selectTool('rectangle')">长方形</el-button>
      <el-button :class="{ 'active': currentTool === 'circle' }" @click="selectTool('circle')">圆形</el-button>
      <el-slider v-if="currentTool === 'check' || currentTool === 'cross' || currentTool === 'arrow'"
        v-model="shapeSize" :min="10" :max="100" />
      <el-button :class="{ 'active': currentTool === 'check' }" @click="selectTool('check')">打√</el-button>
      <el-button :class="{ 'active': currentTool === 'cross' }" @click="selectTool('cross')">打×</el-button>
      <el-button :class="{ 'active': currentTool === 'arrow' }" @click="selectTool('arrow')">箭头</el-button>
      <el-button :class="{ 'active': currentTool === 'text' }" @click="selectTool('text')">文本</el-button>
      <el-button @click="clearCanvas">清除</el-button>
      <el-button @click="saveCanvas">保存</el-button>
      <el-button @click="undo">撤销</el-button>
      <el-button @click="redo">重做</el-button>
      <el-button @click="rotateCanvas">翻转</el-button>
      <el-button @click="zoomIn">放大</el-button>
      <el-button @click="zoomOut">缩小</el-button>

    </div>
    <div class="canvas-container">
      <canvas ref="bgCanvas" width="800" height="600" style="position: absolute;"></canvas>
      <canvas ref="drawCanvas" width="800" height="600" style="position: absolute;"></canvas>
      <canvas ref="shapeCanvas" @mousedown="handleClick" @mousemove="draw" @mouseup="stopDrawing"
        @mouseout="stopDrawing" width="800" height="600" style="position: absolute; border: 1px solid #000;"></canvas>
      <textarea v-if="currentTool === 'text'" v-model="textContent" :style="[textStyle, { color: currentColor }]"
        @blur="finishTextEditing" @input="updateTextContent" ref="textArea" class="text-editor"
        placeholder="请输入文本"></textarea>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted, watch } from 'vue';

const props = defineProps({
  imageUrl: {
    type: String,
    required: true,
  },
});

const bgCanvas = ref(null);
const drawCanvas = ref(null);
const shapeCanvas = ref(null);
const bgContext = ref(null);
const drawContext = ref(null);
const shapeContext = ref(null);
const drawing = ref(false);
const currentColor = ref('#E81E1E');
const currentLineWidth = ref(2);
const currentTool = ref('brush');
const eraserSize = ref(20);
const history = reactive({
  undoStack: [],
  redoStack: [],
});
const shapes = ref([]);
const textShapes = ref([]); // 用于保存文本形状
const activeShape = ref(null);
const shapeSize = ref(30);
const textContent = ref('');
const textArea = ref(null);
const textStyle = reactive({
  position: 'absolute',
  border: '1px dashed black',
  backgroundColor: 'rgba(255, 255, 255, 0)',
  resize: 'none',
  width: '200px',
  height: '100px',
  zIndex: 10,
  display: 'none',
});
const rotation = ref(0);
const zoomFactor = ref(1); // 当前缩放比例
const rotateCanvas = () => {
  rotation.value = (rotation.value + 90) % 360;
  redrawCanvas();
};

const redrawCanvas = () => {
  clearAllCanvases();
  drawImage();
  redrawShapeCanvas();
};


const clearAllCanvases = () => {
  drawContext.value.clearRect(0, 0, drawCanvas.value.width, drawCanvas.value.height);
  shapeContext.value.clearRect(0, 0, shapeCanvas.value.width, shapeCanvas.value.height);
};

const saveState = () => {
  try {
    const state = {
      draw: drawCanvas.value.toDataURL(),
      shapes: shapes.value.map(shape => ({ ...shape })),
      textShapes: textShapes.value.map(text => ({ ...text })),
      rotation: rotation.value,
    };
    history.undoStack.push(state);
    history.redoStack = [];
  } catch (e) {
    console.error('Cannot save canvas state:', e);
  }
};


const restoreState = (state) => {
  drawContext.value.clearRect(0, 0, drawCanvas.value.width, drawCanvas.value.height);
  shapeContext.value.clearRect(0, 0, shapeCanvas.value.width, shapeCanvas.value.height);

  const img = new Image();
  img.src = state.draw;
  img.onload = () => {
    drawContext.value.drawImage(img, 0, 0);
    shapes.value = state.shapes;
    textShapes.value = state.textShapes;
    rotation.value = state.rotation;
    redrawCanvas();  // 调用自定义的重绘函数以应用旋转
  };
};


const handleClick = (event) => {
  const { offsetX, offsetY } = event;

  if (currentTool.value === 'text') {
    textStyle.left = `${offsetX}px`;
    textStyle.top = `${offsetY}px`;
    textStyle.display = 'block';
    textArea.value.focus();
  } else if (['check', 'cross'].includes(currentTool.value)) {
    const shape = {
      type: currentTool.value,
      color: currentColor.value,
      lineWidth: currentLineWidth.value,
      startX: offsetX,
      startY: offsetY,
      width: shapeSize.value,
      height: shapeSize.value,
    };
    shapes.value.push(shape);
    drawShape(shape);
    saveState();
  } else {
    startDrawing(event);
  }
};

const startDrawing = (event) => {
  drawing.value = true;
  const { offsetX, offsetY } = event;

  if (currentTool.value === 'brush') {
    drawContext.value.lineWidth = currentLineWidth.value;
    drawContext.value.strokeStyle = currentColor.value;
    drawContext.value.beginPath();
    drawContext.value.moveTo(offsetX, offsetY);
  } else if (['arrow', 'rectangle', 'circle'].includes(currentTool.value)) {
    const shape = {
      type: currentTool.value,
      color: currentColor.value,
      lineWidth: currentLineWidth.value,
      startX: offsetX,
      startY: offsetY,
      width: 0,
      height: 0,
    };
    shapes.value.push(shape);
    activeShape.value = shape;
  }
};

const draw = (event) => {
  if (!drawing.value) return;

  const { offsetX, offsetY } = event;

  if (currentTool.value === 'brush') {
    drawContext.value.lineTo(offsetX, offsetY);
    drawContext.value.stroke();
  } else if (currentTool.value === 'eraser') {
    const x = offsetX - eraserSize.value / 2;
    const y = offsetY - eraserSize.value / 2;
    drawContext.value.clearRect(x, y, eraserSize.value, eraserSize.value);
  } else if (['rectangle', 'circle', 'arrow'].includes(currentTool.value)) {
    if (activeShape.value) {
      activeShape.value.width = offsetX - activeShape.value.startX;
      activeShape.value.height = offsetY - activeShape.value.startY;
      redrawShapeCanvas();
    }
  }
};

const stopDrawing = () => {
  if (drawing.value) {
    if (currentTool.value === 'brush') {
      drawContext.value.closePath();
    }
    saveState();
    drawing.value = false;
    activeShape.value = null;
  }
};

const clearCanvas = () => {
  drawContext.value.clearRect(0, 0, drawCanvas.value.width, drawCanvas.value.height);
  shapeContext.value.clearRect(0, 0, shapeCanvas.value.width, shapeCanvas.value.height);
  shapes.value = [];
  textShapes.value = [];
  saveState();
};

const saveCanvas = () => {
  const link = document.createElement('a');
  link.download = 'drawing.png';

  const combinedCanvas = document.createElement('canvas');
  combinedCanvas.width = drawCanvas.value.width;
  combinedCanvas.height = drawCanvas.value.height;
  const combinedContext = combinedCanvas.getContext('2d');

  combinedContext.drawImage(bgCanvas.value, 0, 0);
  combinedContext.drawImage(drawCanvas.value, 0, 0);
  combinedContext.drawImage(shapeCanvas.value, 0, 0);

  link.href = combinedCanvas.toDataURL();
  link.click();
};

const selectTool = (tool) => {
  currentTool.value = tool;
  if (tool === 'eraser') {
    updateEraserCursor();
  } else {
    shapeCanvas.value.style.cursor = tool === 'brush' ? 'crosshair' : 'default';
  }
};

const updateEraserCursor = () => {
  const cursorUrl = `data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="${eraserSize.value}" height="${eraserSize.value}" viewBox="0 0 ${eraserSize.value} ${eraserSize.value}"><rect x="0" y="0" width="${eraserSize.value}" height="${eraserSize.value}" stroke="rgba(0, 0, 0, 0.5)" stroke-width="1" fill="rgba(255, 255, 255, 0.3)" /></svg>`;
  shapeCanvas.value.style.cursor = `url('${cursorUrl}') ${eraserSize.value / 2} ${eraserSize.value / 2}, auto`;
};

const undo = () => {
  if (history.undoStack.length > 0) {
    const lastState = history.undoStack.pop();
    history.redoStack.push({
      draw: drawCanvas.value.toDataURL(),
      shapes: shapes.value.map(shape => ({ ...shape })),
      textShapes: textShapes.value.map(text => ({ ...text })),
      rotation: rotation.value,
    });
    restoreState(lastState);
  }
};

const redo = () => {
  if (history.redoStack.length > 0) {
    const lastState = history.redoStack.pop();
    history.undoStack.push({
      draw: drawCanvas.value.toDataURL(),
      shapes: shapes.value.map(shape => ({ ...shape })),
      textShapes: textShapes.value.map(text => ({ ...text })),
      rotation: rotation.value,
    });
    restoreState(lastState);
  }
};
const zoomIn = () => {
  zoomFactor.value *= 1.1; // 放大10%
  redrawCanvas();
};

const zoomOut = () => {
  zoomFactor.value /= 1.1; // 缩小10%
  redrawCanvas();
};

const drawImage = () => {
  if (props.imageUrl) {
    const img = new Image();
    img.crossOrigin = 'anonymous'; // 处理跨域图片
    img.src = props.imageUrl;
    img.onload = () => {
      const padding = 30; // 设置留白区域的大小
      bgContext.value.clearRect(0, 0, bgCanvas.value.width, bgCanvas.value.height);
      bgContext.value.save();
      bgContext.value.translate(padding, padding); // 在绘制时增加留白
      // bgContext.value.drawImage(img, 0, 0, bgCanvas.value.width - 2 * padding, bgCanvas.value.height - 2 * padding);
      bgContext.value.translate(bgCanvas.value.width / 2, bgCanvas.value.height / 2);
      bgContext.value.rotate((rotation.value * Math.PI) / 180);
      bgContext.value.scale(zoomFactor.value, zoomFactor.value); // 应用缩放
      // bgContext.value.drawImage(img, -bgCanvas.value.width / 2, -bgCanvas.value.height / 2, bgCanvas.value.width, bgCanvas.value.height);
      bgContext.value.drawImage(img, -bgCanvas.value.width / 2, -bgCanvas.value.height / 2, bgCanvas.value.width - 2 * padding, bgCanvas.value.height - 2 * padding);
      bgContext.value.restore();
    };
  }
};


const redrawShapeCanvas = () => {
  shapeContext.value.clearRect(0, 0, shapeCanvas.value.width, shapeCanvas.value.height);
  shapes.value.forEach(shape => {
    drawShape(shape);
  });
  textShapes.value.forEach(text => {
    drawShape(text);
  });
};

const drawShape = (shape) => {
  shapeContext.value.beginPath();
  shapeContext.value.strokeStyle = shape.color;
  shapeContext.value.lineWidth = shape.lineWidth;

  if (shape.type === 'rectangle') {
    shapeContext.value.rect(shape.startX, shape.startY, shape.width, shape.height);
  } else if (shape.type === 'circle') {
    shapeContext.value.arc(shape.startX, shape.startY, Math.sqrt(Math.pow(shape.width, 2) + Math.pow(shape.height, 2)), 0, 2 * Math.PI);
  } else if (shape.type === 'check') {
    shapeContext.value.beginPath();
    shapeContext.value.moveTo(shape.startX, shape.startY);
    shapeContext.value.lineTo(shape.startX + shape.width, shape.startY + shape.height / 2);
    shapeContext.value.lineTo(shape.startX + shape.width * 2, shape.startY - shape.height);
    shapeContext.value.stroke();
  } else if (shape.type === 'cross') {
    shapeContext.value.beginPath();
    shapeContext.value.moveTo(shape.startX, shape.startY);
    shapeContext.value.lineTo(shape.startX + shape.width, shape.startY + shape.height);
    shapeContext.value.moveTo(shape.startX, shape.startY + shape.height);
    shapeContext.value.lineTo(shape.startX + shape.width, shape.startY);
    shapeContext.value.stroke();
  } else if (shape.type === 'arrow') {
    const headLength = 10;
    const angle = Math.atan2(shape.height, shape.width);
    shapeContext.value.moveTo(shape.startX, shape.startY);
    shapeContext.value.lineTo(shape.startX + shape.width, shape.startY + shape.height);
    shapeContext.value.lineTo(shape.startX + shape.width - headLength * Math.cos(angle - Math.PI / 6), shape.startY + shape.height - headLength * Math.sin(angle - Math.PI / 6));
    shapeContext.value.moveTo(shape.startX + shape.width, shape.startY + shape.height);
    shapeContext.value.lineTo(shape.startX + shape.width - headLength * Math.cos(angle + Math.PI / 6), shape.startY + shape.height - headLength * Math.sin(angle + Math.PI / 6));
  } else if (shape.type === 'text') {
    shapeContext.value.fillStyle = shape.color;
    shapeContext.value.font = '16px Arial';
    shapeContext.value.textAlign = 'left';
    shapeContext.value.textBaseline = 'top';
    shapeContext.value.fillText(shape.content, shape.startX, shape.startY);
  }

  shapeContext.value.stroke();
};

const finishTextEditing = () => {
  if (textContent.value.trim() === '') return;
  const { offsetLeft, offsetTop, offsetWidth, offsetHeight } = textArea.value;
  const shape = {
    type: 'text',
    content: textContent.value,
    color: currentColor.value,
    startX: offsetLeft,
    startY: offsetTop,
    width: offsetWidth,
    height: offsetHeight,
  };
  textShapes.value.push(shape);
  redrawShapeCanvas();
  textContent.value = '';
  textStyle.display = 'none';
};

const updateTextContent = () => {
  // Optional: Handle text content updates here if needed
};

onMounted(() => {
  bgContext.value = bgCanvas.value.getContext('2d');
  drawContext.value = drawCanvas.value.getContext('2d');
  shapeContext.value = shapeCanvas.value.getContext('2d');
  drawImage();
  saveState();
});

watch(() => props.imageUrl, drawImage);
watch(() => eraserSize.value, updateEraserCursor);
</script>

<style scoped>
.toolbar {
  margin-bottom: 10px;
}

.canvas-container {
  position: relative;
  /* width: 800px;
  height: 600px; */
}

canvas {
  cursor: default;
  /* border: 1px solid #ccc; */
  /* padding: 20px; */
}

.text-editor {
  display: none;
  /* Hidden initially */
}

.el-button.active {
  background-color: #409EFF;
  color: white;
}

.text-editor {
  display: block;
  position: absolute;
  border: 2px solid #ddd;
  border-radius: 4px;
  background-color: #f9f9f9;
  font-size: 14px;
  padding: 10px;
  resize: none;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  z-index: 10;
  transition: border-color 0.3s ease;
  width: 200px;
  height: 100px;
  top: 0;
  left: 0;
}

.text-editor:focus {
  border-color: #409EFF;
  outline: none;
}

.text-editor::placeholder {
  color: #888;
  font-style: italic;
}
</style>

 使用

 效果图

Circle_Key
关注
  • 3
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue3使用canvas实现图层的移动、缩放、旋转等其他编辑操作
不怕麻烦的鹿丸的博客
08-25 3856
一些简单有规则的图形，比如矩形，椭圆，多边形......我们可以使用一些数学函数来计算判断。这种方式非常棒，当你的画布上没有大量的图形时，他可能是非常快的。但是这种方式很难处理那些非常复杂的几何图形。比如说，你正在使用具有二次曲线的线。
vue+canvas绘制图形
01-09
文件中有封装好的绘制圆形、矩形以及不规则图形的方法，直接拿到适合自己的场合下用即可
vue项目集成CanvasEditor实现Word在线编辑器
最新发布
weixin_52443895的博客
06-24 4331
实现Word在线编辑器 官网文档：https://hufe.club/canvas-editor-docs/guide/schema.html 源码地址：https://github.com/Hufe921/canvas-editor在你需要集成编辑器的项目中，安装CanvasEditor 第二步：主要文件集成 1、下载源码，目录如下:红色框就是我们需要在自己项目中引用的 2、在你的vue项目项目中，新建一个文件夹，叫CanvasEditor，这个文件夹内，就放集成的相关文件（代码以及目录结构贴在后边）集成
认识vue-konva画图工具
热门推荐
weixin_45353536的博客
03-31 1万+
认识vue-konva
Vue3 + TS中利用 canvas 创建绘画画板（签名板、画笔、矩形）
nana18874597151的博客
01-15 3551
/ 画线段ctx.moveTo(startX, startY) // 画线起点ctx.lineTo(endX, endY) // 画线终点ctx.stroke() // 描绘线条// 定义鼠标初始点击的位置// 鼠标按下;painting = true // 将绘画状态改成true// 鼠标移动// 在鼠标移动的期间，获取鼠标的位置// 下面两行代码是更新线条的起点// 鼠标松开// 松开鼠标后 禁止画线条// 画矩形。Vue3 + TS中利用 canvas 创建绘画画板（线条、矩形）
vue中的canvas插件
忧郁的蛋的专栏
08-21 1552
vue-fabricjs 提供了一种简化的方式来在 Vue.js 组件中使用 Fabric.js 的功能，包括创建和编辑图形、添加事件处理和动画等。vue中canvas插件有vue-konva、vue-fabricjs、vue-canvas-effect、vue-chartjs和vue-threejs等。详细介绍：1、vue-konva是一个用于在Vue.js中使用Konva.js的插件，Konva.js是一个功能强大的HTML5 2D 渲染引擎，可以用于创建交互式的Canvas应用程序等等。
从零开始学习在VUE3中使用canvas(一)：实现一个基础的canvas画布
qq_45820271的博客
03-18 2812
本文讲解了如何在在vue3中使用canvas元素制作一个基础的画布
Vue3使用fabric.js实现可以加载图片与绘制功能的画布
weixin_62328265的博客
03-04 2145
Vue3 使用 fabric.js 实现加载图片并且满足绘制功能(设置画笔,设置橡皮擦,设置颜色,设置画笔与橡皮擦的粗细等功能)的画布
vue-canvas:一个简单vue canvas画板的demo
05-10
Vue Canvas 是一个基于 Vue.js 的轻量级画板组件，旨在提供一个简易的画布功能，用户可以在网页上进行自由绘图。这个项目是开发者为了展示如何在 Vue 框架中集成 HTML5 Canvas 元素而创建的一个示例。在 Vue 应用中...
vue-konva：Vue和Canvas-JavaScript库，用于使用Vue绘制复杂的画布图形
02-06
Vue Konva是一个JavaScript库，用于使用Vue绘制复杂的画布图形。 它提供了声明性和React性绑定。 所有vue-konva组件都对应于具有前缀“ v-”的同名Konva组件。 可用于Konva对象的所有参数都可以在config中作为...
CanvasDemo.vue
05-26
vue中实现图片框选功能，提供了完整的代码参考，可以将.vue文件直接放入项目中查看效果，后续可以根据需要自主进行修改、新增功能
vue-pixel-board：Vue的像素绘图板
02-05
像素面板 Vue的像素绘图板SFC :warning: 警告！ 该图书馆正在大规模重建中。 请稍后再访问。 目录 安装 npm install vue-pixel-board 用法 注册组件 要在全球注册： import Vue from 'vue' ; import PixelBoard from 'vue-pixel-board' ; Vue . component ( 'pixel-board' , PixelBoard ) ; 或在没有全局注册的情况下在组件中使用，只需将其添加到components选项中： export default Vue . extend ( { name
封装canvas各种方法的vue组件
09-07
封装canvas各种方法的vue组件、文字、多行文字7矩形、图片功能的vue；canvas组件
vue移动端使用canvas签名的实现
10-15
Vue 移动端实现canvas签名的核心在于利用HTML5的canvas元素和触摸事件，为用户提供一个可在屏幕上绘制图形的画板。以下将详细讲解这个过程。 首先，我们需要在HTML中创建一个canvas元素，并设置其在页面中的布局。...
vue 画布 vue-fabric-drawing
02-20
Vue Fabric Drawing 是一个基于 Vue.js 和 Fabric.js 的画布组件，专为 Vue 开发者设计，用于在网页上实现交互式绘图功能。Vue.js 是一个流行的前端框架，它简化了构建用户界面的过程，而 Fabric.js 是一个强大的 ...
vue实现在canvas画布上实现绘制涂抹功能
Lmyuand的博客
11-24 2675
vue实现在canvas画布上实现绘制涂抹功能 方式：vue+canvas 功能：在vue框架中使用canvas画布实现自定义涂抹功能 说明： template页面代码块中加入canvas标签宽高必须要设置： <canvas id="canvas" width="1050" height="565"> </canvas> return中定义： export default { data() { return { onoff:false, old
vue3中使用canvas
weixin_72439307的博客
02-08 3215
使用canvas通过ref和dom方式画圆、直线、箭头、文字
如何在Vue3中实现一个简单的线上绘图板功能
有我更精彩的博客
06-22 878
绘图板功能在很多应用中都有广泛的使用场景，比如绘图工具、在线教育、作图工具等。实现这样一个功能并不复杂，但需要了解一些基本的绘图方法和Vue 3的基本知识。在本篇文章中，我们将会带你一步一步地实现这一功能。通过以上步骤，我们成功实现了一个简单的线上绘图板功能，并且增加了颜色选择和笔刷粗细设置功能。这不仅提高了用户的绘图体验，也为应用增加了趣味性和交互性。希望本篇文章能为各位读者实现类似功能提供帮助和启发，同时也欢迎大家对代码和功能进行进一步的优化和扩展。
vue父组件获取子组件自定义的值
08-12
如果你想要获取子组件中自定义的值，可以通过以下步骤来实现： 1. 在子组件中定义一个自定义的属性或者变量，并且给它赋予一个值。例如，在子组件的data属性中定义一个自定义属性`customValue`，并赋予一个值： ```javascript export default { data() { return { customValue: 'Custom Value' }; } } ``` 2. 在父组件中，使用`ref`来引用子组件，并且在需要获取子组件值的地方，通过引用来访问子组件的自定义属性。例如，在父组件的方法中，可以通过`this.$refs.child.customValue`来获取子组件的自定义值： ```javascript methods: { getChildCustomValue() { const childCustomValue = this.$refs.child.customValue; console.log(childCustomValue); } } ``` 注意，这里的`child`是你在父组件中给子组件添加的`ref`属性的名称。确保在需要获取子组件值的时候，子组件的自定义属性已经被赋值。 这样，你就可以在父组件中获取到子组件的自定义值了。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值