js实现尺子

使用Canvas实现动态尺子

在JavaScript中，通过Canvas可以绘制一个可交互的尺子。以下是一个基础实现示例：

const canvas = document.getElementById('rulerCanvas');
const ctx = canvas.getContext('2d');
const scale = window.devicePixelRatio || 1;
const width = 800;
const height = 60;

canvas.style.width = `${width}px`;
canvas.style.height = `${height}px`;
canvas.width = width * scale;
canvas.height = height * scale;
ctx.scale(scale, scale);

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

  // 绘制主刻度
  for (let i = 0; i < width; i += 50) {
    ctx.beginPath();
    ctx.moveTo(i, 0);
    ctx.lineTo(i, 30);
    ctx.stroke();
    ctx.fillText(i, i - 10, 45);
  }

  // 绘制次刻度
  for (let i = 0; i < width; i += 10) {
    if (i % 50 !== 0) {
      ctx.beginPath();
      ctx.moveTo(i, 0);
      ctx.lineTo(i, 20);
      ctx.stroke();
    }
  }
}

drawRuler();

实现可拖拽尺子

添加鼠标事件处理实现拖拽功能：

let isDragging = false;
let startX = 0;
let offsetX = 0;

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

window.addEventListener('mousemove', (e) => {
  if (!isDragging) return;
  offsetX += e.clientX - startX;
  startX = e.clientX;
  drawRuler();
});

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

function drawRuler() {
  ctx.clearRect(0, 0, width, height);
  ctx.save();
  ctx.translate(offsetX % 50, 0);

  // 绘制刻度逻辑...
  ctx.restore();
}

添加垂直刻度线

在水平尺基础上添加垂直指示线：

let currentPosition = 0;

function drawVerticalLine(pos) {
  ctx.strokeStyle = 'red';
  ctx.lineWidth = 2;
  ctx.beginPath();
  ctx.moveTo(pos, 0);
  ctx.lineTo(pos, height);
  ctx.stroke();
}

canvas.addEventListener('click', (e) => {
  const rect = canvas.getBoundingClientRect();
  currentPosition = e.clientX - rect.left;
  drawRuler();
  drawVerticalLine(currentPosition);
});

响应式尺子实现

使用CSS和JavaScript使尺子适应不同屏幕尺寸：

function resizeRuler() {
  const container = document.getElementById('rulerContainer');
  width = container.clientWidth;

  canvas.style.width = `${width}px`;
  canvas.width = width * scale;
  drawRuler();
}

window.addEventListener('resize', resizeRuler);

添加单位切换功能

实现厘米/英寸单位切换：

let unit = 'cm';
const cmToInchRatio = 0.393701;

function toggleUnit() {
  unit = unit === 'cm' ? 'inch' : 'cm';
  drawRuler();
}

function drawRuler() {
  // ...
  for (let i = 0; i < width; i += 50) {
    const value = unit === 'cm' ? i : (i * cmToInchRatio).toFixed(1);
    ctx.fillText(value, i - 10, 45);
  }
  // ...
}

这些代码片段展示了如何创建一个基础的Canvas尺子，并逐步添加拖拽、垂直指示线、响应式和单位切换等高级功能。可以根据实际需求调整刻度间隔、样式和交互行为。