-
Notifications
You must be signed in to change notification settings - Fork 4
/
shape.js
64 lines (52 loc) · 1.53 KB
/
shape.js
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
import { SvgElement } from '@pluginjs/utils'
export default class Shape {
constructor(options) {
this.options = options
const size = String(this.options.size).split(' ')
this.width = size.length > 1 ? size[0] : this.options.size
this.height = size.length > 1 ? size[1] : this.options.size
this.buildSvg()
this.buildTrack()
this.buildBar()
}
buildSvg() {
this.$svg = new SvgElement('svg', {
version: '1.1',
preserveAspectRatio: 'xMinYMin meet',
viewBox: `0 0 ${this.width} ${this.height}`
})
}
buildTrack() {
this.$track = this.createTrack(
this.width,
this.height,
this.options.barsize,
{
stroke: this.options.trackcolor,
fill: this.options.fillcolor,
'stroke-width': this.options.barsize
}
)
this.$svg.appendChild(this.$track)
}
buildBar() {
this.$bar = new SvgElement('path', {
fill: 'none',
'stroke-width': this.options.barsize,
stroke: this.options.barcolor,
'stroke-linejoin': 'round',
'stroke-linecap': 'round'
})
this.$svg.appendChild(this.$bar)
}
drawBar(percenage) {/* eslint-disable-line */
const d = this.$track.getAttribute('d')
return this.$bar.setAttribute('d', d)
}
updateBar(current, full) {
const length = (this.$bar.getTotalLength() * full) / 100
const offset = length * (1 - current / full)
this.$bar.style.strokeDasharray = `${length} ${length - 1}`
this.$bar.style.strokeDashoffset = isNaN(offset) ? length : offset
}
}