基于Canvas+React的三测单、体温单

        语言：React、JavaScript、TypeScript、ES6语法；

        技术：Canvas画布、可视化操控控制；

先上图，看看效果：

组件功能描述及特性：

1、此组件为三测单、体温单；

2、支持腋表、口表、肛表、物理降温(物理降温与腋表之间的竖虚线)；

3、支持心率、脉搏；

4、支持自定义测量元素（如图中所示，“自定义-A”、“自定义-B”）；

5、支持呼吸、血压；

6、可以直接编辑自定义元素，如入量、出量等；

7、支持鼠标点击直接标记温度测量点；

8、支持滚轮调整温度测量点；

------

9、待补充功能：打印、入院相关时间等 

核心技能与思想

1、必须熟练掌握Canvas；

2、能够绘制圆、连线、特殊图形、文本；

3、基于三测单核心要素，抽象出测量元素的对象。结合鼠标行为，测量对象，做必要的人机可视化操控；

4、脉搏与体温刻度不同，需要做进制转换；

5、需要预设好各测量类型的阈值；

6、训练个人空间想象力，要在脑海里构思好如何排版；

如何绘制折线

  DrawPath(poPen: Pen, poPoints: Point[]) {
    let loContext = this.GetContext();
    if (!loContext) {
      return;
    }

    loContext.beginPath();
    loContext.lineWidth = poPen.Width;
    loContext.strokeStyle = poPen.Color;
    this.UpdatePenDashStyle(loContext, poPen);

    for (let liIndex = 0; liIndex < poPoints.length; liIndex++) {
      let loPoint = poPoints[liIndex];
      if (liIndex === 0) {
        loContext.moveTo(loPoint.X, loPoint.Y);
      } else {
        loContext.lineTo(loPoint.X, loPoint.Y);
      }
    }

    loContext.stroke();
    loContext.closePath();
  }

【精选】基于Canvas+React的高性能Table表格-CSDN博客