GithubBackup/MoviePilot-Frontend
1
0
Fork 0
mirror of https://github.com/jxxghp/MoviePilot-Frontend.git synced 2026-09-05 15:36:49 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: 调整间距

Browse Source
This commit is contained in:
sowevo
2025-08-12 04:31:19 +08:00
parent 0a87bb1db1
commit 6096ab0c9b
1 changed files with 11 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/cards/LibraryCard.vue
+11 -11
View File
@@ -72,12 +72,12 @@ async function drawImages(imageList: string[]) {
if (!canvas) return getDefaultImage() if (!canvas) return getDefaultImage()
// 画布参数 // 画布参数
const POSTER_WIDTH = (canvas.width - 32) / 4 const POSTER_WIDTH = (canvas.width - 40) / 4 // 左右边框8px + 3个间隔24px = 40px
const POSTER_HEIGHT = canvas.height * 0.75 - 8 const POSTER_HEIGHT = 256 // 上方海报高256
const MARGIN_WIDTH = 4 const MARGIN_WIDTH = 8 // 左右间隔为8
const MARGIN_HEIGHT = 4 const MARGIN_HEIGHT = 4 // 海报和倒影之间的间隔为4
const REFLECTION_HEIGHT = POSTER_HEIGHT / 2 const REFLECTION_HEIGHT = canvas.height - POSTER_HEIGHT - MARGIN_HEIGHT // 下方倒影使用剩余全部高度
const REFLECTION_SHOW_HEIGHT = canvas.height / 4 const REFLECTION_SHOW_HEIGHT = REFLECTION_HEIGHT
// 获取画布上下文 // 获取画布上下文
const ctx = canvas.getContext('2d') const ctx = canvas.getContext('2d')
@@ -104,12 +104,12 @@ async function drawImages(imageList: string[]) {
} catch (error) { } catch (error) {
console.error(error) console.error(error)
ctx.fillStyle = '#e5e7eb' ctx.fillStyle = '#e5e7eb'
ctx.fillRect(MARGIN_WIDTH * index + POSTER_WIDTH * (index - 1), MARGIN_HEIGHT, POSTER_WIDTH, POSTER_HEIGHT) ctx.fillRect(MARGIN_WIDTH * index + POSTER_WIDTH * (index - 1), 0, POSTER_WIDTH, POSTER_HEIGHT)
return return
} }
const x = MARGIN_WIDTH * index + POSTER_WIDTH * (index - 1) const x = MARGIN_WIDTH * index + POSTER_WIDTH * (index - 1)
const y = MARGIN_HEIGHT const y = 0 // 海报紧贴顶部
ctx.drawImage(img, x, y, POSTER_WIDTH, POSTER_HEIGHT) ctx.drawImage(img, x, y, POSTER_WIDTH, POSTER_HEIGHT)
@@ -123,17 +123,17 @@ async function drawImages(imageList: string[]) {
img.width, img.width,
img.height, img.height,
x, x,
REFLECTION_SHOW_HEIGHT - REFLECTION_HEIGHT, canvas.height - (POSTER_HEIGHT + MARGIN_HEIGHT + REFLECTION_HEIGHT), // 倒影位置在海报下方，考虑画布翻转
POSTER_WIDTH, POSTER_WIDTH,
REFLECTION_HEIGHT, REFLECTION_HEIGHT,
) )
const gradient = ctx.createLinearGradient(0, REFLECTION_SHOW_HEIGHT - REFLECTION_HEIGHT, 0, REFLECTION_HEIGHT) const gradient = ctx.createLinearGradient(0, canvas.height - (POSTER_HEIGHT + MARGIN_HEIGHT + REFLECTION_HEIGHT), 0, canvas.height - (POSTER_HEIGHT + MARGIN_HEIGHT))
gradient.addColorStop(0, 'rgba(0, 0, 0, 1)') gradient.addColorStop(0, 'rgba(0, 0, 0, 1)')
gradient.addColorStop(1, 'rgba(0, 0, 0, 0.3)') gradient.addColorStop(1, 'rgba(0, 0, 0, 0.3)')
ctx.fillStyle = gradient ctx.fillStyle = gradient
ctx.fillRect(x, 0, POSTER_WIDTH, REFLECTION_SHOW_HEIGHT) ctx.fillRect(x, canvas.height - (POSTER_HEIGHT + MARGIN_HEIGHT + REFLECTION_HEIGHT), POSTER_WIDTH, REFLECTION_HEIGHT)
ctx.restore() ctx.restore()
} }