lc
b6d94b21cd
- 光点移到段中点(am=(a0+a1)/2),两端粗细对称;重构为两遍绘制, 光点统一后绘浮于所有弧之上,不再被相邻圆头吞掉;加大加亮成珠状 - glowPad 6→18 与 _drawSetArcs pad 同步,arcR 外移 3→14, 分段弧与进度弧间距 -1 → +10dpr(size=420),呼吸光环不重叠
392 lines
14 KiB
JavaScript
392 lines
14 KiB
JavaScript
const 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' },
|
|
// Track (background ring) color. Caller passes a darker shade in dark mode
|
|
// so the ring isn't an eye-searing light circle on a dark background.
|
|
trackColor: { type: String, value: '#EEEEEE' },
|
|
// Total elapsed seconds (since start). Shown in the ring center once the
|
|
// countdown hits 0 (overtime mode) - replaces the old +Xs badge.
|
|
elapsed: { type: Number, value: 0 },
|
|
// Tick count. Caller passes the duration (one tick per second, capped at
|
|
// 60 to avoid clutter). 0 = no ticks drawn. Quarter ticks are emphasized.
|
|
ticks: { type: Number, value: 0 },
|
|
// Small secondary label under the big time (e.g. "目标 30 秒"). Empty = hidden.
|
|
subText: { type: String, value: '' },
|
|
// ---- Circuit (循环训练) set progress ----
|
|
// An outer band of arc segments, one per set, wrapped around the countdown
|
|
// ring. sets <= 0 (default) disables the band entirely so single/free mode
|
|
// renders exactly as before (zero extra draw cost).
|
|
sets: { type: Number, value: 0 },
|
|
// 1-based index of the set the CircuitTimer is currently on. While resting it
|
|
// still points at the just-finished set (same contract as the old dots panel):
|
|
// working -> sets before it are done, itself is active;
|
|
// resting -> itself is done, the next set is highlighted green.
|
|
currentSet: { type: Number, value: 0 },
|
|
resting: { type: Boolean, value: false },
|
|
// Highlight color for the "next set" preview during rest.
|
|
successColor: { type: String, value: '#00B578' }
|
|
},
|
|
|
|
data: {
|
|
displayTime: '00:00'
|
|
},
|
|
|
|
observers: {
|
|
'remaining, status, duration, elapsed'() {
|
|
// 倒计时阶段显示剩余;达标后 remaining 归零,改显总训练时长(overtime 模式)
|
|
const shown = this.data.remaining > 0 ? this.data.remaining : (this.data.elapsed || 0)
|
|
this.setData({
|
|
displayTime: util.formatTime(shown)
|
|
})
|
|
},
|
|
|
|
'remaining, duration, size, ringWidth, primaryColor, primaryLightColor, trackColor, ticks'() {
|
|
this._draw()
|
|
},
|
|
|
|
// Set-progress band: re-render and (re)arm / stop the breathing loop.
|
|
'sets, currentSet, resting, status'() {
|
|
this._syncSetPulse()
|
|
}
|
|
},
|
|
|
|
lifetimes: {
|
|
ready() {
|
|
const query = this.createSelectorQuery()
|
|
query.select('#ringCanvas')
|
|
.fields({ node: true, size: true })
|
|
.exec((res) => {
|
|
if (!res || !res[0] || !res[0].node) return
|
|
const canvas = res[0].node
|
|
const dpr = wx.getWindowInfo().pixelRatio || 2
|
|
const displaySize = this.data.size
|
|
canvas.width = displaySize * dpr
|
|
canvas.height = displaySize * dpr
|
|
this._ctx = canvas.getContext('2d')
|
|
this._dpr = dpr
|
|
this._canvas = canvas
|
|
this._draw()
|
|
this._syncSetPulse()
|
|
})
|
|
},
|
|
|
|
detached() {
|
|
this._stopSetPulse()
|
|
}
|
|
},
|
|
|
|
methods: {
|
|
// '#FF6B35' -> [255, 107, 53]
|
|
_hexToRgb(hex) {
|
|
const m = /^#?([0-9a-f]{6})$/i.exec(hex || '')
|
|
if (!m) return [255, 107, 53]
|
|
const n = parseInt(m[1], 16)
|
|
return [(n >> 16) & 255, (n >> 8) & 255, n & 255]
|
|
},
|
|
|
|
_draw() {
|
|
const ctx = this._ctx
|
|
if (!ctx) return
|
|
|
|
const { size, ringWidth, duration, remaining, primaryColor, primaryLightColor, trackColor, ticks } = this.data
|
|
const dpr = this._dpr
|
|
|
|
const w = size * dpr
|
|
const h = size * dpr
|
|
ctx.clearRect(0, 0, w, h)
|
|
|
|
const cx = w / 2
|
|
const cy = h / 2
|
|
// Reserve room for the glowing end dot's shadow AND the outer set-progress
|
|
// band (circuit mode). _drawSetArcs derives its band radius from this same
|
|
// pad, so increasing it here also widens the gap between the countdown
|
|
// arc and the set band. 18dpr gives a ~10dpr visible gap (size=420).
|
|
const glowPad = 18 * dpr
|
|
const radius = (size - ringWidth) / 2 * dpr - glowPad
|
|
const lw = ringWidth * dpr
|
|
|
|
// track ring
|
|
ctx.beginPath()
|
|
ctx.arc(cx, cy, radius, 0, Math.PI * 2)
|
|
ctx.strokeStyle = trackColor
|
|
ctx.lineWidth = lw
|
|
ctx.lineCap = 'round'
|
|
ctx.stroke()
|
|
|
|
// ---- tick marks (inside the band) ----
|
|
if (ticks > 0) {
|
|
const innerR = radius - lw / 2 - (4 * dpr) // just inside the band
|
|
const shortLen = 6 * dpr
|
|
const longLen = 12 * dpr
|
|
const stepDeg = 360 / ticks
|
|
// 短刻度:均匀铺满;但跳过靠近四方位(12/3/6/9 点)的,让位给长刻度,避免双线重叠
|
|
for (let i = 0; i < ticks; i++) {
|
|
const deg = (i / ticks) * 360
|
|
const nearestQuarter = Math.round(deg / 90) * 90
|
|
if (Math.abs(deg - nearestQuarter) < stepDeg) continue
|
|
const ang = -Math.PI / 2 + (deg * Math.PI) / 180
|
|
const cos = Math.cos(ang)
|
|
const sin = Math.sin(ang)
|
|
ctx.beginPath()
|
|
ctx.moveTo(cx + innerR * cos, cy + innerR * sin)
|
|
ctx.lineTo(cx + (innerR - shortLen) * cos, cy + (innerR - shortLen) * sin)
|
|
ctx.lineWidth = 1.5 * dpr
|
|
ctx.lineCap = 'round'
|
|
ctx.strokeStyle = 'rgba(0,0,0,0.12)'
|
|
ctx.stroke()
|
|
}
|
|
// 四分位长刻度:精确落在 12/3/6/9 点(无论 ticks 是否整除 4,都对齐正中)
|
|
for (let k = 0; k < 4; k++) {
|
|
const ang = -Math.PI / 2 + k * (Math.PI / 2)
|
|
const cos = Math.cos(ang)
|
|
const sin = Math.sin(ang)
|
|
ctx.beginPath()
|
|
ctx.moveTo(cx + innerR * cos, cy + innerR * sin)
|
|
ctx.lineTo(cx + (innerR - longLen) * cos, cy + (innerR - longLen) * sin)
|
|
ctx.lineWidth = 3 * dpr
|
|
ctx.lineCap = 'round'
|
|
ctx.strokeStyle = 'rgba(0,0,0,0.28)'
|
|
ctx.stroke()
|
|
}
|
|
}
|
|
|
|
// progress arc (clockwise from 12 o'clock)
|
|
const ratio = duration > 0 ? Math.max(0, Math.min(1, remaining / duration)) : 0
|
|
if (ratio > 0.001) {
|
|
const startAngle = -Math.PI / 2
|
|
const sweep = ratio * Math.PI * 2
|
|
const [r1, g1, b1] = this._hexToRgb(primaryColor)
|
|
const [r2, g2, b2] = this._hexToRgb(primaryLightColor || primaryColor)
|
|
|
|
// Conic gradient along the arc (light -> primary), drawn as small
|
|
// arc segments. Segment count is bounded so per-frame redraws stay cheap.
|
|
const segs = Math.max(16, Math.min(120, Math.ceil(sweep / 0.06)))
|
|
for (let i = 0; i < segs; i++) {
|
|
const a0 = startAngle + (sweep * i) / segs
|
|
const a1 = startAngle + (sweep * (i + 1)) / segs + 0.004 // tiny overlap to hide seams
|
|
const t = 1 - i / (segs - 1) // head (i=0, oldest remaining) is primary, tail is light
|
|
const r = Math.round(r1 + (r2 - r1) * t)
|
|
const g = Math.round(g1 + (g2 - g1) * t)
|
|
const b = Math.round(b1 + (b2 - b1) * t)
|
|
ctx.beginPath()
|
|
ctx.arc(cx, cy, radius, a0, a1)
|
|
ctx.strokeStyle = `rgb(${r},${g},${b})`
|
|
ctx.lineWidth = lw
|
|
ctx.lineCap = 'butt'
|
|
ctx.stroke()
|
|
}
|
|
|
|
// round cap at the tail (12 o'clock side)
|
|
ctx.beginPath()
|
|
ctx.arc(cx + radius * Math.cos(startAngle), cy + radius * Math.sin(startAngle), lw / 2, 0, Math.PI * 2)
|
|
ctx.fillStyle = `rgb(${r2},${g2},${b2})`
|
|
ctx.fill()
|
|
|
|
// glowing dot at the leading end
|
|
const endAngle = startAngle + sweep
|
|
const ex = cx + radius * Math.cos(endAngle)
|
|
const ey = cy + radius * Math.sin(endAngle)
|
|
ctx.save()
|
|
ctx.shadowColor = primaryColor
|
|
ctx.shadowBlur = 12 * dpr
|
|
ctx.beginPath()
|
|
ctx.arc(ex, ey, lw / 2, 0, Math.PI * 2)
|
|
ctx.fillStyle = primaryColor
|
|
ctx.fill()
|
|
// white core for a "light bulb" feel
|
|
ctx.shadowBlur = 0
|
|
ctx.beginPath()
|
|
ctx.arc(ex, ey, lw / 4, 0, Math.PI * 2)
|
|
ctx.fillStyle = 'rgba(255,255,255,0.9)'
|
|
ctx.fill()
|
|
ctx.restore()
|
|
}
|
|
|
|
// set-progress band (circuit mode only; no-op when sets <= 0)
|
|
this._drawSetArcs(this._setPulsePhase || 0.6)
|
|
},
|
|
|
|
/**
|
|
* Map currentSet/resting onto the three segment states, mirroring the old
|
|
* dots panel's contract (see the property doc for the semantics).
|
|
*/
|
|
_setArcState() {
|
|
const { sets, currentSet, resting } = this.data
|
|
let done = 0
|
|
let active = 0
|
|
let next = 0
|
|
if (sets > 0 && currentSet > 0) {
|
|
if (resting) {
|
|
done = Math.min(currentSet, sets)
|
|
if (currentSet < sets) next = currentSet + 1
|
|
} else {
|
|
done = Math.max(0, currentSet - 1)
|
|
active = currentSet
|
|
}
|
|
}
|
|
return { done, active, next }
|
|
},
|
|
|
|
/**
|
|
* Draw (or re-draw) the outer set-progress band. `pulse` is the breathing
|
|
* phase 0..1 used for the active / next segment; pass a fixed value for a
|
|
* static render (idle / paused).
|
|
*
|
|
* Only the band itself is cleared (clipped to a ring) so the inner
|
|
* countdown arc is never touched — the rAF loop below re-renders this
|
|
* band every frame without interfering with the per-second _draw().
|
|
*/
|
|
_drawSetArcs(pulse) {
|
|
const ctx = this._ctx
|
|
if (!ctx) return
|
|
const { size, ringWidth, sets, primaryColor, trackColor, successColor, status } = this.data
|
|
if (!sets || sets <= 0) return
|
|
|
|
const dpr = this._dpr
|
|
const cx = (size / 2) * dpr
|
|
const cy = (size / 2) * dpr
|
|
// Same radius math as _draw(): the countdown arc sits at `radius`; the
|
|
// set band wraps just outside it so the two read as concentric layers.
|
|
// NOTE: the -18*dpr pad MUST stay in sync with glowPad in _draw().
|
|
const radius = ((size - ringWidth) / 2) * dpr - 18 * dpr
|
|
const arcR = radius + (ringWidth / 2) * dpr + 14 * dpr
|
|
const arcW = 8 * dpr
|
|
const band = arcW / 2 + 3 * dpr
|
|
|
|
const { done, active, next } = this._setArcState()
|
|
|
|
// Clear only the outer band (ring clip -> inner arc untouched).
|
|
ctx.save()
|
|
ctx.beginPath()
|
|
ctx.arc(cx, cy, arcR + band, 0, Math.PI * 2)
|
|
ctx.arc(cx, cy, arcR - band, 0, Math.PI * 2, true)
|
|
ctx.clip()
|
|
ctx.clearRect(cx - arcR - band, cy - arcR - band, (arcR + band) * 2, (arcR + band) * 2)
|
|
ctx.restore()
|
|
|
|
const p = pulse == null ? 0.6 : Math.max(0, Math.min(1, pulse))
|
|
const paused = status === 'paused'
|
|
const segAngle = (Math.PI * 2) / sets
|
|
const gap = (2.5 * Math.PI) / 180
|
|
const startAngle = -Math.PI / 2
|
|
|
|
// Pass 1: draw every segment arc. Breathing dots are collected and painted
|
|
// in pass 2, AFTER all arcs, so a dot always floats ON TOP of its segment
|
|
// instead of being partially buried under neighbouring round caps.
|
|
const dots = []
|
|
for (let i = 1; i <= sets; i++) {
|
|
const a0 = startAngle + (i - 1) * segAngle + gap / 2
|
|
const a1 = startAngle + i * segAngle - gap / 2
|
|
|
|
let color = trackColor
|
|
if (i <= done || i === active) color = primaryColor
|
|
else if (i === next) color = successColor
|
|
|
|
const emphasized = i === active || i === next
|
|
const alpha = emphasized ? (paused ? 0.7 : 0.45 + 0.55 * p) : 1
|
|
|
|
ctx.globalAlpha = alpha
|
|
ctx.beginPath()
|
|
ctx.arc(cx, cy, arcR, a0, a1)
|
|
ctx.strokeStyle = color
|
|
ctx.lineWidth = arcW
|
|
ctx.lineCap = 'round'
|
|
ctx.stroke()
|
|
ctx.globalAlpha = 1
|
|
|
|
if (emphasized) {
|
|
const am = (a0 + a1) / 2
|
|
dots.push({
|
|
x: cx + arcR * Math.cos(am),
|
|
y: cy + arcR * Math.sin(am),
|
|
color: i === active ? primaryColor : successColor
|
|
})
|
|
}
|
|
}
|
|
|
|
// Pass 2: glowing dot on each emphasized segment, drawn over every arc.
|
|
// Placed at the segment MIDDLE (not the a1 end): a dot pinned to the
|
|
// trailing end made that end look visibly thicker than the round-cap
|
|
// start, so both ends of the arc stay symmetric. Slightly larger than
|
|
// the band width so it reads as a bead riding on top of the arc.
|
|
for (const dot of dots) {
|
|
const dotR = (arcW / 2) * (paused ? 1.3 : 1.15 + 0.25 * p)
|
|
ctx.save()
|
|
ctx.shadowColor = dot.color
|
|
ctx.shadowBlur = 8 * dpr
|
|
ctx.globalAlpha = paused ? 0.95 : 0.7 + 0.3 * p
|
|
ctx.beginPath()
|
|
ctx.arc(dot.x, dot.y, dotR, 0, Math.PI * 2)
|
|
ctx.fillStyle = dot.color
|
|
ctx.fill()
|
|
ctx.restore()
|
|
// white core for a "light bulb" feel
|
|
ctx.beginPath()
|
|
ctx.arc(dot.x, dot.y, dotR * 0.45, 0, Math.PI * 2)
|
|
ctx.fillStyle = 'rgba(255,255,255,0.9)'
|
|
ctx.fill()
|
|
}
|
|
},
|
|
|
|
_startSetPulse() {
|
|
if (this._setPulseRAF != null) return
|
|
const canvas = this._canvas
|
|
if (!canvas || typeof canvas.requestAnimationFrame !== 'function') {
|
|
// Older canvas implementations without rAF: render one static frame.
|
|
this._drawSetArcs(0.6)
|
|
return
|
|
}
|
|
const loop = () => {
|
|
if (!this._ctx) return
|
|
const t = Date.now() / 1000
|
|
this._setPulsePhase = 0.5 + 0.5 * Math.sin((t * Math.PI * 2) / 1.6)
|
|
this._drawSetArcs(this._setPulsePhase)
|
|
this._setPulseRAF = canvas.requestAnimationFrame(loop)
|
|
}
|
|
this._setPulseRAF = canvas.requestAnimationFrame(loop)
|
|
},
|
|
|
|
_stopSetPulse() {
|
|
if (this._setPulseRAF == null) return
|
|
const canvas = this._canvas
|
|
if (canvas && typeof canvas.cancelAnimationFrame === 'function') {
|
|
canvas.cancelAnimationFrame(this._setPulseRAF)
|
|
}
|
|
this._setPulseRAF = null
|
|
},
|
|
|
|
/**
|
|
* (Re)arm or stop the breathing loop based on the current state.
|
|
* - sets <= 0 -> nothing to draw (single/free mode)
|
|
* - idle / completed -> static render (no active/next segment)
|
|
* - paused -> static render (pausing freezes all motion)
|
|
* - working / resting -> breathe the active / next segment
|
|
*/
|
|
_syncSetPulse() {
|
|
if (!this._ctx) return
|
|
const { sets, status } = this.data
|
|
if (sets <= 0) {
|
|
this._stopSetPulse()
|
|
return
|
|
}
|
|
const state = this._setArcState()
|
|
const wantsPulse = (state.active > 0 || state.next > 0) && status !== 'paused'
|
|
if (wantsPulse) {
|
|
this._startSetPulse()
|
|
} else {
|
|
this._stopSetPulse()
|
|
this._setPulsePhase = 0.6
|
|
this._drawSetArcs(0.6)
|
|
}
|
|
}
|
|
}
|
|
})
|