canvas 刻度尺

使用React和Canvas动态绘制响应式刻度尺
最新推荐文章于 2025-08-01 14:36:53 发布
原创 最新推荐文章于 2025-08-01 14:36:53 发布 · 1.4k 阅读 · 2 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#javascript #前端

该代码示例展示了如何在React应用中使用CanvasAPI创建一个可自定义的刻度尺，并使其根据窗口大小变化调整刻度间隔。通过监听窗口尺寸，动态计算并更新Canvas的宽度以及刻度线的间隔，确保刻度尺始终均匀分布。

参考链接：https://codepen.io/luren/pen/yEagYO

画布

<canvas
  id="rule"
  height="40"
  width="1020"
  style={{ position: 'absolute' }}></canvas>

配置项

const [config, setConfig] = useState({
  size: 101, // 刻度尺总刻度数，（100个间隔需要101个刻度线）
  x: 0, // 刻度尺x坐标位置,单位px
  y: 0, // 刻度尺y坐标位置,单位px
  w: 10, // 刻度线的间隔,单位px
  h: 10, // 刻度线基础长度,单位px
  width: 1020, // 刻度尺宽度(写长20px是为了最后一个刻度值能被显示出来)
  height: 40, // 刻度尺高度
});

画刻度方法

  const draw = (cxt: CanvasRenderingContext2D, config: configVo) => {
    const size = config.size || 101;
    const x = config.x || 0;
    const y = config.y || 0;
    const w = config.w || 10;
    const h = config.h || 10;
    let offset = 3; // 数字的偏移量

    // 画之前清空画布
    cxt.clearRect(0, 0, config.width, config.height);

    // 设置画笔属性
    cxt.strokeStyle = '#aaa'; // 画笔颜色
    cxt.lineWidth = 1; // 画笔大小
    cxt.font = '12'; //字体大小

    // 画刻度线
    for (let i = 0; i < size; i++) {
      // 开始一条路径
      cxt.beginPath();
      // 移动到指定位置
      cxt.moveTo(x + i * w, y);
      // 满10刻度时刻度线长一些 并且在上方表明刻度
      if (i % 10 == 0) {
        // 计算偏移量
        offset = (String(i / 10).length * 6) / 2; // 数字的长度为：String(i / 10).length， /2 是为了居中
        cxt.fillText(i + '', x + i * w, y + h * 3.5); // 数字
        cxt.lineTo(x + i * w, y + h * 2); // 刻度线长（2h）
      } else {
        // 满5刻度(刻度线长：1.5h)时的刻度线略长于1刻度（刻度线长1h）的
        cxt.lineTo(x + i * w, y + (i % 5 === 0 ? 1.5 : 1) * h);
      }
      // 画出路径
      cxt.stroke();
    }
  };

初始化

useEffect(() => {
  const canvas = document.getElementById('rule') as HTMLCanvasElement;
  if (!canvas) return;

  const cxt = canvas.getContext('2d') as CanvasRenderingContext2D;
  draw(cxt, config);
}, [config]);

完整代码

请添加图片描述

import { useState, useEffect } from 'react';

interface configVo {
  size: number;
  x: number;
  y: number;
  w: number;
  h: number;
  width: number;
  height: number;
}

const Rule = () => {
  const [config, setConfig] = useState({
    size: 101, // 刻度尺总刻度数，（100个间隔需要101个刻度线）
    x: 0, // 刻度尺x坐标位置,单位px
    y: 0, // 刻度尺y坐标位置,单位px
    w: 10, // 刻度线的间隔,单位px
    h: 10, // 刻度线基础长度,单位px
    width: 1020, // 刻度尺宽度(写长20px是为了最后一个刻度值能被显示出来)
    height: 40, // 刻度尺高度
  });

  const draw = (cxt: CanvasRenderingContext2D, config: configVo) => {
    const size = config.size || 101;
    const x = config.x || 0;
    const y = config.y || 0;
    const w = config.w || 10;
    const h = config.h || 10;
    let offset = 3; // 数字的偏移量

    // 画之前清空画布
    cxt.clearRect(0, 0, config.width, config.height);

    // 设置画笔属性
    cxt.strokeStyle = '#aaa'; // 画笔颜色
    cxt.lineWidth = 1; // 画笔大小
    cxt.font = '12'; //字体大小

    // 画刻度线
    for (let i = 0; i < size; i++) {
      // 开始一条路径
      cxt.beginPath();
      // 移动到指定位置
      cxt.moveTo(x + i * w, y);
      // 满10刻度时刻度线长一些 并且在上方表明刻度
      if (i % 10 == 0) {
        // 计算偏移量
        offset = (String(i / 10).length * 6) / 2; // 数字的长度为：String(i / 10).length， /2 是为了居中
        cxt.fillText(i + '', x + i * w, y + h * 3.5); // 数字
        cxt.lineTo(x + i * w, y + h * 2); // 刻度线长（2h）
      } else {
        // 满5刻度(刻度线长：1.5h)时的刻度线略长于1刻度（刻度线长1h）的
        cxt.lineTo(x + i * w, y + (i % 5 === 0 ? 1.5 : 1) * h);
      }
      // 画出路径
      cxt.stroke();
    }
  };

  useEffect(() => {
    const canvas = document.getElementById('rule') as HTMLCanvasElement;
    if (!canvas) return;

    const cxt = canvas.getContext('2d') as CanvasRenderingContext2D;
    draw(cxt, config);
  }, [config]);

  return (
    <canvas
      id="rule"
      height="40"
      width="1020"
      style={{ position: 'absolute' }}></canvas>
  );
};

export default Rule;

监听窗口变化(窗口宽度均分为100份)

1.使用width变量存储窗口宽度

const [width, setWidth] = useState(0);

2.监听窗口变化

useEffect(() => {
  getWrapperSize();
  window.addEventListener('resize', getWrapperSize);
  return () => {
    window.removeEventListener('resize', getWrapperSize);
  };
}, [getWrapperSize]);

const getWrapperSize = useCallback(() => {
  const canvas = document.getElementById('rule');
  if (!canvas) return;
  setConfig({
    ...config,
    w: window.innerWidth / 100,
  });
  canvas.setAttribute('width', window.innerWidth + 'px');
  setWidth(window.innerWidth);
}, [config]);

3.当config变化/width变化，都需要重新绘制尺子

useEffect(() => {
  const canvas = document.getElementById('rule') as HTMLCanvasElement;
  if (!canvas) return;

  const cxt = canvas.getContext('2d') as CanvasRenderingContext2D;
  draw(cxt, config);
}, [width, config]);

完整代码如下：此时窗口大小变化，尺子大小也会发生变化

请添加图片描述
请添加图片描述

import { useState, useCallback, useEffect } from 'react';

interface configVo {
  size: number;
  x: number;
  y: number;
  w: number;
  h: number;
  width: number;
  height: number;
}

const Rule = () => {
  const [width, setWidth] = useState(0);
  const [config, setConfig] = useState({
    size: 101, // 刻度尺总刻度数，（100个间隔需要101个刻度线）
    x: 0, // 刻度尺x坐标位置,单位px
    y: 0, // 刻度尺y坐标位置,单位px
    w: 10, // 刻度线的间隔,单位px
    h: 10, // 刻度线基础长度,单位px
    width: width, // 刻度尺宽度(写长20px是为了最后一个刻度值能被显示出来)
    height: 40, // 刻度尺高度
  });

  const draw = (cxt: CanvasRenderingContext2D, config: configVo) => {
    const size = config.size || 101;
    const x = config.x || 0;
    const y = config.y || 0;
    const w = config.w || 10;
    const h = config.h || 10;
    let offset = 3; // 数字的偏移量

    // 画之前清空画布
    cxt.clearRect(0, 0, config.width, config.height);

    // 设置画笔属性
    cxt.strokeStyle = '#aaa'; // 画笔颜色
    cxt.lineWidth = 1; // 画笔大小
    cxt.font = '12'; //字体大小

    // 画刻度线
    for (let i = 0; i < size; i++) {
      // 开始一条路径
      cxt.beginPath();
      // 移动到指定位置
      cxt.moveTo(x + i * w, y);
      // 满10刻度时刻度线长一些 并且在上方表明刻度
      if (i % 10 == 0) {
        // 计算偏移量
        offset = (String(i / 10).length * 6) / 2; // 数字的长度为：String(i / 10).length， /2 是为了居中
        cxt.fillText(i + '', x + i * w, y + h * 3.5); // 数字
        cxt.lineTo(x + i * w, y + h * 2); // 刻度线长（2h）
      } else {
        // 满5刻度(刻度线长：1.5h)时的刻度线略长于1刻度（刻度线长1h）的
        cxt.lineTo(x + i * w, y + (i % 5 === 0 ? 1.5 : 1) * h);
      }
      // 画出路径
      cxt.stroke();
    }
  };

  const getWrapperSize = useCallback(() => {
    const canvas = document.getElementById('rule');
    if (!canvas) return;

    setConfig({
      ...config,
      w: window.innerWidth / 100,
    });
    canvas.setAttribute('width', window.innerWidth + 'px');
    setWidth(window.innerWidth);
  }, []);

  useEffect(() => {
    setTimeout(() => {
      getWrapperSize();
    }, 100);

    window.addEventListener('resize', getWrapperSize);
    return () => {
      window.removeEventListener('resize', getWrapperSize);
    };
  }, []);

  useEffect(() => {
    const canvas = document.getElementById('rule') as HTMLCanvasElement;
    if (!canvas) return;

    const cxt = canvas.getContext('2d') as CanvasRenderingContext2D;
    draw(cxt, config);
  }, [width, config]);

  return (
    <canvas
      id="rule"
      height="40"
      width="1020"
      style={{ position: 'absolute' }}></canvas>
  );
};

export default Rule;
HTML5 Canvas刻度尺动画插件 可定制多种主题样式.zip
11-03
在这个"HTML5 Canvas刻度尺动画插件 可定制多种主题样式.zip"压缩包中，我们很显然会找到一个专为Canvas设计的刻度尺动画插件，这个插件能够帮助开发者轻松地在网页上创建具有动态效果的刻度尺，并且可以根据需求...
canvas+svg实现标尺网格效果
04-11
使用js+canvas绘图，结合svg图形，实现标尺栏和网格效果。
canvas绘制标尺
jarisMA的博客
08-29 4657
canvas绘制标尺eg:[预览链接](https://jsfiddle.net/jaris/gz06j95p/) 发布时间： 2019-02-19 16:38:39 /** * canvas 绘制标尺 * * params:{*} * axisWidth:Number,轴线的宽度，单位px * lineColor:String,轴线的颜色 * grid...
canvas-scale:采用Canvas绘制的一个可配置的刻度(尺)组件
05-06
canvas-scale 采用Canvas绘制的一个可配置的刻度(尺)组件。 主要常用于移动端数值、金额等的滑动选择，增强用户交互体验。 刻度组件 demo，效果图： 链接 采用Canvas绘制一个可配置的刻度(尺)组件：; github地址： 演示地址： 说明 本刻度组件支持的功能： 采用canvas绘制组件，解决移动端绘制模糊问题， 支持刻度尺基本参数配置传入， 监听滑动事件，滑动时实时输出刻度值，同时支持根据外部值动态设置刻度， 支持平滑/缓动滑动、实时绘制刻度， 兼容移动端/pc端滑动， 支持的传入的可配置项参数： // 默认配置 const default_conf = { // width: '', // 不支持设置，取容器宽度 height: 50, // 画布高度 start: 1000, // 刻度开始值 end: 10000, // 刻度结束值 /
canvas实现刻度尺
weixin_48213294的博客
05-24 2709
canvas实现刻度尺
Canvas实现时间刻度标尺功能
绳墨BigHead
02-19 3995
Canvas实现时间刻度标尺功能 前言:项目中需要实现一个时间标尺的功能,展示某个人在某段时间内已经被订单占用的时间,并且展示当前订单在标尺中的占用位置,大概为下图的样子 大概的实现逻辑如下: 计算时间刻度跨度。canvas总宽度为320,高度为40,注意,canvas的宽度不能使用css来写,会导致计算混乱,直接写在标签内,一共显示8个时间区域，所以每个刻度之间的宽度为320/8=40 利用canvas画一条线,X轴起点为0,终点点为320,Y轴起终点都是25,只所以不放到最底下,是因为需要给显示时间
ruler:小程序canvas刻度尺
05-13
ruler 小程序canvas刻度尺 小程序文档规定不能再scroll-view里面放置canvas，在网上搜到的都是放置在scroll-view里面的，所以自己动手写了一个，文件里面已经做好注释。
绘制刻度尺
08-29
基于对话框的MFC程序，主要绘制了一个水平方向和一个竖直方向的刻度尺。
小程序Canvas刻度尺实现与限制突破
标题“ruler:小程序canvas刻度尺”指明了本文档所介绍的内容主要关注点是小程序（这里主要指微信小程序）中如何实现一个使用canvas元素来展示刻度尺的功能。 - **小程序canvas**: 这里指的是微信小程序中的一个绘图...
canvas--标尺
蒲厷渶と戀的博客
05-31 6616
项目开发过程中，会遇到标尺的功能，标尺可以通过canvas来实现，具体实现如下：1、html代码：&lt;canvas id='canvas' width='800' height='800' /&gt;2、css代码：body {     background: #eeeeee; } #canvas {     background: #ffffff;     cursor: pointer; ...
自定义代码实现刻度尺、标尺
10-30
水平刻度尺，可以根据用户实际需要进行设置，现已实现2分隔和10分隔，有需要的可以下载，大家一起完善
Html+JavaScript 在canvas上绘制带日期显示的时钟 (自己绘制刻度)
11-11
Html+JavaScript 在canvas上绘制带日期显示的时钟 (自己绘制刻度)。 想了解此框架以及程序结果图的，可以去博客看一看，再决定下载与否。
刻度标尺.html
07-30
用dl dt dd实现的标尺，代码超级简单，可在此基础上随意修改。
利用Canvas进行绘制XY坐标系
weixin_34228617的博客
07-10 737
首先来一发图 绘制XY的坐标主要是利用Canvas setLeft和setBottom功能（Canvas内置坐标的功能） 1.首先WPF中的坐标系都是从左到右，从上到下的 即左上角位置(0,0)点,所以XY的Canvas要以(RenderTransformOrigin="0,0",为中心点)进行270°旋转，然后平移<TranslateTransform Y="{Binding Ac...
canvas绘制刻度尺
最新发布
qq_32051663的博客
08-01 1449
指示线居中的刻度尺
原生js + canvas 实现刻度尺效果
自酌一杯酒
12-10 6769
手势事件 touchstart 手指按下 、touchmove 手指移动 、 touchend 手指抬起 效果图： 完整代码： ruler.js var ruler = { /** * 初始化刻度尺插件 * @el 容器 String * @height 刻度尺高度 Number * @maxScale 最大刻度 Number * ...
canvas在刻度直尺上实现可拖动的时间指针效果
qq_37656005的博客
04-20 1022
效果图： html代码： <style> .line-wrapper { width: 700px; position: relative; margin: 10px 0; } .line { position: absolute; padding-left: 5px; height: 120px; top: 0; cursor: ew-res
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值