如何使用 Vue 和 Canvas 开发可编辑的矢量图形应用？详细教程及代码示例

亲们，咱们聊聊怎么用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);
    });
  },
},