wx_pbzc/components/progress-ring/progress-ring.js

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' }
  },

  data: {
    displayTime: '00:00',
    statusText: '准备开始'
  },

  observers: {
    'remaining, status, duration'() {
      const texts = { idle: '准备开始', running: '坚持住', paused: '已暂停', completed: '完成!' }
      this.setData({
        displayTime: util.formatTime(this.data.remaining),
        statusText: texts[this.data.status] || ''
      })
    },

    'remaining, duration, size, ringWidth, primaryColor, primaryLightColor, trackColor'() {
      this._draw()
    }
  },

  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._draw()
        })
    }
  },

  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 } = 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 so its shadow isn't clipped
      const glowPad = 6 * 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()

      // 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()
      }
    }
  }
})