ecg-api v1.0.8

画心电图插件

支持环境

• web
• uni
• wx

下载插件

npm i ecg-api

EcgApi参数结构

PropsApi参数结构

xAxisApi参数结构

Methods方法

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传进去

示例图片