dsw_ruler/src/components/dsw-ruler/index.vue

<template>
<div>
  <canvas
    id="ruler"
    :style="{'width': '100%', 'height': '100%', 'position':position}"
    ></canvas>
</div>
</template>

<script>
export default {
  name: 'DswRuler',
  components: {},
  props: {
    minNum: {
      type: Number,
      default: 100
    },
    // position: {
    //   type: String,
    //   default: 'relative',
    //   validator: function(val) {
    //     return ['absolute', 'fixed', 'relative', 'static', 'inherit'].indexOf(val) !== -1
    //   }
    // }, // 规定元素的定位类型
    maxNum: {
      type: Number,
      default: 20
    },
    orientation: {
      type: Number,
      default: 0
    }, // 尺子方位，0为水平，1为垂直
  },
  data() {
    return {
      windowWidth: 0,
      windowHeight: 0,
      unit: 10,
      scale: 1,
    }
  },
  mounted() {
    let canvas = document.getElementById('ruler');
    canvas.addEventListener('mousemove', this.dottedLineMove, true)
    canvas.addEventListener('click', this.dottedLineMove, true)
    this.init();
  },
  methods: {
    init() {
      this.windowHeight = this.height

      // const style = window.getComputedStyle(this.$el.parentNode,null)
      // this.windowWidth = parseInt(style.getPropertyValue('width'), 10)

      console.log(this.windowWidth);
      console.log(this.windowHeight);

      let canvas = document.getElementById('ruler');

      if (this.orientation) {
        this.windowWidth = canvas.getBoundingClientRect().height;
        console.log('windowWidth', this.windowWidth);
        canvas.height = this.windowWidth;
        canvas.width = 20;
      } else {
        this.windowWidth = canvas.getBoundingClientRect().width;
        console.log(this.windowWidth);
        canvas.width = this.windowWidth;
        canvas.height = 20;
      }

      this.scale = this.windowWidth / (this.maxNum - this.minNum);
      this.drawGrid()

    },
    drawGrid() {
      console.log('draw');
      let canvas = document.getElementById('ruler');
      if (!canvas.getContext) return;

      // 方向判定
      let maxPixel = 0
      if (this.orientation) {
        maxPixel = canvas.getBoundingClientRect().height;
      } else {
        maxPixel = canvas.getBoundingClientRect().width;
      }
      // console.log('maxPixel', maxPixel);
      let height = 20

      let rulerLength = this.maxNum - this.minNum;
      let unitSize = maxPixel / rulerLength
      console.log(this.maxNum - this.minNum);
      console.log(unitSize);

      let unit = 40
      if (unitSize < 0.25) {
        unit = 40
      } else if (unitSize < 0.5) {
        unit = 20
      } else if (unitSize < 1) {
        unit = 10
      } else if (unitSize < 2) {
        unit = 5
      } else {
        unit = 2
      }

      console.log(unit);

      let ctx = canvas.getContext("2d");
      ctx.fillStyle = "#ACACAC";
      for (let i = this.minNum; i < this.maxNum; i++) {
        if (i % unit !== 0) continue;
        let lineLength = 2
        if (i % (unit * 10) !== 0) {
          lineLength = 4
        } else {
          ctx.font="10px sans-serif"
          if (this.orientation) {
            // todo
            // ctx.fillText(i, Math.floor(height / 2), (i - this.minNum + Math.floor(unit / 2)) * this.scale);
            ctx.save();
            ctx.translate(Math.floor(height), (i - this.minNum + Math.floor(unit / 2)) * this.scale);
            ctx.rotate(-90*Math.PI/180);
            ctx.fillText(i,4,0);
            ctx.restore();
          } else {
            ctx.fillText(i, (i - this.minNum + Math.floor(unit / 2)) * this.scale, Math.floor(height));
          }
        }

        let x = 0;
        let y = 0;
        let w = 0;
        let h = 0;
        if (this.orientation) {
          y = (i - this.minNum) * this.scale;
          w = Math.floor(height / lineLength)
          h = 2
        } else {
          x = (i - this.minNum) * this.scale;
          w = 2
          h = Math.floor(height / lineLength)
        }
        ctx.fillRect(x, y, w, h);
      }
      ctx.closePath();
    },
    dottedLineMove(e) {
      // let canvas = document.getElementById('ruler').getBoundingClientRect();

      let position = 0;
      if (this.orientation) {
        // console.log(Math.floor((e.pageY) / this.scale) + this.minNum);
        position = Math.floor((e.pageY) / this.scale) + this.minNum
      } else {
        // console.log(Math.floor((e.pageX) / this.scale) + this.minNum);
        position = Math.floor((e.pageX) / this.scale) + this.minNum
      }

      this.$emit('move', position)

    }
  }
}
</script>

<style scoped>
</style>