|
|
@@ -23,24 +23,19 @@ export class BarSpectrumRenderer implements SpectrumRenderer {
|
|
|
}
|
|
|
}
|
|
|
|
|
|
- // 轻微拖影,接近参考图中的荧光残影
|
|
|
- ctx.fillStyle = 'rgba(0, 0, 0, 0.30)'
|
|
|
- ctx.fillRect(0, 0, width, height)
|
|
|
+ // 轻微拖影,接近参考图中的荧光残影(使用透明背景)
|
|
|
+ ctx.clearRect(0, 0, width, height)
|
|
|
|
|
|
- const gap: number = 2.2
|
|
|
+ const gap: number = 2.2 // 恢复柱子之间的间隙
|
|
|
const barWidth: number = (width - gap * (bandCount + 1)) / bandCount
|
|
|
const usableHeight: number = height * 0.80
|
|
|
- const segmentHeight: number = Math.max(2, height * 0.012)
|
|
|
- const segmentGap: number = Math.max(1, height * 0.004)
|
|
|
+ const segmentHeight: number = Math.max(3, height * 0.015) // 增加单段高度
|
|
|
+ const segmentGap: number = 0 // 去掉间隙,让方格紧密相连
|
|
|
const segmentCount: number = Math.max(10, Math.floor(usableHeight / (segmentHeight + segmentGap)))
|
|
|
const palette = buildSpectrumPalette(brandColor)
|
|
|
const hueSpan: number = (palette.complementaryHue + 360 - palette.primaryHue) % 360
|
|
|
|
|
|
- // 地平线
|
|
|
- ctx.fillStyle = hslToHex(palette.accentHue, 0.7, 0.45)
|
|
|
- ctx.globalAlpha = 0.25
|
|
|
- ctx.fillRect(0, height - usableHeight, width, 1)
|
|
|
- ctx.globalAlpha = 1.0
|
|
|
+ // 地平线已移除,保持透明背景
|
|
|
|
|
|
for (let i = 0; i < bandCount; i++) {
|
|
|
const level: number = Math.max(0, Math.min(1, bands[i]))
|
|
|
@@ -51,9 +46,15 @@ export class BarSpectrumRenderer implements SpectrumRenderer {
|
|
|
for (let seg = 0; seg < segmentCount; seg++) {
|
|
|
const segY: number = height - (seg + 1) * (segmentHeight + segmentGap)
|
|
|
const lit: boolean = seg < activeSegments
|
|
|
+
|
|
|
+ // 只绘制点亮的方格,未点亮的不绘制(透明)
|
|
|
+ if (!lit) {
|
|
|
+ continue
|
|
|
+ }
|
|
|
+
|
|
|
const t: number = seg / segmentCount
|
|
|
- const lightness: number = lit ? 0.34 + t * 0.34 : 0.10
|
|
|
- const alpha: number = lit ? (0.55 + level * 0.45) : 0.14
|
|
|
+ const lightness: number = 0.34 + t * 0.34
|
|
|
+ const alpha: number = 0.55 + level * 0.45
|
|
|
ctx.globalAlpha = alpha
|
|
|
ctx.fillStyle = hslToHex(hue, 0.86, lightness)
|
|
|
ctx.fillRect(x, segY, barWidth, segmentHeight)
|