backup: snapshot before optimization
This commit is contained in:
@@ -0,0 +1,93 @@
|
||||
var util = require('../../utils/util')
|
||||
|
||||
Component({
|
||||
properties: {
|
||||
duration: { type: Number, value: 60 },
|
||||
remaining: { type: Number, value: 60 },
|
||||
size: { type: Number, value: 280 },
|
||||
ringWidth: { type: Number, value: 14 },
|
||||
status: { type: String, value: 'idle' },
|
||||
primaryColor: { type: String, value: '#FF6B35' },
|
||||
primaryLightColor: { type: String, value: '#FF8C5A' }
|
||||
},
|
||||
|
||||
data: {
|
||||
displayTime: '00:00',
|
||||
statusText: '准备开始'
|
||||
},
|
||||
|
||||
observers: {
|
||||
'remaining, status, duration, size, ringWidth, primaryColor': function () {
|
||||
var texts = { idle: '准备开始', running: '坚持住', paused: '已暂停', completed: '完成!' }
|
||||
this.setData({
|
||||
displayTime: util.formatTime(this.data.remaining),
|
||||
statusText: texts[this.data.status] || ''
|
||||
})
|
||||
this._draw()
|
||||
}
|
||||
},
|
||||
|
||||
lifetimes: {
|
||||
ready: function () {
|
||||
var self = this
|
||||
var query = this.createSelectorQuery()
|
||||
query.select('#ringCanvas')
|
||||
.fields({ node: true, size: true })
|
||||
.exec(function (res) {
|
||||
if (!res || !res[0] || !res[0].node) return
|
||||
var canvas = res[0].node
|
||||
var dpr = wx.getSystemInfoSync().pixelRatio || 2
|
||||
var displaySize = self.data.size
|
||||
canvas.width = displaySize * dpr
|
||||
canvas.height = displaySize * dpr
|
||||
self._ctx = canvas.getContext('2d')
|
||||
self._dpr = dpr
|
||||
self._draw()
|
||||
})
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
_draw: function () {
|
||||
var ctx = this._ctx
|
||||
if (!ctx) return
|
||||
|
||||
var size = this.data.size
|
||||
var dpr = this._dpr
|
||||
var ringWidth = this.data.ringWidth
|
||||
var duration = this.data.duration
|
||||
var remaining = this.data.remaining
|
||||
var primaryColor = this.data.primaryColor
|
||||
|
||||
var w = size * dpr
|
||||
var h = size * dpr
|
||||
ctx.clearRect(0, 0, w, h)
|
||||
|
||||
var cx = w / 2
|
||||
var cy = h / 2
|
||||
var radius = (size - ringWidth) / 2 * dpr
|
||||
var lw = ringWidth * dpr
|
||||
|
||||
// track ring
|
||||
ctx.beginPath()
|
||||
ctx.arc(cx, cy, radius, 0, Math.PI * 2)
|
||||
ctx.strokeStyle = '#EEEEEE'
|
||||
ctx.lineWidth = lw
|
||||
ctx.lineCap = 'round'
|
||||
ctx.stroke()
|
||||
|
||||
// progress arc (clockwise from 12 o'clock, represents remaining time)
|
||||
var ratio = duration > 0 ? Math.max(0, Math.min(1, remaining / duration)) : 0
|
||||
if (ratio > 0.001) {
|
||||
var startAngle = -Math.PI / 2
|
||||
var endAngle = startAngle + ratio * Math.PI * 2
|
||||
ctx.beginPath()
|
||||
ctx.arc(cx, cy, radius, startAngle, endAngle)
|
||||
ctx.strokeStyle = primaryColor
|
||||
ctx.lineWidth = lw
|
||||
ctx.lineCap = 'round'
|
||||
ctx.stroke()
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
Reference in New Issue
Block a user