Vue.js中使用Canvas实现音频波形图与交互功能

这段代码演示了如何在Vue.js组件中使用HTML5 Canvas API来绘制音频波形图，并实现基本的鼠标交互功能。javascriptinitCanvas(){ // 获取Canvas元素和绘图上下文 this.waveCanvas = this.$refs.waveCanvas; this.waveCanvasContext = this.waveCanvas.getContext('2d'); this.waveCanvas.width = this.$refs.canvas_container.clientWidth; this.waveCanvas.height = this.$refs.canvas_container.clientHeight;

// 其他Canvas元素初始化...

// 为selectedCanvas添加鼠标事件监听器 this.selectedCanvas.addEventListener('mousedown',this.handleMouseDown,false); this.selectedCanvas.addEventListener('mousemove',this.handleMouseMove,false); this.selectedCanvas.addEventListener('mouseup',this.handleMouseUp,false); // 为文档添加键盘事件监听器 document.addEventListener('keydown', this.handleEvent);

// 保存组件实例的引用 let that = this; // 为canvas_container添加右键菜单事件监听器 this.$refs.canvas_container.oncontextmenu = function(event){ event = event || window.event; // 判断是否显示右键菜单 if(this.totalSampleLen===0){ return false; } if(event.srcElement.id!=='selectedCanvas'){ return false; } // 显示自定义右键菜单 that.$refs.contextMenu.style.display = 'block'; // 计算菜单显示位置 let mouseX = event.layerX + 5; let mouseY = event.layerY - 5; if (mouseX+120>that.waveCanvas.width){ mouseX = that.waveCanvas.width - 120; } if (mouseY+30>that.waveCanvas.height-60){ mouseY = that.waveCanvas.height-60; }

that.contextMenuLeft = mouseX;    that.contextMenuTop = mouseY;    // 屏蔽浏览器默认右键菜单    return false;  };},

代码解释：

获取Canvas元素和绘图上下文: 首先，通过 this.$refs 获取到HTML中各个Canvas元素的引用，然后使用 getContext('2d') 方法获取对应的2D绘图上下文对象。2. 设置Canvas尺寸: 设置每个Canvas的宽度和高度，确保它们与其父容器的尺寸一致。3. 添加事件监听器: - 为 selectedCanvas 添加鼠标事件监听器 (mousedown, mousemove, mouseup)，用于处理鼠标交互，例如：区域选择。 - 为 document 添加键盘事件监听器 (keydown)，用于处理键盘操作，例如：缩放。4. 处理右键菜单: - 为 canvas_container 添加 oncontextmenu 事件监听器，用于捕获鼠标右键点击事件。 - 在事件处理函数中，首先判断是否满足显示右键菜单的条件。 - 如果满足条件，则设置自定义右键菜单的显示样式为 block，并计算菜单的显示位置，确保菜单完整显示在可视区域内。 - 最后，返回 false 以阻止浏览器默认的右键菜单行为。

总结:

这段代码展示了在Vue.js组件中使用Canvas API实现音频波形图的基本步骤，并通过添加事件监听器实现了鼠标交互和右键菜单功能。您可以根据自己的需求扩展代码，实现更复杂的功能，例如：音频播放、波形图缩放、区域标记等。