GithubBackup/MoviePilot-Frontend
1
0
Fork 0
mirror of https://github.com/jxxghp/MoviePilot-Frontend.git synced 2026-05-30 12:49:55 +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

22
src/components/cards/LibraryCard.vue
View File

@@ -72,12 +72,12 @@ async function drawImages(imageList: string[]) {
if (!canvas) return getDefaultImage()
// 画布参数
const POSTER_WIDTH = (canvas.width - 32) / 4
const POSTER_HEIGHT = canvas.height * 0.75 - 8
const MARGIN_WIDTH = 4
const MARGIN_HEIGHT = 4
const REFLECTION_HEIGHT = POSTER_HEIGHT / 2
const REFLECTION_SHOW_HEIGHT = canvas.height / 4
const POSTER_WIDTH = (canvas.width - 40) / 4 // 左右边框8px + 3个间隔24px = 40px
const POSTER_HEIGHT = 256 // 上方海报高256
const MARGIN_WIDTH = 8 // 左右间隔为8
const MARGIN_HEIGHT = 4 // 海报和倒影之间的间隔为4
const REFLECTION_HEIGHT = canvas.height - POSTER_HEIGHT - MARGIN_HEIGHT // 下方倒影使用剩余全部高度
const REFLECTION_SHOW_HEIGHT = REFLECTION_HEIGHT
// 获取画布上下文
const ctx = canvas.getContext('2d')
@@ -104,12 +104,12 @@ async function drawImages(imageList: string[]) {
} catch (error) {
console.error(error)
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
}
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)
@@ -123,17 +123,17 @@ async function drawImages(imageList: string[]) {
img.width,
img.height,
x,
REFLECTION_SHOW_HEIGHT - REFLECTION_HEIGHT,
canvas.height - (POSTER_HEIGHT + MARGIN_HEIGHT + REFLECTION_HEIGHT), // 倒影位置在海报下方，考虑画布翻转
POSTER_WIDTH,
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(1, 'rgba(0, 0, 0, 0.3)')
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()
}