用 Vue3 + TypeScript 搭建你的涂鸦天地：创造艺术的交互式画板
2022-12-12 04:48:01
挥洒创意，畅游画板王国：打造一个交互式涂鸦天地
绘制基础画布：构建你的艺术地基
如同艺术家需要一张空白画布来挥洒灵感，我们也将从构建一个基础画板组件开始。这个组件将成为你创作的舞台，你可以掌控画布的大小、颜色，甚至是否允许擦除。
让我们深入代码的海洋：
<template>
<canvas id="canvas" :width="width" :height="height"></canvas>
</template>
<script>
import { ref } from 'vue'
export default {
setup() {
const width = ref(400)
const height = ref(400)
return {
width,
height,
}
},
}
</script>
这段代码生成了一个简单的画布元素，其大小由 width 和 height 属性控制。接下来，我们需要为画布添加交互性。
点睛之笔：绘制线条，勾勒你的创意
线条是艺术创作的基石。在这个画板中，你将使用鼠标或触控笔在画布上绘制线条，就像在真实画布上作画一样。
methods: {
drawLine(e) {
if (!this.isDrawing) return
const ctx = this.$el.getContext('2d')
ctx.beginPath()
ctx.moveTo(this.prevX, this.prevY)
ctx.lineTo(e.clientX - this.$el.offsetLeft, e.clientY - this.$el.offsetTop)
ctx.stroke()
this.prevX = e.clientX - this.$el.offsetLeft
this.prevY = e.clientY - this.$el.offsetTop
},
}
这段代码捕获了鼠标按下和移动事件，并使用 Canvas API 在画布上绘制线条。画笔的属性，如颜色和大小，由画板组件的属性控制。
魔法棒现身：擦除线条，修正你的灵感
犯错不可怕，关键是能够修正。在我们的画板上，你可以使用擦除功能来擦除错误的线条，为新的创作腾出空间。
methods: {
erase(e) {
if (!this.canErase) return
const ctx = this.$el.getContext('2d')
ctx.clearRect(e.clientX - this.$el.offsetLeft, e.clientY - this.$el.offsetTop, this.eraserSize, this.eraserSize)
},
}
这段代码捕获了鼠标按下和移动事件，并使用 Canvas API 在画布上擦除一个矩形区域。矩形区域的大小由 eraserSize 属性控制。
艺术调色盘：自定义画笔，彰显你的个性
每个艺术家都有自己的独特风格，因此我们提供了自定义画笔功能，让你可以根据自己的喜好调整画笔的颜色和大小。
props: {
brushColor: {
type: String,
default: '#000000',
},
brushSize: {
type: Number,
default: 5,
},
}
methods: {
setBrush(e) {
const ctx = this.$el.getContext('2d')
ctx.strokeStyle = this.brushColor
ctx.lineWidth = this.brushSize
},
}
这段代码将画笔属性作为组件的属性，并在鼠标按下事件中应用这些属性。这样，你就可以随心所欲地定制你的画笔。
挥洒创意，尽情涂鸦
现在，一切都已准备就绪，你可以尽情挥洒创意，在画板上涂鸦作画了。使用不同的画笔设置，尝试各种绘画技巧，让你的想象力在画布上自由驰骋。
附加：玩转创意画板的秘诀
- 探索画板的属性： 了解不同属性如何影响画笔和线条，激发你的艺术潜能。
- 混合使用颜色和画笔大小： 创造出丰富的艺术效果，让你的画作独具魅力。
- 尝试写字或画画： 发挥你的想象力，看看创意能带你走向何方。
- 与他人分享你的作品： 将你的艺术创作分享给朋友和家人，让他们欣赏你的才华。
结语：开启你的涂鸦之旅
这个交互式画板是一个释放创意和释放压力的理想空间。无论你是艺术爱好者、设计师还是开发人员，都可以在这里尽情挥洒灵感，创作出属于自己的艺术杰作。
常见问题解答
