ruler刻度尺

示例

Image text

代码

vue

<template>
  <div
    class="md-ruler"
    @touchstart="$_startDrag"
    @touchend="$_stopDrag"
  >
    <canvas
      class="md-ruler-canvas"
      ref="canvas"
    ></canvas>
    <div
      class="md-ruler-cursor"
      :class="[isStepTextBottom && 'md-ruler-cursor-bottom']"
    ></div>
    <div class="md-ruler-arrow"></div>
  </div>
</template>

<script>
  import Scroller from './scroller'
  import { throttle, noop } from './index'

  export default {
    name: 'md-ruler',
    emits: ['update:modelValue', 'change'],
    props: {
      modelValue: { // 双向绑定的值
        type: Number,
        default: 0
      },
      scope: { // 刻度尺范围
        type: Array,
        default: () => [0, 100]
      },
      step: { // 刻度尺每一大格步数
        type: Number,
        default: 10
      },
      unit: { // 刻度尺每一小格步数
        type: Number,
        default: 1
      },
      min: { // 最小可滑动位置
        type: Number,
        default: 0
      },
      max: { // 最大可滑动位置
        type: Number,
        default: 100
      },
      stepTextPosition: { // Step标志位置 可选'top', 'bottom'
        type: String,
        default: 'top',
        validator: val => ['top', 'bottom'].includes(val)
      },
      stepTextRender: { // 自定义step文案 自定义函数应该返回字符串
        type: Function,
        default: noop
      }
    },
    data() {
      return {
        clientHeight: 60,
        scroller: null,
        ratio: 2,
        isInitialed: false,
        isDragging: false,
        isScrolling: false,
        x: 0,
        scrollingX: 0,
        blank: 30 // unit blank
      }
    },
    computed: {
      unitCount() {
        const { scope: [min, max], unit } = this
        return Math.ceil((max - min) / unit)
      },
      canvasWidth() {
        return this.$refs.canvas.clientWidth * this.ratio
      },
      realMin() {
        const { scope, min } = this
        const [left, right] = scope
        if (min > right) {
          return left
        }
        return min > left ? min : left
      },
      realMax() {
        const { scope, max } = this
        const [left, right] = scope
        if (left > max) {
          return right
        }
        return max > right ? right : max
      },
      blankLeft() {
        const { scope, realMin, unit, blank } = this
        const [min] = scope
        return Math.ceil((realMin - min) / unit) * blank
      },
      blankRight() {
        const { scope, realMax, unit, blank } = this
        const [, max] = scope
        return Math.ceil((max - realMax) / unit) * blank
      },
      isStepTextBottom() {
        return this.stepTextPosition === 'bottom'
      }
    },
    watch: {
      modelValue() {
        if (this.isScrolling) {
          return
        }
        this.scrollingX = 0
        this.isScrolling = true
        const x = this.$_initX()
        this.$_draw(x)
        this.scroller.scrollTo(x, 0, true)
      }
    },
    mounted() {
      const { $refs } = this
      // without watch ctx
      this.ctx = $refs.canvas.getContext('2d')
      this.$_initCanvas()
      this.x = this.canvasWidth
      this.$_initScroller()
    },
    methods: {
      // MARK: private methods
      $_initCanvas() {
        const { ratio, ctx, canvasWidth, clientHeight, $refs } = this
        const { canvas } = $refs
        canvas.width = canvasWidth
        canvas.height = clientHeight * ratio
        const scale = 1 / ratio
        ctx.scale(scale, 1)
      },
      $_initScroller() {
        const { blankLeft, blankRight, blank, unitCount, canvasWidth, clientHeight } = this
        const drawFn = throttle(this.$_draw, 10)
        const scroller = new Scroller(
          left => {
            if (this.isInitialed) {
              drawFn(left)
            } else {
              this.$_draw(left)
            }
          },
          {
            scrollingX: true,
            scrollingY: false,
            snapping: true,
            snappingVelocity: 1,
            animationDuration: 200,
            inRequestAnimationFrame: true,
            scrollingComplete: () => {
              this.isScrolling = false
            }
          }
        )

        // set real scroll width
        const innerWidth = unitCount * blank + canvasWidth - blankLeft - blankRight
        const x = this.$_initX()
        this.$_draw(x)
        scroller.setDimensions(canvasWidth, clientHeight, innerWidth, clientHeight)
        scroller.setSnapSize(blank, 0)
        scroller.scrollTo(x, 0, false)
        this.scroller = scroller
        this.isInitialed = true
      },
      $_initX() {
        const { modelValue, scope, realMin, realMax, unit, blank, unitCount, canvasWidth } = this
        const [min] = scope
        this.x = canvasWidth - Math.ceil((realMin - min) / unit) * blank
        if (modelValue <= realMin) {
          return 0
        } else if (modelValue >= realMax) {
          return unitCount * blank
        } else {
          return Math.ceil((modelValue - realMin) / unit) * blank
        }
      },
      $_draw(left) {
        left = +left.toFixed(2)
        const { ctx, ratio, scrollingX, canvasWidth, clientHeight } = this
        this.scrollingX = left
        this.x += scrollingX - left
        // clear canvas
        const scale = ratio * ratio
        ctx.clearRect(0, 0, canvasWidth * scale, clientHeight * scale)
        this.$_drawLine()
      },
      $_drawLine() {
        const { ctx, x, scope, step, unit, ratio, blank, unitCount, isStepTextBottom } = this
        const { blankLeft, blankRight, canvasWidth } = this
        const [scopeLeft] = scope
        const _fontSize = 22
        const _y = 120 - (isStepTextBottom ? _fontSize + 40 : 0)
        const _stepUnit = Math.round(step / unit)
        ctx.lineWidth = 2
        ctx.font = `${_fontSize *
          ratio}px DIN Alternate, "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif`
        for (let i = 0; i <= unitCount; i++) {
          const _x = x + i * blank
          if (_x < 0 || _x > canvasWidth * 2) {
            continue
          }
          // over range use another color
          const outRange = _x < x + blankLeft || _x > x + 1 + unitCount * blank - blankRight
          if (outRange) {
            ctx.fillStyle = '#E2E4EA'
            ctx.strokeStyle = '#E2E4EA'
          } else {
            ctx.fillStyle = '#C5CAD5'
            ctx.strokeStyle = '#858B9C'
          }
          ctx.beginPath()
          ctx.moveTo(_x, _y)
          if (i % _stepUnit === 0) {
            // draw text
            const text = this.$_matchStepText(scopeLeft + unit * i)
            const textOffset = String(text).length * _fontSize / 2
            ctx.fillText(text, _x - textOffset, _fontSize * ratio + (isStepTextBottom ? 70 : 0))
            // draw line
            ctx.lineTo(_x, _y - 40)
          } else {
            ctx.lineTo(_x, _y - 20)
          }
          ctx.stroke()
        }
        // draw base line
        ctx.strokeStyle = '#E2E4EA'
        ctx.beginPath()
        ctx.moveTo(x, _y)
        ctx.lineTo(x + unitCount * blank, _y)
        ctx.stroke()
        this.$_updateValue()
      },
      $_matchStepText(step) {
        const match = this.stepTextRender(step)
        return match !== undefined && match !== null ? match : step
      },
      $_startDrag(event) {
        if (this.isDragging) {
          return
        }
        event.preventDefault()
        event.stopPropagation()
        this.scroller.doTouchStart(event.touches, event.timeStamp)
        this.isDragging = true
        this.isScrolling = true
        window.addEventListener('touchmove', this.$_onDrag)
      },
      $_onDrag(event) {
        event.preventDefault()
        event.stopPropagation()
        if (!this.isDragging) {
          return
        }
        this.scroller.doTouchMove(event.touches, event.timeStamp, event.scale)
      },
      $_stopDrag(event) {
        event.preventDefault()
        event.stopPropagation()
        this.isDragging = false
        this.scroller.doTouchEnd(event.timeStamp)
        window.removeEventListener('touchmove', this.$_onDrag)
      },
      $_updateValue() {
        if (!this.isInitialed) {
          return
        }
        const { x, scope: [min], realMin, realMax, unit, blank, canvasWidth } = this
        if (x > canvasWidth) {
          this.$_onInput(realMin)
          return
        }
        const _x = x >= 0 ? Math.abs(x - canvasWidth) : Math.abs(x) + canvasWidth
        let modelValue = min + Math.round(_x / blank) * unit
        modelValue > realMax && (modelValue = realMax)
        modelValue < realMin && (modelValue = realMin)
        this.$_onInput(modelValue)
      },
      // MARK: events handler, 如 $_onButtonClick
      $_onInput(value) {
        this.$emit('update:modelValue', value)
        this.$emit('change', value)
      }
    }
  }
</script>

<style scoped lang="scss">
  .md-ruler{
    position: relative;
    padding: 36px 0 20px;
    width: 100%;
    height: 142px;
    box-sizing: border-box;
    .md-ruler-canvas{
      width: 100%;
      height: 60px;
    }
    .md-ruler-cursor{
      z-index: 10;
      position: absolute;
      top: 26px;
      left: 50%;
      width: 2px;
      height: 70px;
      transform: translate(-50%);
      background-color: #2F86F6;
      box-shadow: 0 2px 4px #2F86F6;
    }
    .md-ruler-cursor-bottom{
      height: 40px;
    }
    .md-ruler-arrow{
      z-index: 10;
      position: absolute;
      bottom: 25px;
      left: 50%;
      border-bottom: 10px solid #2F86F6;
      border-left: 10px solid transparent;
      border-right: 10px solid transparent;
      transform: translate(-50%);
    }
  }
</style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334

Props

参数	说明	类型	可选值	默认值
v-model	双向绑定的值	Number	—	0
scope	刻度尺范围	Number[]	—	[0, 100]
step	刻度尺每一大格步数	Number	—	10
unit	刻度尺每一小格步数	Number	—	1
min	最小可滑动位置	Number	—	100
max	最大可滑动位置	Number	—	0
stepTextPosition	Step标志位置	String	'top', 'bottom'	'top'
stepTextRender	自定义step文案	Function	自定义函数应该返回字符串	noop

详细的文档地址：https://didi.github.io/mand-mobile/#/zh-CN/docs/components/business/ruler

使用

基本

vue

<template>
  <div class="md-example-child md-example-child-single-component">
    <p>当前值：{{ value }}</p>
    <div class="container">
      <md-ruler
        :scope="scope"
        :step="100"
        :unit="10"
        v-model="value"
      ></md-ruler>
    </div>
  </div>
</template>

<script>
import {Ruler} from 'mand-mobile'

export default {
  name: 'ruler-demo-0',
  /* DELETE */
  title: '基本',
  titleEnUS: 'Basic',
  message: '请在移动设备中扫码预览',
  messageEnUS: 'Please scan QR code and preview on mobile device',
  /* DELETE */
  components: {
    [Ruler.name]: Ruler,
  },
  data() {
    return {
      value: 1000,
      scope: [1000, 2000],
    }
  },
}

</script>

<style lang="stylus" scoped>
.md-example-child-single-component
  .container
    margin 0 auto
    width 640px
</style>

自定义step展示文案

Image text

vue

<template>
  <div class="md-example-child md-example-child-single-component">
    <p>当前值：{{ value }}</p>
    <div class="container">
      <md-ruler
        v-model="value"
        :scope="scope"
        :step="100"
        :unit="10"
        :step-text-render="stepTextRender"
      ></md-ruler>
    </div>
  </div>
</template>

<script>
import {Ruler} from 'mand-mobile'

export default {
  name: 'ruler-demo',
  /* DELETE */
  title: '自定义step展示文案',
  titleEnUS: 'Custom step text',
  message: '请在移动设备中扫码预览',
  messageEnUS: 'Please scan QR code and preview on mobile device',
  /* DELETE */
  components: {
    [Ruler.name]: Ruler,
  },
  data() {
    return {
      value: 1300,
      scope: [1000, 2000],
    }
  },
  methods: {
    stepTextRender(step) {
      return step + 'cm'
    },
  },
}

</script>

<style lang="stylus" scoped>
  .md-example-child-single-component
    .container
      margin 0 auto
      width 640px
</style>

自定义step展示位置

Image text

vue

<template>
  <div class="md-example-child md-example-child-single-component">
    <p>当前值：{{ value }}</p>
    <div class="container">
      <md-ruler
        v-model="value"
        step-text-position="bottom"
        :scope="scope"
        :step="100"
        :unit="10"
      ></md-ruler>
    </div>
  </div>
</template>

<script>
import {Ruler} from 'mand-mobile'

export default {
  name: 'ruler-demo',
  /* DELETE */
  title: '自定义step展示位置',
  titleEnUS: 'Custom step positon',
  message: '请在移动设备中扫码预览',
  messageEnUS: 'Please scan QR code and preview on mobile device',
  /* DELETE */
  components: {
    [Ruler.name]: Ruler,
  },
  data() {
    return {
      value: 1300,
      scope: [1000, 2000],
    }
  },
}

</script>

<style lang="stylus" scoped>
  .md-example-child-single-component
    .container
      margin 0 auto
      width 640px
</style>

ruler刻度尺 ​

示例 ​

代码 ​

Props ​

使用 ​

基本 ​

自定义step展示文案 ​

自定义step展示位置 ​

ruler刻度尺

示例

代码

Props

使用

基本

自定义step展示文案

自定义step展示位置