vue3 和 canvas

### Vue3 中使用 Canvas 的基本方法 在 Vue3 中，`<canvas>` 标签可以通过 JavaScript 和 Canvas API 进行操作。以下是关于如何结合 Vue3 和 `<canvas>` 实现绘图功能的具体说明。 #### 绘制基础图形 通过绑定 `ref` 到 `<canvas>` 元素，可以在 Vue3 方法中获取到该 DOM 节点并对其进行操作。以下是一个简单的示例： ```javascript <template> <div> <canvas ref="myCanvas" width="500" height="500"></canvas> </div> </template> <script> import { onMounted, ref } from 'vue'; export default { setup() { const myCanvas = ref(null); onMounted(() => { const ctx = myCanvas.value.getContext('2d'); // 绘制矩形 ctx.fillStyle = '#FF0000'; ctx.fillRect(10, 10, 150, 100); // 绘制圆形 ctx.beginPath(); ctx.arc(75, 75, 50, 0, Math.PI * 2); ctx.closePath(); ctx.fill(); }); return { myCanvas }; } }; </script> ``` 此代码展示了如何在 Vue3 中绘制一个红色矩形和一个填充的圆形[^1]。 --- #### 合成图片 如果需要将多个图像合成一张新图片，则可以利用 Canvas 的 `drawImage()` 方法来实现。以下是一个基于 Vue3 的示例： ```javascript <template> <div> <canvas ref="compositeCanvas" width="800" height="600"></canvas> </div> </template> <script> import { onMounted, ref } from 'vue'; export default { setup() { const compositeCanvas = ref(null); onMounted(async () => { const ctx = compositeCanvas.value.getContext('2d'); // 加载两张图片 const img1 = new Image(); const img2 = new Image(); img1.src = 'path/to/image1.jpg'; // 替换为实际路径 img2.src = 'path/to/image2.png'; // 替换为实际路径 await Promise.all([new Promise(resolve => (img1.onload = resolve)), new Promise(resolve => (img2.onload = resolve))]); // 将图片绘制到画布上 ctx.drawImage(img1, 0, 0, 400, 300); ctx.drawImage(img2, 400, 0, 400, 300); }); return { compositeCanvas }; } }; </script> ``` 在此示例中，两幅图片被加载并通过 `drawImage()` 方法绘制到了同一个 `<canvas>` 上[^1]。 --- #### 结合 div 和 canvas 下载图片 为了实现将 HTML 元素（如 `div`）的内容转换为图片并与 Canvas 图像一起保存的功能，可借助第三方库 `html2canvas` 来完成这一需求。以下是一个完整的解决方案： ```javascript <template> <div> <div id="contentToConvert"> <!-- 需要转化为图片的HTML结构 --> <h1>这是一个标题</h1> <p>这是段落文字。</p> </div> <button @click="downloadCombined">下载组合图片</button> <canvas ref="imageCanvas" style="display:none;"></canvas> </div> </template> <script> import html2canvas from 'html2canvas'; import { ref } from 'vue'; export default { setup() { const imageCanvas = ref(null); async function downloadCombined() { const contentDiv = document.getElementById('contentToConvert'); const canvasCtx = imageCanvas.value.getContext('2d'); // 创建隐藏的canvas用于存储背景图片 const backgroundImage = new Image(); backgroundImage.src = 'path/to/background.jpg'; // 替换为实际路径 await new Promise((resolve) => (backgroundImage.onload = resolve)); // 设置canvas尺寸等于背景图片大小 imageCanvas.value.width = backgroundImage.width; imageCanvas.value.height = backgroundImage.height; // 绘制背景图片 canvasCtx.drawImage(backgroundImage, 0, 0); // 使用html2canvas捕获div内容 const capturedContent = await html2canvas(contentDiv); // 将捕获的结果绘制到canvas上 canvasCtx.drawImage(capturedContent, 0, 0, backgroundImage.width, backgroundImage.height); // 导出最终结果作为图片文件 const link = document.createElement('a'); link.href = imageCanvas.value.toDataURL('image/png'); link.download = 'combined_image.png'; link.click(); } return { downloadCombined, imageCanvas }; }, }; </script> ``` 这段代码实现了将指定区域内的 HTML 内容与自定义背景图片相结合，并允许用户将其导出为 PNG 文件[^2]。 --- #### 编辑图层（移动、缩放、旋转） 对于更复杂的交互场景，比如支持拖拽、缩放或旋转特定对象的操作，通常会引入额外的状态管理逻辑以及辅助工具类。例如，在检测鼠标事件时更新目标位置参数等。这里提供了一个简化版的概念验证方案： ```javascript <template> <div> <canvas ref="editableCanvas" width="800" height="600"></canvas> </div> </template> <script> import { onMounted, ref } from 'vue'; export default { setup() { const editableCanvas = ref(null); let isDragging = false; let currentShapeIndex = null; const shapes = [ { type: 'circle', x: 100, y: 100, radius: 50, color: 'blue' }, { type: 'rect', x: 300, y: 200, w: 100, h: 50, color: 'green' }, ]; onMounted(() => { const ctx = editableCanvas.value.getContext('2d'); function drawShapes() { ctx.clearRect(0, 0, 800, 600); shapes.forEach(shape => { if (shape.type === 'circle') { ctx.beginPath(); ctx.arc(shape.x, shape.y, shape.radius, 0, Math.PI * 2); ctx.closePath(); ctx.fillStyle = shape.color; ctx.fill(); } else if (shape.type === 'rect') { ctx.fillStyle = shape.color; ctx.fillRect(shape.x, shape.y, shape.w, shape.h); } }); } editableCanvas.value.addEventListener('mousedown', e => { const rect = editableCanvas.value.getBoundingClientRect(); const mouseX = e.clientX - rect.left; const mouseY = e.clientY - rect.top; for (let i = 0; i < shapes.length; ++i) { const s = shapes[i]; if ( ((s.type === 'circle' && Math.sqrt(Math.pow(mouseX - s.x, 2) + Math.pow(mouseY - s.y, 2)) <= s.radius) || (s.type === 'rect' && mouseX >= s.x && mouseX <= s.x + s.w && mouseY >= s.y && mouseY <= s.y + s.h)) ) { isDragging = true; currentShapeIndex = i; break; } } }); editableCanvas.value.addEventListener('mousemove', e => { if (!isDragging || currentShapeIndex === null) return; const rect = editableCanvas.value.getBoundingClientRect(); const deltaX = e.movementX; const deltaY = e.movementY; const selectedShape = shapes[currentShapeIndex]; if (selectedShape.type === 'circle') { selectedShape.x += deltaX; selectedShape.y += deltaY; } else if (selectedShape.type === 'rect') { selectedShape.x += deltaX; selectedShape.y += deltaY; } drawShapes(); }); editableCanvas.value.addEventListener('mouseup', () => { isDragging = false; currentShapeIndex = null; }); drawShapes(); }); return { editableCanvas }; } }; </script> ``` 这个例子演示了如何让用户能够拖动预定义好的形状实例[^3]。 ---