vue实现图片上刻度尺功能，原生css

需要实现如上图的刻度尺标注功能（带刻度尺，标注点到终点的距离）直接上代码

功能需求

1. 根据长度填充中间内容图片
2. 底部有刻度尺标识长度
3. 整体根据屏幕宽度自动缩放适应（只有中间适应，两头固定）
4. 在图示上标识点位，并标刻其到末端的距离

1、画图

<template>
  <div ref="zoomable" class="zoomable">
    <!--  :style="'width:' + allLength + 'px'" -->
    <div ref="content" class="content">
      <div class="reginNameDiv">图示名称</div>
      <div class="inlinMindle"><img alt="" :src="headImg" /></div>

      <div class="inlinMindle" :style="'width:' + haveIntoLenght + 'px'">
        <img v-for="item in needCenterImgNum" :key="item" alt="" :src="centerImg" />
          <!-- 掌子面 -->
          <div class="zhangzimina tipImg">
            <p>{{ haveIntoLenght }}</p>
            <div class="icoImg">
              <img alt="" :src="require('@/assets/stepImg_zhangzimian.png')" />
            </div>
            <p>终点</p>
          </div>
          <!-- 二衬 -->
          <div class="lineShow lineShow1">
            <LinkMark :line-color="'#5efd03'" :line-width="erLength" :scale-num="scaleNum" />
          </div>
          <div class="erchen tipImg" :style="'right:' + erLength * scaleNum + 'px'">
            <p>{{ Number(orginData.secondliningJumbo).toFixed(1) }}</p>
            <div class="icoImg">
              <img alt="" :src="require('@/assets/stepImg_erchen.png')"  />
            </div>
            <p>第一点</p>
          </div>
          <!-- 仰供 -->
          <div class="lineShow lineShow2">
            <LinkMark :line-color="'#5efd03'" :line-width="ygLength" :scale-num="scaleNum" :text-posioton="2" />
          </div>
          <div class="yanggong tipImg" :style="'right:' + ygLength * scaleNum + 'px'">
            <p>{{ Number(orginData.invertedarch).toFixed(1) }}</p>
            <div class="icoImg">
              <img alt="" :src="require('@/assets/stepImg_yanggong.png')"  />
            </div>
            <p>第二点</p>
          </div>  
      </div>
      <div class="inlinMindle">
        <img alt="" :src="footImg" />
        <!-- <img v-for="item in needFootImgNum" :key="item" alt="" :src="footImg" /> -->
      </div>
      <!-- 刻度尺 -->
      <RuleCom :actual-length="actualLength" :all-length="haveIntoLenght" :scale-num="scaleNum" />
    </div>
  </div>
</template>

刻度尺组件

<template>
  <div class="rulePage" :style="'width:' + allLength + 'px'">
    <div v-for="item in allPart" :key="item" class="inlinTop inlinBorder" :style="'width:' + widthData * scaleNum + 'px'">
      <div class="showTip">
        {{ (item - 1) * (widthData + 1) }}
      </div>
    </div>
    <div class="inlinTop inlinBorder" :style="'width:' + noOverWidth * scaleNum + 'px'">
      <div class="showTip">{{ allPart * (widthData + 1) }}</div>
    </div>
    <div v-if="!haveOver" class="inlinTop inlinBorder">
      <div class="showTip">{{ actualLength }}</div>
    </div>
  </div>
</template>

标注

<template>
  <div class="lineMarkCom">
    <!-- 第一个点 -->
    <div v-if="textPosioton == 1" class="textClass" :style="'width:' + lineWidth * scaleNum + 'px'">{{ lineWidth.toFixed(1) }}</div>
    <div
      class="point point1 inlinMindle"
      :style="'border-right: ' + lineBorder + 'px solid ' + lineColor + ';height: ' + pointHeight + 'px'"
    ></div>
    <div
      class="line inlinMindle"
      :style="'width:' + lineWidth * scaleNum + 'px;border-bottom: ' + lineBorder + 'px solid ' + lineColor"
    ></div>
    <div
      class="point point2 inlinMindle"
      :style="'border-left: ' + lineBorder + 'px solid' + lineColor + ';height: ' + pointHeight + 'px'"
    ></div>
    <div v-if="textPosioton == 2" class="textClass" :style="'width:' + lineWidth * scaleNum + 'px'">{{ lineWidth.toFixed(1) }}</div>
  </div>
</template>

特别说明：因为涉及到具体项目，有些名词是根据项目而来，依据实际情况出发

完整例子见附件