You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
66 lines
1.8 KiB
66 lines
1.8 KiB
define (function() {
|
|
function Progress(size, color, progress, target) {
|
|
this.size = size
|
|
this.color = color
|
|
this.progress = progress
|
|
this.target = target
|
|
|
|
this.draw = function() {
|
|
target.innerHTML = '<canvas id="progressCircle"></canvas>'
|
|
var canvasCSS =
|
|
'#progressCircle {\
|
|
position: absolute;\
|
|
transform: rotate(-90deg) rotateX(180deg);\
|
|
top: 0px;\
|
|
left: 0px;\
|
|
} '
|
|
var styleSheet = window.document.styleSheets[0]
|
|
styleSheet.insertRule(canvasCSS, styleSheet.cssRules.length)
|
|
|
|
this.canvas = document.getElementById('progressCircle')
|
|
this.canvas.width = this.size
|
|
this.canvas.height = this.size
|
|
this.ctx = this.canvas.getContext('2d')
|
|
this.ctx.clearRect(0, 0, window.innerWidth, window.innerHeight)
|
|
this.ctx.beginPath()
|
|
this.ctx.arc(
|
|
this.canvas.width / 2,
|
|
this.canvas.height / 2,
|
|
this.size / 4,
|
|
0,
|
|
Math.PI*2*this.progress,
|
|
false
|
|
)
|
|
this.ctx.lineWidth = this.size / 2
|
|
this.ctx.strokeStyle = this.color
|
|
this.ctx.stroke()
|
|
}
|
|
|
|
this.update = function(progress) {
|
|
this.ctx.clearRect(0, 0, window.innerWidth, window.innerHeight)
|
|
this.ctx.beginPath()
|
|
this.ctx.arc(
|
|
this.canvas.width / 2,
|
|
this.canvas.height / 2,
|
|
this.size / 4,
|
|
0,
|
|
Math.PI*2*progress,
|
|
false
|
|
)
|
|
this.ctx.lineWidth = this.size / 2
|
|
this.ctx.strokeStyle = this.color
|
|
this.ctx.stroke()
|
|
}
|
|
|
|
this.handleResize = function(size, progress) {
|
|
this.canvas.width = size
|
|
this.canvas.height = size
|
|
this.update()
|
|
}
|
|
this.updateColor = function(color, progress) {
|
|
this.color = color
|
|
this.update(progress)
|
|
}
|
|
}
|
|
return Progress
|
|
})
|