实现vue心电图组件

由于公司需求需要在h5页面实现心电图报告，没办法咯 只能自己使用canvas简单画一个，潦草记录一下
本文使用vue-cli创建项目

创建canvas节点

首先咱们需要一个canvas

	<canvas id="ecg1">浏览器暂不支持h5的canvas元素</canvas>

画心电网图

废话不多说直接上代码
1. 创建初始化方法initGrid
2. 创建小中大三个网格方法 drawSmallGrid，drawMediumGrid， drawBigGrid
3. 根据数据画曲线图: 

initGrid () {
	// 获取canvas对象
    this.c_canvas = this.$refs[this.$props.cid]
    this.context = this.c_canvas.getContext('2d')
    // 获取c_canvas宽度，高度由组件自由传递
    this.w = this.c_canvas.width = this.c_canvas.clientWidth
    this.h = this.c_canvas.height = this.$props.height
    // 编辑网格
    this.drawSmallGrid()
    this.drawMediumGrid()
    this.drawBigGrid()
}
drawSmallGrid () {
  	this.context.strokeStyle = '#f1dedf'
  	this.context.strokeWidth = 1
  	this.context.beginPath()
  	for (var x = 0.5; x < this.w; x += 3) {
    	this.context.moveTo(x, 0)
    	this.context.lineTo(x, this.h)
    	this.context.stroke()
	}
  	for (var y = 0.5; y < this.h; y += 3) {
    	this.context.moveTo(0, y)
    	this.context.lineTo(this.w, y)
    	this.context.stroke()
  	}
  	this.context.closePath()
  }
drawMediumGrid () {
 	this.context.strokeStyle = '#f0adaa'
 	this.context.strokeWidth = 1
 	this.context.beginPath()
 	for (var x = 0.5; x < this.w; x += 15) {
   		this.context.moveTo(x, 0)
   		this.context.lineTo(x, this.h)
   		this.context.stroke()
 	}
 	for (var y = 0.5; y < this.h; y += 15) {
   		this.context.moveTo(0, y)
   		this.context.lineTo(this.w, y)
   		this.context.stroke()
 	}
 	this.context.closePath()
}
drawBigGrid () {
   	this.context.strokeStyle = '#e0514b'
   	this.context.strokeWidth = 1
   	this.context.beginPath()
   	for (var x = 0.5; x < this.w; x += 75) {
     	this.context.moveTo(x, 0)
     	this.context.lineTo(x, this.h)
     	this.context.stroke()
   	}
   for (var y = 0.5; y < this.h; y += 75) {
     	this.context.moveTo(0, y)
     	this.context.lineTo(this.w, y)
     	this.context.stroke()
   	}
   	this.context.closePath()
 }
 drawEcg (ecgDataArrays) {
	 this.context.strokeStyle = '#707070'
	 this.context.strokeWidth = 0.1
	 this.context.beginPath()
	 for (let i = 0; i < ecgDataArrays.length; i += 1) {
	   let y = (ecgDataArrays[i] - 1887) * 1 
	   let x = i
	   this.context.lineTo(x, y)
	   this.context.stroke()
	 }
	 this.context.closePath()
}
 

最后

以上就是香蕉朋友为你收集整理的vue组件实现vue心电图组件的全部内容，希望文章能够帮你解决vue组件实现vue心电图组件所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。