当前位置：首页 > VUE

vue实现背景标尺

2026-02-18 23:30:53VUE

Vue 实现背景标尺的方法

在 Vue 中实现背景标尺功能可以通过 CSS 和 Vue 的动态绑定特性结合实现。以下是几种常见的方法：

使用 CSS 线性渐变

通过 CSS 的 linear-gradient 可以快速生成标尺背景，适用于简单的水平或垂直标尺。

vue实现背景标尺

<template>
  <div class="ruler-container"></div>
</template>

<style>
.ruler-container {
  width: 100%;
  height: 30px;
  background: linear-gradient(to right, 
    #000 0%, 
    #000 1%, 
    transparent 1%, 
    transparent 99%, 
    #000 99%, 
    #000 100%
  );
  background-size: 10px 100%;
}
</style>

动态生成刻度线

通过 Vue 的 v-for 动态生成刻度线，适合需要灵活控制刻度间距和样式的场景。

vue实现背景标尺

<template>
  <div class="ruler">
    <div 
      v-for="i in totalTicks" 
      :key="i" 
      class="tick"
      :style="{ left: `${i * tickInterval}px` }"
    ></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      totalTicks: 50,
      tickInterval: 10
    };
  }
};
</script>

<style>
.ruler {
  position: relative;
  height: 20px;
  border-bottom: 1px solid #ccc;
}

.tick {
  position: absolute;
  bottom: 0;
  width: 1px;
  height: 5px;
  background: #333;
}
</style>

结合 Canvas 绘制

对于复杂的标尺（如带数字标注或双向标尺），可以使用 Canvas 动态绘制。

<template>
  <canvas ref="rulerCanvas" class="ruler-canvas"></canvas>
</template>

<script>
export default {
  mounted() {
    this.drawRuler();
  },
  methods: {
    drawRuler() {
      const canvas = this.$refs.rulerCanvas;
      const ctx = canvas.getContext('2d');
      canvas.width = 800;
      canvas.height = 30;

      ctx.strokeStyle = '#000';
      for (let i = 0; i <= 80; i++) {
        const x = i * 10;
        ctx.beginPath();
        ctx.moveTo(x, 0);
        ctx.lineTo(x, i % 5 === 0 ? 15 : 10);
        ctx.stroke();
      }
    }
  }
};
</script>

<style>
.ruler-canvas {
  border: 1px solid #eee;
}
</style>

使用 SVG 实现矢量标尺

SVG 适合需要缩放且保持清晰度的标尺，支持动态生成刻度。

<template>
  <svg class="svg-ruler" width="100%" height="30">
    <line 
      v-for="i in ticks" 
      :key="i" 
      :x1="i * 10" 
      y1="0" 
      :x2="i * 10" 
      :y2="i % 5 === 0 ? 20 : 10" 
      stroke="#333"
    />
  </svg>
</template>

<script>
export default {
  data() {
    return {
      ticks: Array.from({ length: 50 }, (_, i) => i)
    };
  }
};
</script>