瀏覽代碼

音乐频谱的背景为透明

onecold 6 月之前
父節點
當前提交
e7a54aa5dc

+ 11 - 13
entry/src/main/ets/view/LocalMusic.ets

@@ -11400,12 +11400,17 @@ export struct LocalMusic {
         top: this.isCoverOpacity() ? 0 : 20
         top: this.isCoverOpacity() ? 0 : 20
       })
       })
 
 
-      if (this.isPhonePortrait()) {
-        this.InlineSpectrumView()
-      }
 
 
-      if (this.isPhonePortrait() && this.isShowSingleLineLyric) {
-        this.SingleLyricView()
+      if (this.isPhonePortrait()  ) {
+        Stack(){
+          if (true) {
+            this.InlineSpectrumView()
+          }
+          if (this.isShowSingleLineLyric) {
+            this.SingleLyricView()
+          }
+        }
+
       }
       }
       if (this.isPhoneLan()) {
       if (this.isPhoneLan()) {
         Column() {
         Column() {
@@ -15299,15 +15304,8 @@ export struct LocalMusic {
     })
     })
       .width(this.isLandscape ? '82%' : '90%')
       .width(this.isLandscape ? '82%' : '90%')
       .height(this.isCoverOpacity() ? 120 : 150)
       .height(this.isCoverOpacity() ? 120 : 150)
-      .margin({ top: 8, bottom: 12 })
-      .borderRadius(16)
+      .margin({ top: 3, bottom: 12 })
       .clip(true)
       .clip(true)
-      .backgroundColor('rgba(0,0,0,0.24)')
-      .shadow({
-        radius: 14,
-        type: ShadowType.BLUR,
-        color: 'rgba(0,0,0,0.35)'
-      })
   }
   }
 
 
   private getSongDurationMs(song?: VideoItem): number {
   private getSongDurationMs(song?: VideoItem): number {

+ 14 - 13
entry/src/main/ets/view/spectrum/BarSpectrumRenderer.ets

@@ -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 barWidth: number = (width - gap * (bandCount + 1)) / bandCount
     const usableHeight: number = height * 0.80
     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 segmentCount: number = Math.max(10, Math.floor(usableHeight / (segmentHeight + segmentGap)))
     const palette = buildSpectrumPalette(brandColor)
     const palette = buildSpectrumPalette(brandColor)
     const hueSpan: number = (palette.complementaryHue + 360 - palette.primaryHue) % 360
     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++) {
     for (let i = 0; i < bandCount; i++) {
       const level: number = Math.max(0, Math.min(1, bands[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++) {
       for (let seg = 0; seg < segmentCount; seg++) {
         const segY: number = height - (seg + 1) * (segmentHeight + segmentGap)
         const segY: number = height - (seg + 1) * (segmentHeight + segmentGap)
         const lit: boolean = seg < activeSegments
         const lit: boolean = seg < activeSegments
+
+        // 只绘制点亮的方格,未点亮的不绘制(透明)
+        if (!lit) {
+          continue
+        }
+
         const t: number = seg / segmentCount
         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.globalAlpha = alpha
         ctx.fillStyle = hslToHex(hue, 0.86, lightness)
         ctx.fillStyle = hslToHex(hue, 0.86, lightness)
         ctx.fillRect(x, segY, barWidth, segmentHeight)
         ctx.fillRect(x, segY, barWidth, segmentHeight)

+ 1 - 1
entry/src/main/ets/view/spectrum/SpectrumView.ets

@@ -156,7 +156,7 @@ export struct SpectrumView {
                 })
                 })
             })
             })
           }
           }
-          .backgroundColor('rgba(0,0,0,0.6)')
+          // .backgroundColor('rgba(0,0,0,0.6)')
           .borderRadius(12)
           .borderRadius(12)
           .padding(4)
           .padding(4)
         }
         }