GithubBackup/MoviePilot-Frontend
1
0
Fork 0
mirror of https://github.com/jxxghp/MoviePilot-Frontend.git synced 2026-06-29 11:31:35 +08:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #377 from Sowevo/v2

Browse Source
This commit is contained in:
jxxghp
2025-08-12 06:52:26 +08:00
committed by GitHub
parent a19042c655 5261fbe870
commit 644f1b5640
1 changed files with 15 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -72,20 +72,18 @@ 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 ctx = canvas.getContext('2d') const ctx = canvas.getContext('2d')
if (!ctx) return getDefaultImage() if (!ctx) return getDefaultImage()
// 设置背景色为黑色 // 设置背景色为透明
ctx.fillStyle = '#000000' ctx.clearRect(0, 0, canvas.width, canvas.height)
ctx.fillRect(0, 0, canvas.width, canvas.height)
// 绘制图片 // 绘制图片
async function drawImageWithReflection(imgSrc: string, index: number) { async function drawImageWithReflection(imgSrc: string, index: number) {
@@ -104,12 +102,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 +121,18 @@ async function drawImages(imageList: string[]) {
img.width, img.width,
img.height, img.height,
x, x,
REFLECTION_SHOW_HEIGHT - REFLECTION_HEIGHT, 0,
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, 0, 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.7)')
ctx.globalCompositeOperation = 'destination-out';
ctx.fillStyle = gradient ctx.fillStyle = gradient
ctx.fillRect(x, 0, POSTER_WIDTH, REFLECTION_SHOW_HEIGHT) ctx.fillRect(x, 0, POSTER_WIDTH, REFLECTION_HEIGHT)
ctx.restore() ctx.restore()
} }
@@ -166,7 +165,7 @@ onMounted(async () => {
@click="goPlay" @click="goPlay"
> >
<template #image> <template #image>
<canvas ref="canvasRef" class="w-full h-full hidden" /> <canvas ref="canvasRef" width="640" height="360" class="w-full h-full hidden" />
<VImg :src="imgUrl" aspect-ratio="2/3" cover @load="imageLoadHandler" @error="imageErrorHandler"> <VImg :src="imgUrl" aspect-ratio="2/3" cover @load="imageLoadHandler" @error="imageErrorHandler">
<template #placeholder> <template #placeholder>
<div class="w-full h-full"> <div class="w-full h-full">