Vue+Canvas，轻松实现实时涂鸦共享

咱们网上做事总得搭个伴，那就开发个能实时涂鸦共享的软件呗。不难的，只需要Vue跟Canvas这两个小伙伴联合就搞定了。大家尽情发挥，还可以把成果展示出去让朋友们欣赏。再配个WebSocket这个黑科技，咱们可以边画画边上聊，就成了个实实在在的即时交流APP！

一、准备工作

首先，想用这个画图纸实时分享 APP 得把 Vue.js 和 Canvas 装在电脑上哈。还没有?别急，听我给你说说怎么装它们！

bash
#安装Vue.js
npm install vue
#安装Canvas
npm install canvas

二、绘制基本画板界面

快来瞧瞧，想用Vue的模板语言轻松搞出一个画布布局是超级容易的！只需在App.vue这个文件里加点儿代码，就大功告成~

vue
# 安装Vue
npm install -g @vue/cli
# 创建一个新的Vue项目
vue create draw-app
# 安装Canvas
npm install canvas
export default {

  methods:{

    startDrawing(event){

      //开始绘图操作

    },

    draw(event){

      //绘制路径
  

    
  


export default {
  data() {
    return {
      isDrawing: false,
      context: null,
      lastX: 0,
      lastY: 0,
    };
  },
  mounted() {
    this.context = this.$refs.canvas.getContext('2d');
    this.$refs.canvas.width = window.innerWidth;
    this.$refs.canvas.height = window.innerHeight;
  },
  methods: {
    startDrawing(event) {
      this.isDrawing = true;
      [this.lastX, this.lastY] = [event.pageX, event.pageY];
    },
    draw(event) {
      if (!this.isDrawing) return;
      const { context, lastX, lastY } = this;
      context.beginPath();
      context.moveTo(lastX, lastY);
      context.lineTo(event.pageX, event.pageY);
      context.stroke();
      [this.lastX, this.lastY] = [event.pageX, event.pageY];
    },
    stopDrawing() {
      this.isDrawing = false;
    },
  },
};


.app {
  background-color: #eee;
}

    stopDrawing(event){

      //停止绘图操作

    }

  }

}

快点试试看！用Vue画画就像玩游戏一样容易～先看看鼠标按下时的mousedown事件，然后按照你心里想的，轻轻拉出想要的图形。最后别忘了松开鼠标后就算画完了哦～真的不难，还等什么，快动手试试吧～

三、实现实时共享功能

别着急，想轻松搞定聊天氛围？你的硬盘必须要有socket.io库下面就跟着哥儿们一起来学这个库怎么用~步骤很简单，第一步就是先把它装进我们的项目中哈!

npm install socket.io

然后，在main.js文件中添加以下代码：

javascript
import Vue from ‘vue’;
npm install socket.io

用了下’socket.io-client’这个库，问题迎刃而解！
只要把”http://localhost:3000″塞进这句`io(“…”)`，不就可以链接到你的电脑网址！
我们得给Vue的原型上加个新东西，把共享的变量改名为$socket。这样一来，咱们不仅能拿到那个Socket对象还能接着用！
这个小脚本给咱们搞定一个Socket实例，搬到Vue里就可以随时用
import Vue from 'vue';
import App from './App.vue';
import io from 'socket.io-client';
const socket = io('http://localhost:3000');
Vue.prototype.$socket = socket;
new Vue({
  render: h => h(App),
}).$mount('#app');

好的，咱们玩儿点儿新花样。快去App.vue那儿，给Methods添个新动作！

methods:{
  startDrawing(event){
启动绘画，把数据发过去！
},
  draw(event){
methods: {
  // 省略之前的代码...
  startDrawing(event) {
    this.isDrawing = true;
    [this.lastX, this.lastY] = [event.pageX, event.pageY];
    this.$socket.emit('startDrawing', { x: event.pageX, y: event.pageY });
  },
  draw(event) {
    if (!this.isDrawing) return;
    const { context, lastX, lastY } = this;
    context.beginPath();
    context.moveTo(lastX, lastY);
    context.lineTo(event.pageX, event.pageY);
    context.stroke();
    [this.lastX, this.lastY] = [event.pageX, event.pageY];
    this.$socket.emit('draw', { x: event.pageX, y: event.pageY });
  },
  stopDrawing() {
    this.isDrawing = false;
    this.$socket.emit('stopDrawing');
  },
},

直接发个消息给”draw”频道，把数据也带上就行了。
  stopDrawing(event){
就直接给它发个信息告诉它停止绘画，别忘了带上数据哈。
这段代码主要是教咱们如何使用 socket.emit()这个小绝招，咱们可以通过它向WebSocket服务器发送指令，告诉对方咱要做什么操作，像开始涂鸦呀、划线取消呀、还有停止绘画之类的都行！
光说说最后了，咱们弄个Websocekt服务器咋样？用Node.js来搞会不会行得通？里头呢先建个server.js的文件，然后把下面这几句代码给整个复制过去试试看呗～
const http = require(‘http’);
用http创建个服务器呗！
赶紧用起来 socket.io，跟服务器连好就能用了，别再纠结了！
等有人连接，会弹出提示“已连接”。赶快拿着那个名叫socket的神器去欢迎新伙伴！
const server = require('http').createServer();
const io = require('socket.io')(server, {
  cors: {
    origin: '*',
  },
});
io.on('connection', socket => {
  console.log('New client connected');
  socket.on('startDrawing', (data) => {
    socket.broadcast.emit('startDrawing', data);
  });
  socket.on('draw', (data) => {
    socket.broadcast.emit('draw', data);
  });
  socket.on('stopDrawing', () => {
    socket.broadcast.emit('stopDrawing');
  });
  socket.on('disconnect', () => {
    console.log('Client disconnected');
  });
});
server.listen(3000, () => {
  console.log('Server listening on port 3000');
});

开始绘画的时候，服务器会告诉你(数据)。
开始画图，把数据也告诉它！
});
  socket.on(‘draw’,(data)=>{
    io.emit(‘draw’, data);
当’停止画图’事件发生时，会调用这个函数~
    io.emit(‘stopDrawing’, data);
});
server.listen(3000,()=>{
服务器已经启动，端口是3000！
npm run serve

我们用Socket.IO这神器，直接把HTTP服务器变成WebSocket服务器喽！简单来说，就是靠’connection’事件来收集你们的聊天信息，然后发给其他在线的小伙伴们看看~
四、运行应用
搞定！你就按照这个步骤来启动应用吧：
npm run serve
别慌，跟着往下走就好。打开浏览器，输入地址http://localhost:8080，小程序就能跑起来了！要是还想再开个窗，那就随意，在这个有趣的画板上画得痛快。记住，你的创作过程可是直接分享给其他人看！
告诉你怎么用Vue和Canvas做出能聊天的共享应用！加上WebSocket技术后，聊天超流畅！学会这个方法，搞定各种项目没问题！
			    						    						    						    					    		
			    					    				    					    			
 原文链接：https://www.icz.com/technicalinformation/web/vue2/2024/04/12952.html，转载请注明出处~~~