亲们，咱们聊聊怎么用Vue和Canvas搞个能随意涂鸦的矢量图应用。听起来很厉害？做出来让你们都羡慕是小菜一碟，说不定还能帮我们维护世界和平！不怕不怕，逐项来，就跟学骑自行车一样，先找好平衡感，然后慢慢提速。
准备工具，搭建环境
要搞定这款游戏，你需要Vue和Canvas这两个工具。想做菜的话，总得有材料和炉子。安好Node.js和VueCLI，建立起Vue项目，就像是选了块地，然后动手开搞！
创建画布组件
接下来咱们搞点啥？就加个Canvas到Vue项目里！这货就好像你的画板，所有画作全靠它！在App.vue文件里敲上几行代码，就像给画板贴了层保护膜，让你的画作更有质量！
画出第一个图形
<canvas ref="canvas" @mousedown="onMouseDown" @mousemove="onMouseMove" @mouseup="onMouseUp">export default { mounted() { this.canvas = this.$refs.canvas; this.ctx = this.canvas.getContext('2d'); }, methods: { onMouseDown(event) { // 按下鼠标事件 }, onMouseMove(event) { // 移动鼠标事件 }, onMouseUp(event) { // 松开鼠标事件 }, }, };
咱们开始画Canvas上的图！想想要在纸上画个正方形，可能头次有点别扭。但是没关系，初学者都这样。到了onMouseDown这一步，就跟你准备在纸上划出第一笔那么自然哟~
让图形动起来
咱就像是在做方形模型，得让它动起来，跟小时候玩的橡皮泥似的，怎么捏都行。首先得弄个数据模型给图元，扔进Vue组件的data里，这样就能随心所欲地调整大小、位置和颜色了，想咋变就咋变！
onMouseDown(event) {
this.isDrawing = true;
this.startX = event.offsetX;
this.startY = event.offsetY;
},
onMouseMove(event) {
if (!this.isDrawing) return;
this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
this.ctx.fillStyle = 'red';
this.ctx.fillRect(this.startX, this.startY, event.offsetX - this.startX, event.offsetY - this.startY);
},
onMouseUp(event) {
this.isDrawing = false;
},
编辑功能的魔法
咱们来给这个图片加点儿神奇色彩！其实只是在Canvas组件里动动手，画儿就能随心所欲地变大变小，换个颜色。感觉就像是真的！
实现图形的移动和缩放
咱们的图片能随便改，就像小时候喜欢玩的变形金刚一样，随心所欲变换。再有就是那个onMouseMove的功能，用它就能随时调整图片位置和大小，让它在你的画板上自由移动，想怎么放大缩小都行！
data() {
return {
shapes: [],
};
},
颜色的选择与变化
最终，咱们给图形上点儿颜色呗，就跟小时候用彩色笔画画似的，随便弄弄就行。添加了着色功能后，随你怎么发挥，让你的画充满个性！
onMouseDown(event) {
this.isDrawing = true;
this.startX = event.offsetX;
this.startY = event.offsetY;
this.selectedShape = new Shape(this.startX, this.startY, 0, 0, 'red');
this.shapes.push(this.selectedShape);
},
保存与分享你的创作
搞定绘图和编辑之后，别忘了存档和分享！这就像把自己亲手捏成的画放在墙上或者拿给朋友欣赏一样，让别人也看到你的才华。所以我们搞个保存和分享的功能，让你的大作不仅安全存放还能随时分享给关心你的人们看。
扩展与定制你的应用
onMouseMove(event) {
if (!this.isDrawing) return;
this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
this.shapes.forEach((shape) => {
shape.draw(this.ctx);
});
this.selectedShape.width = event.offsetX - this.selectedShape.x;
this.selectedShape.height = event.offsetY - this.selectedShape.y;
this.selectedShape.draw(this.ctx);
},
这就是初步展示，随你怎么发挥和操作，就像玩小孩玩具的乐高似的，增加些新零件就会更好玩了！你还能添点各式图形，加强点儿编辑功能，让你用矢量画图时越来越溜，没什么做不到。
搞定！我们结合Vue和Canvas做出了一个美工App，你可以随心所欲地绘图、改图，改去位置、大小和颜色都没问题~这只是个简单展示，想怎么改就怎么改！
来吧兄弟，现在轮到咱俩说说你是不是已经蠢蠢欲动想用Vue跟Canvas搞定你的矢量图形世界嘞？说~说看你最期待这个应用能添点儿什么新花样儿？赶紧在下面留言别忘了点个赞和转发
created() {
window.addEventListener('keydown', this.onKeyDown);
},
beforeDestroy() {
window.removeEventListener('keydown', this.onKeyDown);
},
methods: {
onKeyDown(event) {
if (!this.selectedShape) return;
switch (event.keyCode) {
case 37: // 左箭头
this.selectedShape.x -= 5;
break;
case 38: // 上箭头
this.selectedShape.y -= 5;
break;
case 39: // 右箭头
this.selectedShape.x += 5;
break;
case 40: // 下箭头
this.selectedShape.y += 5;
break;
case 67: // C键
this.selectedShape.color = 'blue';
break;
case 68: // D键
this.selectedShape.color = 'green';
break;
case 46: // 删除键
this.shapes.splice(this.shapes.indexOf(this.selectedShape), 1);
this.selectedShape = null;
break;
}
this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
this.shapes.forEach((shape) => {
shape.draw(this.ctx);
});
},
},
评论0