画心电图插件

支持环境

• web
• uni
• wx

下载插件

npm i ecg-api

EcgApi参数结构

| 参数 | 说明 | 类型 | 可选值 | 默认值 | | :----:| :----: | :----: | :----: | :----: | | type | 在什么环境下使用 | 'uni'或'wx'或'web' | 'uni'或'wx'或'web' | - | | props | 心电配置参数 | PropsApi | 请参考下面的PropsApi配置 | - |

PropsApi参数结构

| 参数 | 类型 | 环境 | 是否必传 | 说明 | | :----:| :----: | :----: | :----: | :----: | | ctx | CanvasRenderingContext2D或UniApp.CanvasContext | 全部 | 是 | canvas的画笔对象 | | canvasId | string | uniapp或wx | 否 | 如果要获取图片就需要传canvas的canvas-id | | canvasToTempFilePath | (uni或wx).canvasToTempFilePath | uniapp或wx | 否 | 如果要获取图片就需要传 | | width | number | 全部 | 是 | canvas的宽度 | | height | number | 全部 | 否 | canvas的高度 | | multiple | number | 全部 | 否 | 整体倍数 | | textFontSize | number | 全部 | 否 | 字体大小 | | backgroundColor | string | 全部 | 否 | 背景颜色 | | hasStart | boolean | 全部 | 否 | 心电图默认开头，实时心电图无效 | | xAxis | boolean或xAxisApi | 全部 | 否 | x轴刻度配置 | | bigCell.count | number | 全部 | 是 | 横排大格子的个数 | | bigCell.color | string | 全部 | 否 | 大格子线的颜色 | | bigCell.lineWidth | number | 全部 | 否 | 大格子线的宽度 | | smallCell.count | number | 全部 | 否 | 每个大格子中小格子的个数 | | smallCell.color | string | 全部 | 否 | 小格子线的颜色 | | smallCell.lineWidth | number | 全部 | 否 | 小格子线的宽度 | | ecg.timeLong | number | 全部 | 否 | 心电图总的时长 | | ecg.color | string | 全部 | 否 | 心电图线的颜色 | | ecg.lineWidth | number | 全部 | 否 | 心电图线的宽度 | | ecg.gain | number | 全部 | 否 | 心电图增益,默认：10 | | ecg.speed | number | 全部 | 否 | 心电图走纸速度 |

xAxisApi参数结构

| 参数 | 类型 | 环境 | 是否必传 | 说明 | | :----:| :----: | :----: | :----: | :----: | | fontSize | number | 全部 | 否 | x轴的字体大小 | | textColor | string | 全部 | 否 | x轴的字体的颜色 | | lineWidth | number | 全部 | 否 | x轴的线的宽度 | | color | string | 全部 | 否 | x轴线的颜色 |

Methods方法

| 方法名 | 说明 | 类型 | | :----:| :----: | :----: | | start | 画线格子 | ()=>this | | drawECG | 开始绘制静态心电图,isFragment是否分片绘制,getImg是否返回图片地址 | (isFragment:boolean = false, getImg:boolean = true)=> Promise<string[]>/Promise | | setBigCellYCount | 设置每排心电图大格子数，增益10对应2， 5对应1，其他的安倍数来 | (num:number)=>this | | setGain | 设置增益 | (num:number)=>this | | setSpeed | 设置走纸速度 | (num:number)=>this | | setWhScale | 设置canvas的宽高比，计算高度需要 | (num:number)=>this | | setData | 设置绘制的全部数据 | (data:string[])=>this | | addDataToDraw | 实时心电图添加数据，同时会出发绘制 | (data: string[])=>this | | computedMinHeight | 计算心电图高度,isFragment是否分片绘制 | (isFragment: boolean = false)=>height | | stopContinueDraw | 实时心电图停止绘画 | ()=>this | | setHeight | 设置高度 | (height:number)=>this | | destroy | 销毁组件 | ()=>void |

h5实时心电图

import {EcgApi} from "ecg-api";
const devicePixelRatio = window.devicePixelRatio||1;
const canvas = document.createElement("canvas");
const canvasView = document.getElementById('canvasView'); // 获取canvas的父元素
// canvas要显示的大小
canvas.style.width= canvasView.offsetWidth+'px';
canvas.style.height= canvasView.offsetHeight+'px';
// 防止模糊，按设备屏幕分配率放大
canvas.width = canvasView.offsetWidth*devicePixelRatio;
canvas.height = canvasView.offsetHeight*devicePixelRatio;
canvasView.appendChild(canvas)； // 加入需要显示的位置
const ctx = canvas.getContext('2d');
ecgObj.value = new EcgApi('web',{
    ctx, //canvas.getContext('2d');
    multiple:devicePixelRatio, // 倍数防模糊
    width:canvas.width,
    height:canvas.height,
    ecg:{ // 心电图的配置
        color:'rgba(0,0,0,0.5)',
        lineWidth:1,
    },
    bigCell:{ // 大格子的配置
        count:15,
    },
    smallCell:{ // 小格子的配置
        count:5,
    },
    gain:30, // 增益
    translateY:2, // 向下移动2个大格子
    backgroundColor:'#FFF6F6', // 背景颜色
}).start(); // 画格子
ecgObj.value?.addDataToDraw([1,2,3]); // 实时添加数据，会自动绘图

ecgObj.value?.stopContinueDraw(); // 停止绘画
// 销毁
ecgObj.value?.destroy();
ecgObj.value = undefined;

h5生成心电图

import {EcgApi} from "ecg-api";
canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
// 注意，增益发生变化时需要重新设置setBigCellYCount，且重新计算高度和获取图片
const multiple = 1.5*(window.devicePixelRatio||1);
canvas.value = document.createElement('canvas');
canvas.value.width = data.width*multiple;
const ctx = canvas.value.getContext('2d');
ecgObj.value = new EcgApi('web',{
    ctx,
    multiple,
    width:canvas.value.width,
    ecg:{
        timeLong:70, // 时长
    },
    bigCell:{
        count:31,
    },
    smallCell:{
        count:5,
    },
    backgroundColor:'#FFF6F6',
    hasStart:true, // 显示心电默认开头
    xAxis:true, // 显示横坐标的刻度
    textFontSize:5 //字体大小
})
// 下面setBigCellYCount、setGain、setSpeed这个3个如果是该值可以不传，默认值就是这个
ecgObj.value.setBigCellYCount(2) // 设置每排心电图的大格子个数，增益10对应2， 5对应1，20对应4，其他的安倍数来
.setGain(10) // 设置增益
.setSpeed(25); // 设置速度
.setWhScale(data.width/data.height); // 设置canvas的宽高比，后面要根据这个计算高度
.setData([]); // 设置绘制的数据
//是不是分片的
const isFragment = true;
// 计算高度
const h = ecgObj.value.computedMinHeight(isFragment);
canvas.value.height = h;
// 生成的心电图,分片返回的数组，反之返回的字符串，报错就不一样了
const arr = await ecgObj.value.drawECG(isFragment);
console.log(arr)

uniapp生成心电图

import {EcgApi} from "ecg-api";
<template>
    <canvas :canvas-id="canvasId" :style="{width, height}"></canvas>
</template>
// script
const multiple = 1.5;
const width = ref(0);
const height = ref(0);
const canvasId ="myCanvas"
const query = uni.createSelectorQuery().in(_this);
query
.select(".psy-img-vt")
.boundingClientRect((data) => { // 这主要是获取父元素的宽度
    const ctx = uni.createCanvasContext(canvasId, _this);
    width.value = data.width+'px';
    ecgObj.value = new EcgApi('uni',{
        canvasId,
        ctx,
        multiple,
        width:data.width,
        ecg:{
            timeLong:70, // 时长
        },
        bigCell:{
            count:31,
        },
        smallCell:{
            count:5,
        },
        backgroundColor:'#FFF6F6',
        hasStart:true,
        xAxis:true,
        textFontSize:5,
        canvasToTempFilePath:uni.canvasToTempFilePath
    })
    ecgObj.value.setBigCellYCount(2) // 设置每排心电图的大格子个数，增益10对应2， 5对应1，20对应4，其他的安倍数来
    .setGain(10) // 设置增益
    .setSpeed(25); // 设置速度
    .setWhScale(data.width/data.height); // 设置canvas的宽高比，后面要根据这个计算高度
    .setData([]); // 设置绘制的数据
})
//是不是分片的
const isFragment = false;
// 计算高度
let h = ecgObj.value?.computedMinHeight(isFragment);
height.value = h+'px';
// 给时间让canvas响应
const t = setTimeout(async()=>{
    // 生成的心电图,分片返回的数组，反之返回的字符串，报错就不一样了
    const arr = await ecgObj.value.drawECG(isFragment);
    console.log(arr)
},200)

uniapp实时心电图参考h5的，替换ctx就行

wx同uniapp一样

注意：如果是手机显示模糊不清，需要获取手机的devicePixelRatio，通过multiple传进去

示例图片