web完成类似于ps标尺【仅尺子】

我暂时没有支持拖拽，如果有业务需求，后续我会在补充，这个其实就是展示一个尺子；

我这里订的单位是每个小格子20px，200px是一个大格子；

html

	<div class="ruler">
      <div
        v-for="tick in ticks"
        :key="tick"
        class="ruler-line"
        :style="getTickStyle(tick)"
      >
        <span class="tick-text">{{ tick }}</span>
      </div>
    </div>

ts部分
this.imgContentHeight / this.defaultImgContentHeight 这个是因为 我的这个div是包含放大缩小的 但是尺子的总高度不能变化了

 // 尺子样式
  private setTicks () {
    // const divisor = 2 * Math.pow(10, Math.floor(this.imgContentHeight).toString().length - 5);
    const divisor = 20; // 一个小格子为20
    // this.divisor = 2 * Math.pow(10, Math.floor(this.imgContentHeight).toString().length - 4);
    this.divisor = 200; // 一个大格子为200
    const length = Math.ceil(this.imgContentHeight / divisor);
    this.ticks = Array.from({ length }, (_, index) => index * divisor);
  }

  private getTickStyle (tick) {
    return {
      top: tick / (1 / (this.imgContentHeight / this.defaultImgContentHeight)) + 'px',
      width: tick % this.divisor === 0 ? '16px' : tick % (this.divisor / 2) === 0 ? '4px' : '2px',
      fontSize: this.multiples !== 0.2 ? tick % this.divisor === 0 ? '12px' : '0' : tick % (this.divisor * 2) === 0 ? '12px' : '0'
    };
  }

css

.ruler {
  width: 16px;
  height: 100%;
  background-color: #000;
  position: relative;
}

.ruler-line {
  position: absolute;
  right: 0px;
  border-top: 1px solid #fff;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  padding-right: 5px;
}

.tick-text {
  right: -1px;
  bottom: -22px;
  color: #fff;
  transform: rotate(180deg);
  position: absolute;
  writing-mode: vertical-lr;
}