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

最新推荐文章于 2025-10-26 16:59:05 发布

原创最新推荐文章于 2025-10-26 16:59:05 发布 · 738 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #canvas #react

Canvas 同时被 3 个专栏收录

5 篇文章

订阅专栏

React

4 篇文章

订阅专栏

三测单

1 篇文章

订阅专栏

该博客介绍基于React、JavaScript等语言，利用Canvas画布和可视化操控技术开发三测单、体温单组件。组件支持多种测量方式和元素，可编辑自定义元素，能鼠标点击和滚轮调整测量点。还提及核心技能，如掌握Canvas绘图、做进制转换等，以及待补充功能。

语言：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表格-优快云博客