当前位置：首页 > JavaScript

js实现标尺

2026-04-06 00:35:03JavaScript

实现标尺的 JavaScript 方法

使用 Canvas 绘制标尺

通过 HTML5 Canvas 绘制标尺，适合需要自定义样式和交互的场景。

js实现标尺

const canvas = document.getElementById('rulerCanvas');
const ctx = canvas.getContext('2d');
const scale = 1; // 缩放比例
const startX = 50; // 起始位置

function drawRuler() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.strokeStyle = '#000';
  ctx.lineWidth = 1;

  // 绘制标尺基线
  ctx.beginPath();
  ctx.moveTo(0, 30);
  ctx.lineTo(canvas.width, 30);
  ctx.stroke();

  // 绘制刻度
  for (let i = 0; i < canvas.width; i += 10 * scale) {
    ctx.beginPath();
    ctx.moveTo(startX + i, 30);
    ctx.lineTo(startX + i, i % 50 === 0 ? 10 : 20);
    ctx.stroke();

    // 添加刻度数字
    if (i % 50 === 0) {
      ctx.font = '10px Arial';
      ctx.fillText(i/scale, startX + i - 5, 8);
    }
  }
}
drawRuler();

使用 CSS 和 DOM 实现简单标尺

适用于轻量级需求，通过 HTML 和 CSS 快速实现。

js实现标尺

<div class="ruler">
  <div class="cm"></div>
  <div class="mm"></div>
</div>

<style>
.ruler {
  position: relative;
  height: 30px;
  border-bottom: 1px solid #000;
}
.cm::before {
  content: attr(data-value);
  position: absolute;
  bottom: 15px;
  font-size: 10px;
}
.mm {
  position: absolute;
  bottom: 0;
  height: 5px;
  border-left: 1px solid #000;
}
</style>

<script>
const ruler = document.querySelector('.ruler');
for (let i = 0; i < 100; i++) {
  const mm = document.createElement('div');
  mm.className = 'mm';
  mm.style.left = `${i * 10}px`;
  ruler.appendChild(mm);

  if (i % 10 === 0) {
    const cm = document.createElement('div');
    cm.className = 'cm';
    cm.setAttribute('data-value', i/10);
    cm.style.left = `${i * 10 - 5}px`;
    ruler.appendChild(cm);
  }
}
</script>

响应式标尺实现

添加窗口大小变化时的自适应处理。

window.addEventListener('resize', () => {
  if (canvas) {
    canvas.width = window.innerWidth;
    drawRuler();
  }
});

添加交互功能

实现标尺拖拽和缩放功能。

let isDragging = false;
let lastX = 0;

canvas.addEventListener('mousedown', (e) => {
  isDragging = true;
  lastX = e.clientX;
});

canvas.addEventListener('mousemove', (e) => {
  if (isDragging) {
    startX += e.clientX - lastX;
    lastX = e.clientX;
    drawRuler();
  }
});

canvas.addEventListener('mouseup', () => {
  isDragging = false;
});

canvas.addEventListener('wheel', (e) => {
  e.preventDefault();
  scale += e.deltaY * -0.01;
  scale = Math.min(Math.max(0.1, scale), 4);
  drawRuler();
});