feat: 对接各个视频数据
This commit is contained in:
zhongyidian committed
1 parent
6103453e32
commit
6ab98c4764
339 files changed
+17316
-1531
No files matched your search
@@ -0,0 +1,516 @@
|
||||
<script lang="tsx" setup>
|
||||
import { getBackgroundImage, getStaticImage, IMAGE_PATHS } from '@/utils'
|
||||
import { GuideSteps, GuideStepsItem } from '@/components/Guide'
|
||||
import { ref, computed } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { ImgButton } from '@/components/Button'
|
||||
|
||||
const router = useRouter()
|
||||
|
||||
const back = () => {
|
||||
// 跳转设备准备
|
||||
router.back()
|
||||
}
|
||||
const steps = [
|
||||
{ id: 'step1', content: '先认识 Vlog：点击右侧「1.vlog初识」继续' },
|
||||
{ id: 'step2', content: '这是主要内容区域的边框' }
|
||||
]
|
||||
const stepIndex = ref(0)
|
||||
const hiddenbar = ref(false)
|
||||
const currentIndex = ref(0) // 当前显示的图片索引
|
||||
const selectedMenuIndex = ref(0) // 当前选中的菜单项索引
|
||||
|
||||
// 菜单项数据
|
||||
const menuItems = ref([
|
||||
{ id: 'phone', name: '手机', disabled: false },
|
||||
{ id: 'phone-stand', name: '手机支架', disabled: true },
|
||||
{ id: 'bluetooth-remote', name: '蓝牙遥控器', disabled: true },
|
||||
{ id: 'stabilizer', name: '稳定器', disabled: true },
|
||||
{ id: 'props', name: '常用道具', disabled: true },
|
||||
{ id: 'phone-lens', name: '手机辅助箱头', disabled: true }
|
||||
])
|
||||
|
||||
const phoneList = ref([
|
||||
{ phoneImg: getStaticImage('equipment/设备-手机1.png') },
|
||||
{ phoneImg: getStaticImage('equipment/设备-手机2.png') }
|
||||
])
|
||||
|
||||
const platetitleList = ref([
|
||||
{ title: getStaticImage('equipment/标题-苹果.png') },
|
||||
{ title: getStaticImage('equipment/标题-安卓小米.png') }
|
||||
])
|
||||
|
||||
const platetextList = ref([
|
||||
{ text: getStaticImage('equipment/内容-苹果.png') },
|
||||
{ text: getStaticImage('equipment/内容-安卓小米.png') }
|
||||
])
|
||||
const hiddenbarclick = () => {
|
||||
hiddenbar.value = !hiddenbar.value
|
||||
}
|
||||
|
||||
// 选择菜单项
|
||||
const selectMenuItem = (index: number, item: { id: string; name: string; disabled: boolean }) => {
|
||||
if (item.disabled) {
|
||||
console.log(`菜单项 "${item.name}" 已被禁用`)
|
||||
return
|
||||
}
|
||||
selectedMenuIndex.value = index
|
||||
}
|
||||
|
||||
// 下一张图片
|
||||
const nextPhone = () => {
|
||||
if (currentIndex.value < phoneList.value.length - 1) {
|
||||
currentIndex.value++
|
||||
}
|
||||
}
|
||||
|
||||
// 上一张图片
|
||||
const prevPhone = () => {
|
||||
if (currentIndex.value > 0) {
|
||||
currentIndex.value--
|
||||
}
|
||||
}
|
||||
|
||||
interface SimpleStep {
|
||||
id: string
|
||||
content: string
|
||||
}
|
||||
|
||||
const handleStepChange = (_step: SimpleStep | null, index: number) => {
|
||||
stepIndex.value = index
|
||||
}
|
||||
|
||||
const currentHighlight = computed(() =>
|
||||
stepIndex.value === 0 ? '.img-switch-item--vlog' : '.work-border'
|
||||
)
|
||||
</script>
|
||||
<template>
|
||||
<div class="equipment-index">
|
||||
<!-- 背景图片 -->
|
||||
<div
|
||||
class="absolute inset-0 bg-cover bg-center bg-no-repeat equipment-bg"
|
||||
:style="{ backgroundImage: getBackgroundImage(IMAGE_PATHS.EQUIPMENT.BG) }"
|
||||
></div>
|
||||
|
||||
<div class="equipment-bar">
|
||||
<img src="@/assets/images/equipment/侧边导航栏.png" alt="" :hidden="hiddenbar" />
|
||||
<!-- 内容列表 -->
|
||||
<div class="equipment-item" :hidden="hiddenbar">
|
||||
<div class="menu-list">
|
||||
<div
|
||||
v-for="(item, index) in menuItems"
|
||||
:key="item.id"
|
||||
class="menu-item"
|
||||
:class="{
|
||||
'menu-item--active': selectedMenuIndex === index,
|
||||
'menu-item--disabled': item.disabled
|
||||
}"
|
||||
@click="selectMenuItem(index, item)"
|
||||
>
|
||||
<div
|
||||
class="menu-item__indicator"
|
||||
v-if="selectedMenuIndex === index && !item.disabled"
|
||||
></div>
|
||||
<span class="menu-item__text">{{ item.name }}</span>
|
||||
<div class="menu-item__status" v-if="item.disabled">
|
||||
<!-- <span class="status-text">未解锁</span> -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 设备准备按钮 -->
|
||||
<div class="equipment-bt">
|
||||
<img src="@/assets/images/equipment/按钮选中-设备准备.png" alt="" />
|
||||
</div>
|
||||
<div :class="hiddenbar ? 'equipment-unfold1' : 'equipment-unfold2'" @click="hiddenbarclick()">
|
||||
<img
|
||||
:src="
|
||||
hiddenbar
|
||||
? getStaticImage('equipment/按钮-展开.png')
|
||||
: getStaticImage('equipment/按钮-收缩.png')
|
||||
"
|
||||
alt=""
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="equipment-layout">
|
||||
<div class="equipment-home">
|
||||
<div
|
||||
class="equipment-leftbutton"
|
||||
@click="prevPhone"
|
||||
:style="{ visibility: currentIndex > 0 ? 'visible' : 'hidden' }"
|
||||
>
|
||||
<img src="@/assets/images/equipment/按钮-左滑.png" alt="" />
|
||||
</div>
|
||||
<div class="equipment-phoneImg">
|
||||
<img :src="phoneList[currentIndex].phoneImg" alt="" />
|
||||
</div>
|
||||
<div
|
||||
class="equipment-rightbutton"
|
||||
@click="nextPhone"
|
||||
:style="{ visibility: currentIndex < phoneList.length - 1 ? 'visible' : 'hidden' }"
|
||||
>
|
||||
<img src="@/assets/images/equipment/按钮-右滑.png" alt="" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="equipment-purpose">
|
||||
<div class="plate">
|
||||
<img src="@/assets/images/equipment/浮空屏.png" alt="" />
|
||||
</div>
|
||||
|
||||
<div class="title">
|
||||
<img :src="platetitleList[currentIndex].title" alt="" />
|
||||
</div>
|
||||
<div class="plate-content">
|
||||
<div class="text">
|
||||
<img :src="platetextList[currentIndex].text" alt="" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<ImgButton class="absolute right-0 top-0" :image="IMAGE_PATHS.COMPONENTS.BACK" @click="back" />
|
||||
<!-- 调试按钮组 -->
|
||||
<!-- <div class="debug-controls">
|
||||
<button @click="enableAllMenuItems" class="debug-btn">启用全部</button>
|
||||
<button @click="disableAllMenuItems" class="debug-btn">禁用全部</button>
|
||||
<button @click="toggleMenuItem('bluetooth-remote')" class="debug-btn">切换蓝牙遥控器</button>
|
||||
</div> -->
|
||||
|
||||
<!-- 引导步骤 -->
|
||||
<GuideSteps
|
||||
:steps="steps"
|
||||
:highlight-selector="currentHighlight"
|
||||
:highlight-padding="12"
|
||||
:highlight-radius="20"
|
||||
@step-change="handleStepChange"
|
||||
position-offset-y="85%"
|
||||
>
|
||||
<GuideStepsItem>
|
||||
<img src="@/assets/images/equipment/设备准备引导1.png" alt="" />
|
||||
</GuideStepsItem>
|
||||
</GuideSteps>
|
||||
</div>
|
||||
</template>
|
||||
<style lang="less" scoped>
|
||||
.equipment-index {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.equipment-layout {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.equipment-bar {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 10;
|
||||
|
||||
.equipment-bt {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: -135px;
|
||||
width: 577px;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.equipment-unfold1 {
|
||||
position: absolute;
|
||||
top: 490px;
|
||||
left: -41px;
|
||||
width: 150px;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: contain;
|
||||
}
|
||||
}
|
||||
|
||||
.equipment-unfold2 {
|
||||
position: absolute;
|
||||
top: 490px;
|
||||
left: 268px;
|
||||
width: 150px;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: contain;
|
||||
}
|
||||
}
|
||||
|
||||
.equipment-item {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
padding-top: 220px;
|
||||
padding-left: 20px;
|
||||
|
||||
.menu-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
//background: linear-gradient(135deg, #1a2a4a 0%, #0f1a2e 100%);
|
||||
border-radius: 12px;
|
||||
padding: 16px 12px;
|
||||
// box-shadow:
|
||||
// 0 0 20px rgba(64, 150, 255, 0.3),
|
||||
// inset 0 0 20px rgba(64, 150, 255, 0.1);
|
||||
// backdrop-filter: blur(10px);
|
||||
}
|
||||
|
||||
.menu-item {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 24px 32px;
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
min-height: 44px;
|
||||
|
||||
&:hover {
|
||||
// background: rgba(64, 150, 255, 0.1);
|
||||
transform: translateX(4px);
|
||||
}
|
||||
|
||||
&--active {
|
||||
// background: rgba(64, 150, 255, 0.2);
|
||||
// box-shadow: 0 0 15px rgba(64, 150, 255, 0.4);
|
||||
|
||||
.menu-item__text {
|
||||
color: #ffffff;
|
||||
text-shadow:
|
||||
0 0 10px rgba(64, 150, 255, 0.8),
|
||||
0 0 20px rgba(64, 150, 255, 0.6),
|
||||
0 0 30px rgba(64, 150, 255, 0.4);
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
|
||||
&__indicator {
|
||||
position: absolute;
|
||||
left: 0px;
|
||||
top: 45%;
|
||||
transform: translateY(-50%);
|
||||
width: 6px;
|
||||
height: 38px;
|
||||
background: #ffffff;
|
||||
border-radius: 2px;
|
||||
box-shadow: 0 0 16px rgba(255, 255, 255, 0.8);
|
||||
}
|
||||
|
||||
&__text {
|
||||
color: #64a5ff;
|
||||
font-size: 30px;
|
||||
font-weight: 800;
|
||||
text-shadow: 0 0 8px rgba(64, 150, 255, 0.6);
|
||||
transition: all 0.3s ease;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
&__status {
|
||||
position: absolute;
|
||||
right: 16px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
|
||||
.status-text {
|
||||
font-size: 12px;
|
||||
color: #999;
|
||||
background: rgba(0, 0, 0, 0.6);
|
||||
padding: 2px 8px;
|
||||
border-radius: 4px;
|
||||
border: 1px solid #333;
|
||||
}
|
||||
}
|
||||
|
||||
// 禁用状态样式
|
||||
&--disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
pointer-events: auto; // 保持可点击以显示禁用提示
|
||||
|
||||
&:hover {
|
||||
transform: none;
|
||||
// background: rgba(255, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.menu-item__text {
|
||||
color: #666;
|
||||
text-shadow: none;
|
||||
}
|
||||
|
||||
.menu-item__indicator {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.guide-ui {
|
||||
top: 80% !important;
|
||||
}
|
||||
|
||||
.dragon-character {
|
||||
top: 80% !important;
|
||||
}
|
||||
}
|
||||
|
||||
.equipment-home {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
.equipment-leftbutton {
|
||||
position: absolute;
|
||||
top: 511px;
|
||||
left: 350px;
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
cursor: pointer;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.equipment-phoneImg {
|
||||
position: absolute;
|
||||
top: 313px;
|
||||
left: 500px;
|
||||
width: 446px;
|
||||
height: 484px;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: contain;
|
||||
}
|
||||
}
|
||||
|
||||
.equipment-rightbutton {
|
||||
position: absolute;
|
||||
top: 511px;
|
||||
right: 770px;
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
cursor: pointer;
|
||||
z-index: 10;
|
||||
}
|
||||
}
|
||||
|
||||
.equipment-purpose {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
.plate {
|
||||
position: absolute;
|
||||
top: 30px;
|
||||
left: 1200px;
|
||||
width: 600px;
|
||||
/* 调整为你需要的宽度 */
|
||||
height: 1000px;
|
||||
/* 调整为你需要的高度 */
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.plate-content {
|
||||
position: absolute;
|
||||
top: 144px;
|
||||
right: 100px;
|
||||
width: 600px;
|
||||
height: 797px;
|
||||
overflow: hidden;
|
||||
/* 隐藏超出部分 */
|
||||
object-fit: contain;
|
||||
|
||||
// display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
overflow-y: auto;
|
||||
/* 允许垂直滚动 */
|
||||
scrollbar-width: none;
|
||||
/* Firefox隐藏滚动条 */
|
||||
-ms-overflow-style: none;
|
||||
/* IE和Edge隐藏滚动条 */
|
||||
perspective: 1000px;
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
display: none;
|
||||
/* Chrome, Safari隐藏滚动条 */
|
||||
}
|
||||
}
|
||||
|
||||
.title {
|
||||
// margin-top: 47px;
|
||||
width: 400px;
|
||||
z-index: 2;
|
||||
position: absolute;
|
||||
top: 36px;
|
||||
left: 1304px;
|
||||
}
|
||||
|
||||
.text {
|
||||
position: absolute;
|
||||
top: -9px;
|
||||
left: 8px;
|
||||
z-index: 2;
|
||||
transform: rotate3d(0, 1, 0, -20deg);
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 调试控制按钮样式
|
||||
.debug-controls {
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
left: 20px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
z-index: 1000;
|
||||
|
||||
.debug-btn {
|
||||
background: rgba(0, 0, 0, 0.8);
|
||||
color: white;
|
||||
border: 1px solid #333;
|
||||
padding: 6px 12px;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
font-size: 12px;
|
||||
transition: background 0.3s ease;
|
||||
|
||||
&:hover {
|
||||
background: rgba(0, 0, 0, 0.9);
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,140 @@
|
||||
<script lang="tsx" setup>
|
||||
import { getBackgroundImage, getStaticImage, IMAGE_PATHS } from '@/utils'
|
||||
import { ImgButton } from '@/components/Button'
|
||||
|
||||
import { ref } from 'vue'
|
||||
import { ProgressBar } from '@/components'
|
||||
import { useRouter } from 'vue-router'
|
||||
|
||||
const router = useRouter()
|
||||
|
||||
const currentStep = ref(2)
|
||||
|
||||
const handleComplete = () => {
|
||||
console.log('完成前置条件')
|
||||
// 处理完成逻辑
|
||||
}
|
||||
|
||||
const handleStepChange = (step: number) => {
|
||||
console.log('步骤变化:', step)
|
||||
// 处理步骤变化逻辑
|
||||
}
|
||||
|
||||
const handleWorkClick = () => {
|
||||
console.log('任务取景按钮点击')
|
||||
// 处理任务取景按钮点击逻辑
|
||||
router.push({ name: 'Work' })
|
||||
}
|
||||
|
||||
const handleClick = () => {
|
||||
// 跳转设备准备
|
||||
router.push({ name: 'equipment' })
|
||||
}
|
||||
const shooting = () => {
|
||||
// 跳转实地取景
|
||||
router.push({ name: 'shooting' })
|
||||
}
|
||||
const highlightShow = ref(true)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="w-full h-full relative">
|
||||
<!-- 背景图片-center -->
|
||||
<div
|
||||
class="absolute inset-0 bg-cover bg-center bg-no-repeat"
|
||||
:style="{ backgroundImage: getBackgroundImage(IMAGE_PATHS.VLOG.BG_CENTER) }"
|
||||
></div>
|
||||
|
||||
<!-- 背景图片 -->
|
||||
<div
|
||||
class="absolute inset-0 bg-cover bg-center bg-no-repeat"
|
||||
:style="{ backgroundImage: getBackgroundImage(IMAGE_PATHS.VLOG.BG) }"
|
||||
></div>
|
||||
|
||||
<!-- 标题 -->
|
||||
<div class="absolute top-2 left-1/2 -translate-x-1/2">
|
||||
<ImgButton :image="IMAGE_PATHS.VLOG.TITLE" />
|
||||
</div>
|
||||
|
||||
<!-- 任务取景按钮 -->
|
||||
<div
|
||||
class="absolute left-24 top-24"
|
||||
:style="{ backgroundImage: getBackgroundImage(IMAGE_PATHS.VLOG.TASK_CAMERA) }"
|
||||
>
|
||||
<ImgButton :image="IMAGE_PATHS.VLOG.TASK_BTN" @click="handleWorkClick" />
|
||||
</div>
|
||||
<!-- 中期拍摄底板 -->
|
||||
<div v-if="highlightShow" class="absolute right-90 ml-[135px]" style="z-index: 998">
|
||||
<img :src="getStaticImage(IMAGE_PATHS.VLOG.Midterm)" />
|
||||
</div>
|
||||
<!-- 进度百分比 -->
|
||||
<div
|
||||
v-if="highlightShow"
|
||||
class="absolute left-1/2 top-[12%] -translate-x-1/2 pointer-events-none"
|
||||
>
|
||||
<div class="flex">
|
||||
<ImgButton :image="IMAGE_PATHS.VLOG.Progress" />
|
||||
<ImgButton :image="IMAGE_PATHS.VLOG.Four" />
|
||||
<ImgButton :image="IMAGE_PATHS.VLOG.Zero" />
|
||||
<ImgButton :image="IMAGE_PATHS.VLOG.Percentage" />
|
||||
</div>
|
||||
</div>
|
||||
<!-- 中期准备按钮文字 -->
|
||||
<div
|
||||
v-if="highlightShow"
|
||||
class="absolute left-[21%] top-[9%] -translate-x-1/2"
|
||||
style="z-index: 998"
|
||||
>
|
||||
<ImgButton
|
||||
:image="IMAGE_PATHS.VLOG.MidtermEquipment"
|
||||
@click="handleClick"
|
||||
class="ml-[60px]"
|
||||
/>
|
||||
<ImgButton :image="IMAGE_PATHS.VLOG.MidtermFraming" @click="shooting" class="ml-[40px]" />
|
||||
<ImgButton :image="IMAGE_PATHS.VLOG.MidtermShoot" class="ml-[20px]" />
|
||||
</div>
|
||||
<!-- 遮罩层 -->
|
||||
<div class="Shadow" v-if="highlightShow">
|
||||
<div>
|
||||
<img src="" alt="" />
|
||||
</div>
|
||||
<img src="@/assets/images/midterm/引导遮罩.png" alt="" />
|
||||
</div>
|
||||
<!-- 叉 -->
|
||||
<div
|
||||
v-if="highlightShow"
|
||||
class="absolute right-0 top-0"
|
||||
style="z-index: 998; cursor: pointer"
|
||||
@click="highlightShow = false"
|
||||
>
|
||||
<img src="@/assets/images/midterm/叉.png" alt="" />
|
||||
</div>
|
||||
<!-- 引导任务 -->
|
||||
<!-- <ImgButton class="absolute right-24 bottom-24" :image="IMAGE_PATHS.VLOG.TASK_PERSON" /> -->
|
||||
|
||||
<div class="absolute bottom-0 w-full bright">
|
||||
<ProgressBar
|
||||
:current-step="currentStep"
|
||||
@complete="handleComplete"
|
||||
@step-change="handleStepChange"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<style lang="less" scopeds>
|
||||
.Shadow {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 997 !important;
|
||||
position: absolute;
|
||||
}
|
||||
}
|
||||
|
||||
.bright {
|
||||
z-index: 999 !important;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,20 @@
|
||||
<template>
|
||||
<div class="absolute bottom-0">
|
||||
<div class="relative">
|
||||
<img src="@/assets/images/shooting/开始取景.png" alt="" />
|
||||
<ImgButton
|
||||
class="absolute bottom-[46%] left-[49%] -translate-x-1/2"
|
||||
image="shooting/按钮-开始取景.png"
|
||||
@click="$emit('start')"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ImgButton } from '@/components/Button'
|
||||
|
||||
defineEmits<{
|
||||
start: []
|
||||
}>()
|
||||
</script>
|
||||
@@ -0,0 +1,77 @@
|
||||
import { ref } from 'vue'
|
||||
|
||||
interface CaptureOptions {
|
||||
width: number
|
||||
height: number
|
||||
scale?: number
|
||||
delay?: number // 截图前的等待时间（用于 UI 更新）
|
||||
resultDelay?: number // 截图后显示结果的延迟
|
||||
onDraw: (ctx: CanvasRenderingContext2D) => void | Promise<void>
|
||||
onComplete?: () => void
|
||||
}
|
||||
|
||||
export function useCanvasCapture() {
|
||||
const isLoading = ref(false)
|
||||
const showModal = ref(false)
|
||||
const capturedImageUrl = ref('')
|
||||
|
||||
const capture = async (options: CaptureOptions) => {
|
||||
if (isLoading.value) return
|
||||
|
||||
const { width, height, scale = 2, delay = 50, resultDelay = 0, onDraw, onComplete } = options
|
||||
|
||||
isLoading.value = true
|
||||
|
||||
try {
|
||||
// 等待 UI 更新
|
||||
if (delay > 0) {
|
||||
await new Promise(resolve => setTimeout(resolve, delay))
|
||||
}
|
||||
|
||||
const canvas = document.createElement('canvas')
|
||||
const ctx = canvas.getContext('2d')
|
||||
if (!ctx) {
|
||||
throw new Error('Cannot get canvas context')
|
||||
}
|
||||
|
||||
// 设置画布大小（高清）
|
||||
canvas.width = width * scale
|
||||
canvas.height = height * scale
|
||||
|
||||
// 填充白色背景（防止透明）
|
||||
ctx.fillStyle = '#ffffff'
|
||||
ctx.fillRect(0, 0, canvas.width, canvas.height)
|
||||
|
||||
// 应用缩放
|
||||
ctx.scale(scale, scale)
|
||||
|
||||
// 执行自定义绘制逻辑
|
||||
await onDraw(ctx)
|
||||
|
||||
capturedImageUrl.value = canvas.toDataURL('image/png')
|
||||
|
||||
// 延迟显示结果
|
||||
if (resultDelay > 0) {
|
||||
setTimeout(() => {
|
||||
isLoading.value = false
|
||||
showModal.value = true
|
||||
onComplete?.()
|
||||
}, resultDelay)
|
||||
} else {
|
||||
isLoading.value = false
|
||||
showModal.value = true
|
||||
onComplete?.()
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Capture failed:', error)
|
||||
isLoading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
isLoading,
|
||||
showModal,
|
||||
capturedImageUrl,
|
||||
capture
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,324 @@
|
||||
<script lang="ts" setup>
|
||||
import { ref, computed } from 'vue'
|
||||
import { getBackgroundImage } from '@/utils'
|
||||
import { ImgButton } from '@/components/Button'
|
||||
import { Overlay } from '@/components/Overlay'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { useViewfinderA } from './useViewfinderA'
|
||||
import { useCanvasCapture } from '../composables/useCanvasCapture'
|
||||
import StartOverlay from '../components/StartOverlay.vue'
|
||||
import LoadingOverlay from '@/components/Loading/LoadingOverlay.vue'
|
||||
|
||||
const router = useRouter()
|
||||
const start = ref(false)
|
||||
|
||||
// 基础逻辑
|
||||
const back = () => router.back()
|
||||
const handleFinish = () => router.push({ name: 'InterviewFilmingLocationB' })
|
||||
|
||||
// 截图功能
|
||||
const { isLoading, showModal, capturedImageUrl, capture } = useCanvasCapture()
|
||||
|
||||
const handleModalClose = () => {
|
||||
showModal.value = false
|
||||
}
|
||||
|
||||
// 手机模式取景
|
||||
const {
|
||||
currentZoom,
|
||||
isCapturing,
|
||||
isDragging,
|
||||
setZoom,
|
||||
startDrag,
|
||||
onDrag,
|
||||
endDrag,
|
||||
getTransform,
|
||||
currentOffsetX,
|
||||
currentOffsetY,
|
||||
handleWheel
|
||||
} = useViewfinderA()
|
||||
|
||||
// 刻度盘配置常量
|
||||
const DIAL_STEP_DEG = 30 // 1x 到 2x 之间的角度差（度）
|
||||
const ZOOM_MIN = 1
|
||||
const ZOOM_MAX = 3
|
||||
const ZOOM_CENTER = 2
|
||||
const TICK_STEP = 0.1 // 刻度步长
|
||||
const MAJOR_TICK_INTERVAL = 5 // 主刻度间隔（0.5x）
|
||||
const INTEGER_TICK_INTERVAL = 10 // 整数刻度间隔（1.0x）
|
||||
|
||||
// 刻度数据类型
|
||||
interface DialTick {
|
||||
zoom: number
|
||||
angle: number
|
||||
isMajor: boolean
|
||||
isInteger: boolean
|
||||
label: string
|
||||
}
|
||||
|
||||
// 计算圆盘旋转角度
|
||||
// 目标：将当前 zoom 对应的刻度旋转到 0 度位置
|
||||
// 3x 在上方（-30deg），1x 在下方（+30deg）
|
||||
const dialRotation = computed(() => {
|
||||
return (currentZoom.value - ZOOM_CENTER) * DIAL_STEP_DEG
|
||||
})
|
||||
|
||||
// 格式化缩放倍数显示
|
||||
const formattedZoom = computed(() => {
|
||||
return currentZoom.value.toFixed(1) + 'x'
|
||||
})
|
||||
|
||||
// 生成刻度数据
|
||||
const dialTicks = computed<DialTick[]>(() => {
|
||||
const ticks: DialTick[] = []
|
||||
const minTick = ZOOM_MIN / TICK_STEP
|
||||
const maxTick = ZOOM_MAX / TICK_STEP
|
||||
|
||||
for (let z = minTick; z <= maxTick; z += 1) {
|
||||
const zoom = z * TICK_STEP
|
||||
// 刻度相对于中心（2x）的角度
|
||||
// 3x -> -30deg（上方），1x -> +30deg（下方）
|
||||
const angle = -(zoom - ZOOM_CENTER) * DIAL_STEP_DEG
|
||||
|
||||
const isMajor = z % MAJOR_TICK_INTERVAL === 0
|
||||
const isInteger = z % INTEGER_TICK_INTERVAL === 0
|
||||
|
||||
ticks.push({
|
||||
zoom,
|
||||
angle,
|
||||
isMajor,
|
||||
isInteger,
|
||||
label: isInteger ? zoom + 'x' : ''
|
||||
})
|
||||
}
|
||||
return ticks
|
||||
})
|
||||
|
||||
const photoImage = ref<HTMLImageElement | null>(null)
|
||||
|
||||
// Canvas 截图配置常量
|
||||
const CANVAS_WIDTH = 871
|
||||
const CANVAS_HEIGHT = 420
|
||||
const CANVAS_SCALE = 2 // 2倍高清
|
||||
const FLASH_DURATION = 100 // 闪光动画时长（ms）
|
||||
const UI_UPDATE_DELAY = 50 // UI 更新延迟（ms）
|
||||
const RESULT_DISPLAY_DELAY = 300 // 结果显示延迟（ms）
|
||||
|
||||
/**
|
||||
* 拍照功能
|
||||
* 使用 Canvas 手动绘制图片，避免 DOM 截图的兼容性问题
|
||||
*/
|
||||
/**
|
||||
* 拍照功能
|
||||
* 使用 Canvas 手动绘制图片，避免 DOM 截图的兼容性问题
|
||||
*/
|
||||
const capturePhoto = async () => {
|
||||
if (isLoading.value) return
|
||||
|
||||
isCapturing.value = true
|
||||
await new Promise(resolve => setTimeout(resolve, FLASH_DURATION))
|
||||
|
||||
await capture({
|
||||
width: CANVAS_WIDTH,
|
||||
height: CANVAS_HEIGHT,
|
||||
scale: CANVAS_SCALE,
|
||||
delay: UI_UPDATE_DELAY,
|
||||
resultDelay: RESULT_DISPLAY_DELAY,
|
||||
onDraw: ctx => {
|
||||
if (!photoImage.value) {
|
||||
throw new Error('Photo image not found')
|
||||
}
|
||||
|
||||
// 计算变换
|
||||
// 1. 移动到中心
|
||||
ctx.translate(CANVAS_WIDTH / 2, CANVAS_HEIGHT / 2)
|
||||
// 2. 应用拖拽偏移
|
||||
ctx.translate(currentOffsetX.value, currentOffsetY.value)
|
||||
// 3. 应用缩放
|
||||
ctx.scale(currentZoom.value, currentZoom.value)
|
||||
// 4. 移回左上角绘制
|
||||
ctx.drawImage(
|
||||
photoImage.value,
|
||||
-CANVAS_WIDTH / 2,
|
||||
-CANVAS_HEIGHT / 2,
|
||||
CANVAS_WIDTH,
|
||||
CANVAS_HEIGHT
|
||||
)
|
||||
},
|
||||
onComplete: () => {
|
||||
isCapturing.value = false
|
||||
}
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="w-full h-full">
|
||||
<div
|
||||
class="relative w-full h-full bg-cover bg-center bg-no-repeat shooting-bg"
|
||||
:style="{ backgroundImage: getBackgroundImage('shooting/取景地模糊背景.png') }"
|
||||
>
|
||||
<ImgButton image="shooting/标题-取景地a.png" class="title-button absolute left-0" />
|
||||
<ImgButton image="shooting/返回.png" class="back-button absolute right-0" @click="back" />
|
||||
|
||||
<StartOverlay v-if="!start" @start="start = true" />
|
||||
|
||||
<!-- 手机拍照界面 -->
|
||||
<div class="absolute bottom-0 w-full h-[766px]" v-else>
|
||||
<img
|
||||
class="phone-frame absolute w-full h-[766px] z-10 pointer-events-none"
|
||||
src="@/assets/images/shooting/shoot.png"
|
||||
alt=""
|
||||
/>
|
||||
|
||||
<!-- 拍摄区域 -->
|
||||
<div
|
||||
class="photo-wrapper absolute pointer-events-none top-[19.2%] left-[48.3%] -translate-x-1/2 w-[871px] h-[420px]"
|
||||
>
|
||||
<div class="photo-container w-full h-full overflow-hidden relative">
|
||||
<!-- 拍摄图片 -->
|
||||
<img
|
||||
ref="photoImage"
|
||||
class="absolute pointer-events-auto w-[871px] h-[420px] ease-out select-none cursor-move touch-none"
|
||||
:class="{
|
||||
'transition-transform duration-300': !isDragging,
|
||||
'cursor-grab': !isDragging,
|
||||
'cursor-grabbing': isDragging
|
||||
}"
|
||||
:style="{ transform: getTransform() }"
|
||||
src="@/assets/images/shooting/取景大图.png"
|
||||
alt=""
|
||||
crossorigin="anonymous"
|
||||
@mousedown="startDrag"
|
||||
@mousemove="onDrag"
|
||||
@mouseup="endDrag"
|
||||
@mouseleave="endDrag"
|
||||
@wheel="handleWheel"
|
||||
@touchstart="startDrag"
|
||||
@touchmove="onDrag"
|
||||
@touchend="endDrag"
|
||||
draggable="false"
|
||||
/>
|
||||
|
||||
<!-- 拍照闪光效果 -->
|
||||
<div
|
||||
v-if="isCapturing"
|
||||
class="flash-overlay absolute inset-0 bg-white animate-flash"
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="shooting-decor relative pointer-events-none top-[19.2%] left-[48.3%] -translate-x-1/2 w-[871px] h-[420px] bg-cover bg-center bg-no-repeat"
|
||||
:style="{ backgroundImage: getBackgroundImage('shooting/拍摄装饰.png') }"
|
||||
>
|
||||
<!-- 仿苹果半圆盘缩放控件 -->
|
||||
<div
|
||||
class="zoom-dial-container absolute pointer-events-auto w-[150px] h-[300px] top-1/2 -translate-y-1/2 -rotate-2 right-[179px] overflow-hidden select-none mask-gradient"
|
||||
>
|
||||
<!-- 指示器 (固定在中心) -->
|
||||
<div
|
||||
class="absolute top-1/2 left-0 w-full -translate-y-1/2 z-20 flex items-center pointer-events-none"
|
||||
>
|
||||
<div
|
||||
class="w-0 h-0 border-t-[8px] border-t-transparent border-l-[14px] border-l-yellow-400 border-b-[8px] border-b-transparent ml-3"
|
||||
></div>
|
||||
<div
|
||||
class="ml-3 bg-black/70 backdrop-blur-md text-yellow-400 font-bold px-3 py-1 rounded text-lg shadow-lg"
|
||||
>
|
||||
{{ formattedZoom }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 旋转圆盘 -->
|
||||
<!-- 圆心在容器右侧外部，形成左侧弧形 -->
|
||||
<div
|
||||
class="dial-wheel absolute top-1/2 right-[-480px] w-[600px] h-[600px] rounded-full bg-black/30 backdrop-blur-md border-[5px] border-white/20 transition-transform duration-100 ease-out origin-center cursor-grab active:cursor-grabbing"
|
||||
:style="{ transform: `translateY(-50%) rotate(${dialRotation}deg)` }"
|
||||
>
|
||||
<div
|
||||
v-for="tick in dialTicks"
|
||||
:key="tick.zoom"
|
||||
class="absolute top-1/2 left-0 w-full h-0 flex justify-start items-center origin-center pointer-events-auto"
|
||||
:style="{ transform: `translate(0, -50%) rotate(${tick.angle}deg)` }"
|
||||
@click.stop="setZoom(tick.zoom)"
|
||||
>
|
||||
<!-- 刻度线本体 (位于圆盘左边缘) -->
|
||||
<div
|
||||
class="absolute left-3 bg-white/90 transition-all duration-200"
|
||||
:class="{
|
||||
'w-10 h-1 opacity-90': tick.isInteger,
|
||||
'w-6 h-0.5 opacity-60': !tick.isInteger && tick.isMajor,
|
||||
'w-3 h-[1px] opacity-40': !tick.isMajor
|
||||
}"
|
||||
></div>
|
||||
<!-- 刻度文字 -->
|
||||
<div
|
||||
v-if="tick.isInteger"
|
||||
class="absolute left-[52px] text-white/90 font-bold text-lg drop-shadow-md"
|
||||
:style="{ transform: `rotate(${-tick.angle - dialRotation}deg)` }"
|
||||
>
|
||||
<span
|
||||
:class="{ 'text-yellow-400 scale-110': currentZoom === tick.zoom }"
|
||||
class="block transition-all duration-200"
|
||||
>
|
||||
{{ tick.label }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 拍摄按钮 -->
|
||||
<ImgButton
|
||||
image="shooting/按钮-拍摄.png"
|
||||
class="capture-button absolute pointer-events-auto right-14 top-1/2 -translate-y-1/2 transition-transform active:scale-95"
|
||||
@click="capturePhoto"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 结果弹窗 -->
|
||||
<Overlay :visible="showModal" @close="handleModalClose">
|
||||
<div class="relative w-[1000px] h-[600px] flex items-center justify-center">
|
||||
<!-- 截图内容 -->
|
||||
<div v-if="capturedImageUrl" class="bg-white p-2 rounded-md -rotate-6">
|
||||
<img :src="capturedImageUrl" alt="拍摄结果" />
|
||||
</div>
|
||||
|
||||
<!-- 操作按钮 -->
|
||||
<div class="absolute bottom-1/2 -right-1/3 translate-y-1/2">
|
||||
<ImgButton image="shooting/按钮-前往下一个取景地" @click="handleFinish" />
|
||||
</div>
|
||||
</div>
|
||||
</Overlay>
|
||||
</div>
|
||||
|
||||
<LoadingOverlay :visible="isLoading" text="正在出片中..." />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="less">
|
||||
@keyframes flash {
|
||||
0% {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
50% {
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.animate-flash {
|
||||
animation: flash 0.3s ease-out;
|
||||
}
|
||||
|
||||
.mask-gradient {
|
||||
mask-image: linear-gradient(to bottom, transparent, black 15%, black 85%, transparent);
|
||||
-webkit-mask-image: linear-gradient(to bottom, transparent, black 15%, black 85%, transparent);
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,149 @@
|
||||
import { ref } from 'vue'
|
||||
import { getTouchDistance, getClientPosition } from '../utils/touchGestures'
|
||||
|
||||
/**
|
||||
* 手机拍照模式的取景逻辑
|
||||
* 支持缩放和拖拽功能
|
||||
*/
|
||||
export function useViewfinderA() {
|
||||
// 缩放限制
|
||||
const MIN_ZOOM = 1
|
||||
const MAX_ZOOM = 3
|
||||
|
||||
// 缩放级别 (保留用于点击按钮)
|
||||
const zoomLevels = [3, 2, 1]
|
||||
const currentZoom = ref(1)
|
||||
const isCapturing = ref(false) // 拍照闪光效果
|
||||
|
||||
// 拖拽相关状态
|
||||
const isDragging = ref(false)
|
||||
const dragStartX = ref(0)
|
||||
const dragStartY = ref(0)
|
||||
const offsetX = ref(0)
|
||||
const offsetY = ref(0)
|
||||
const currentOffsetX = ref(0)
|
||||
const currentOffsetY = ref(0)
|
||||
|
||||
// 双指缩放相关
|
||||
const isPinching = ref(false)
|
||||
const pinchStartDistance = ref(0)
|
||||
const pinchStartZoom = ref(1)
|
||||
|
||||
// 计算边界限制
|
||||
const limitOffset = () => {
|
||||
const containerWidth = 871
|
||||
const containerHeight = 420
|
||||
const scale = currentZoom.value
|
||||
|
||||
// 计算图片缩放后的尺寸
|
||||
const scaledWidth = containerWidth * scale
|
||||
const scaledHeight = containerHeight * scale
|
||||
|
||||
// 计算最大偏移量（图片边缘不能超出容器中心）
|
||||
const maxOffsetX = (scaledWidth - containerWidth) / 2
|
||||
const maxOffsetY = (scaledHeight - containerHeight) / 2
|
||||
|
||||
// 限制偏移量
|
||||
currentOffsetX.value = Math.max(-maxOffsetX, Math.min(maxOffsetX, currentOffsetX.value))
|
||||
currentOffsetY.value = Math.max(-maxOffsetY, Math.min(maxOffsetY, currentOffsetY.value))
|
||||
}
|
||||
|
||||
// 设置缩放级别
|
||||
const setZoom = (zoom: number) => {
|
||||
currentZoom.value = Math.max(MIN_ZOOM, Math.min(MAX_ZOOM, zoom))
|
||||
limitOffset()
|
||||
}
|
||||
|
||||
// 鼠标滚轮缩放
|
||||
const handleWheel = (e: WheelEvent) => {
|
||||
e.preventDefault()
|
||||
// 滚轮向下是正数（缩小），向上是负数（放大）
|
||||
const delta = -e.deltaY * 0.001
|
||||
const newZoom = currentZoom.value + delta
|
||||
setZoom(newZoom)
|
||||
}
|
||||
|
||||
// 开始拖拽 / 触摸
|
||||
const startDrag = (e: MouseEvent | TouchEvent) => {
|
||||
// 双指缩放
|
||||
if ('touches' in e && e.touches.length === 2) {
|
||||
isPinching.value = true
|
||||
isDragging.value = false
|
||||
pinchStartDistance.value = getTouchDistance(e.touches[0], e.touches[1])
|
||||
pinchStartZoom.value = currentZoom.value
|
||||
e.preventDefault()
|
||||
return
|
||||
}
|
||||
|
||||
// 单指拖拽
|
||||
if ('touches' in e && e.touches.length !== 1) return
|
||||
|
||||
isDragging.value = true
|
||||
isPinching.value = false
|
||||
|
||||
const { x: clientX, y: clientY } = getClientPosition(e)
|
||||
|
||||
dragStartX.value = clientX
|
||||
dragStartY.value = clientY
|
||||
offsetX.value = currentOffsetX.value
|
||||
offsetY.value = currentOffsetY.value
|
||||
}
|
||||
|
||||
// 拖拽中 / 缩放中
|
||||
const onDrag = (e: MouseEvent | TouchEvent) => {
|
||||
// 处理双指缩放
|
||||
if (isPinching.value && 'touches' in e && e.touches.length === 2) {
|
||||
const currentDistance = getTouchDistance(e.touches[0], e.touches[1])
|
||||
const scale = currentDistance / pinchStartDistance.value
|
||||
setZoom(pinchStartZoom.value * scale)
|
||||
e.preventDefault()
|
||||
return
|
||||
}
|
||||
|
||||
if (!isDragging.value) return
|
||||
|
||||
const { x: clientX, y: clientY } = getClientPosition(e)
|
||||
|
||||
const deltaX = clientX - dragStartX.value
|
||||
const deltaY = clientY - dragStartY.value
|
||||
|
||||
currentOffsetX.value = offsetX.value + deltaX
|
||||
currentOffsetY.value = offsetY.value + deltaY
|
||||
|
||||
limitOffset()
|
||||
|
||||
// 防止滚动
|
||||
if (e.cancelable) {
|
||||
e.preventDefault()
|
||||
}
|
||||
}
|
||||
|
||||
// 结束拖拽
|
||||
const endDrag = () => {
|
||||
isDragging.value = false
|
||||
isPinching.value = false
|
||||
}
|
||||
|
||||
// 计算transform样式
|
||||
const getTransform = () => {
|
||||
return `translate(${currentOffsetX.value}px, ${currentOffsetY.value}px) scale(${currentZoom.value})`
|
||||
}
|
||||
|
||||
return {
|
||||
// 状态
|
||||
zoomLevels,
|
||||
currentZoom,
|
||||
isCapturing,
|
||||
isDragging,
|
||||
currentOffsetX,
|
||||
currentOffsetY,
|
||||
|
||||
// 方法
|
||||
setZoom,
|
||||
startDrag,
|
||||
onDrag,
|
||||
endDrag,
|
||||
handleWheel,
|
||||
getTransform
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,258 @@
|
||||
<script lang="ts" setup>
|
||||
import { ref } from 'vue'
|
||||
import { getBackgroundImage } from '@/utils'
|
||||
import { ImgButton } from '@/components/Button'
|
||||
import { Overlay } from '@/components/Overlay'
|
||||
import { useViewfinderB } from './useViewfinderB'
|
||||
import { useCanvasCapture } from '../composables/useCanvasCapture'
|
||||
import StartOverlay from '../components/StartOverlay.vue'
|
||||
import LoadingOverlay from '@/components/Loading/LoadingOverlay.vue'
|
||||
import { GuideSteps, GuideStepsItem } from '@/components/Guide'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { useInterviewStore } from '@/stores'
|
||||
|
||||
const router = useRouter()
|
||||
const start = ref(false)
|
||||
|
||||
// 基础逻辑
|
||||
const back = () => router.back()
|
||||
|
||||
// 截图功能
|
||||
const { isLoading, showModal, capturedImageUrl, capture } = useCanvasCapture()
|
||||
|
||||
const handleModalClose = () => {
|
||||
showModal.value = false
|
||||
}
|
||||
|
||||
// 自由取景框模式
|
||||
const { viewfinderContainer, viewfinderBox, viewfinder, startDrag, startResize } = useViewfinderB()
|
||||
|
||||
const showGuide = ref(false)
|
||||
const backgroundImage = ref<HTMLImageElement | null>(null)
|
||||
|
||||
// Canvas 截图配置常量
|
||||
const UI_UPDATE_DELAY = 50 // UI 更新延迟（ms）
|
||||
const CANVAS_SCALE = 2 // Canvas 缩放比例（2倍高清）
|
||||
const GUIDE_SHOW_DELAY = 1000 // 引导显示延迟（ms）
|
||||
|
||||
/**
|
||||
* 截取场景
|
||||
* 使用 Canvas 手动绘制，确保移动端兼容性
|
||||
*/
|
||||
/**
|
||||
* 截取场景
|
||||
* 使用 Canvas 手动绘制，确保移动端兼容性
|
||||
*/
|
||||
const captureScene = async () => {
|
||||
if (isLoading.value) return
|
||||
|
||||
await capture({
|
||||
width: viewfinder.value.width,
|
||||
height: viewfinder.value.height,
|
||||
scale: CANVAS_SCALE,
|
||||
delay: UI_UPDATE_DELAY,
|
||||
onDraw: ctx => {
|
||||
if (!backgroundImage.value) {
|
||||
throw new Error('Background image not found')
|
||||
}
|
||||
|
||||
// 计算图片实际尺寸和设计稿尺寸的缩放比例
|
||||
// viewfinder 的坐标是基于设计稿尺寸（1920x1080）
|
||||
// 但 backgroundImage 的实际尺寸可能不同
|
||||
const imageScaleX = backgroundImage.value.naturalWidth / 1920
|
||||
const imageScaleY = backgroundImage.value.naturalHeight / 1080
|
||||
|
||||
// 绘制背景图片的裁剪区域
|
||||
// 将设计稿坐标转换为图片实际坐标
|
||||
ctx.drawImage(
|
||||
backgroundImage.value,
|
||||
viewfinder.value.x * imageScaleX, // 源图 x（转换为实际坐标）
|
||||
viewfinder.value.y * imageScaleY, // 源图 y（转换为实际坐标）
|
||||
viewfinder.value.width * imageScaleX, // 源图 width（转换为实际坐标）
|
||||
viewfinder.value.height * imageScaleY, // 源图 height（转换为实际坐标）
|
||||
0, // 目标 x
|
||||
0, // 目标 y
|
||||
viewfinder.value.width, // 目标 width
|
||||
viewfinder.value.height // 目标 height
|
||||
)
|
||||
},
|
||||
onComplete: () => {
|
||||
// 延迟显示引导
|
||||
setTimeout(() => {
|
||||
showGuide.value = true
|
||||
}, GUIDE_SHOW_DELAY)
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 完成引导，跳转到 Vlog 页面
|
||||
*/
|
||||
const handleComplete = () => {
|
||||
showGuide.value = false
|
||||
useInterviewStore().setInterviewUnlockProgress(3)
|
||||
router.push({
|
||||
name: 'Interview'
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="w-full h-full">
|
||||
<div
|
||||
class="relative w-full h-full bg-cover bg-center bg-no-repeat shooting-bg"
|
||||
:style="{
|
||||
backgroundImage: start
|
||||
? getBackgroundImage('shooting/取景大图.png')
|
||||
: getBackgroundImage('shooting/取景地模糊背景.png')
|
||||
}"
|
||||
>
|
||||
<!-- 标题 -->
|
||||
<ImgButton image="shooting/标题-取景地b.png" class="title-button absolute left-0" />
|
||||
|
||||
<!-- 返回按钮 -->
|
||||
<ImgButton
|
||||
image="shooting/返回.png"
|
||||
class="back-button absolute right-0 z-50"
|
||||
@click="back"
|
||||
/>
|
||||
|
||||
<StartOverlay v-if="!start" @start="start = true" />
|
||||
|
||||
<!-- 取景 -->
|
||||
<div class="absolute bottom-0 w-full h-full" v-else>
|
||||
<!-- 隐藏的背景图片，用于 Canvas 绘制 -->
|
||||
<img
|
||||
ref="backgroundImage"
|
||||
class="absolute inset-0 w-full h-full object-cover pointer-events-none opacity-0"
|
||||
src="@/assets/images/shooting/取景大图.png"
|
||||
alt=""
|
||||
crossorigin="anonymous"
|
||||
/>
|
||||
|
||||
<!-- 取景框容器 -->
|
||||
<div ref="viewfinderContainer" class="relative w-full h-full">
|
||||
<!-- 四个方向的遮罩层 -->
|
||||
<!-- 上遮罩 -->
|
||||
<div
|
||||
class="mask-layer absolute left-0 right-0 bg-black/60 pointer-events-none z-10"
|
||||
:style="{
|
||||
top: 0,
|
||||
height: viewfinder.y + 'px'
|
||||
}"
|
||||
></div>
|
||||
<!-- 下遮罩 -->
|
||||
<div
|
||||
class="mask-layer absolute left-0 right-0 bg-black/60 pointer-events-none z-10"
|
||||
:style="{
|
||||
top: viewfinder.y + viewfinder.height + 'px',
|
||||
bottom: 0
|
||||
}"
|
||||
></div>
|
||||
<!-- 左遮罩 -->
|
||||
<div
|
||||
class="mask-layer absolute left-0 bg-black/60 pointer-events-none z-10"
|
||||
:style="{
|
||||
top: viewfinder.y + 'px',
|
||||
width: viewfinder.x + 'px',
|
||||
height: viewfinder.height + 'px'
|
||||
}"
|
||||
></div>
|
||||
<!-- 右遮罩 -->
|
||||
<div
|
||||
class="mask-layer absolute right-0 bg-black/60 pointer-events-none z-10"
|
||||
:style="{
|
||||
top: viewfinder.y + 'px',
|
||||
left: viewfinder.x + viewfinder.width + 'px',
|
||||
height: viewfinder.height + 'px'
|
||||
}"
|
||||
></div>
|
||||
|
||||
<!-- 可拖动调整的取景框 -->
|
||||
<div
|
||||
ref="viewfinderBox"
|
||||
class="viewfinder-frame absolute border-4 border-white cursor-move z-20"
|
||||
:style="{
|
||||
left: viewfinder.x + 'px',
|
||||
top: viewfinder.y + 'px',
|
||||
width: viewfinder.width + 'px',
|
||||
height: viewfinder.height + 'px'
|
||||
}"
|
||||
@mousedown="startDrag"
|
||||
@touchstart="startDrag"
|
||||
>
|
||||
<!-- 九宫格辅助线 -->
|
||||
<div class="grid-lines absolute inset-0 grid grid-cols-3 grid-rows-3">
|
||||
<div
|
||||
v-for="i in 9"
|
||||
:key="i"
|
||||
class="border border-white/40"
|
||||
:class="{
|
||||
'border-t-0': i <= 3,
|
||||
'border-b-0': i >= 7,
|
||||
'border-l-0': (i - 1) % 3 === 0,
|
||||
'border-r-0': i % 3 === 0
|
||||
}"
|
||||
></div>
|
||||
</div>
|
||||
|
||||
<!-- 四个角的调整手柄 -->
|
||||
<div
|
||||
class="resize-handle absolute w-6 h-6 bg-white rounded-full -left-3 -top-3 cursor-nwse-resize"
|
||||
@mousedown.stop="startResize('nw', $event)"
|
||||
@touchstart.stop="startResize('nw', $event)"
|
||||
></div>
|
||||
<div
|
||||
class="resize-handle absolute w-6 h-6 bg-white rounded-full -right-3 -top-3 cursor-nesw-resize"
|
||||
@mousedown.stop="startResize('ne', $event)"
|
||||
@touchstart.stop="startResize('ne', $event)"
|
||||
></div>
|
||||
<div
|
||||
class="resize-handle absolute w-6 h-6 bg-white rounded-full -left-3 -bottom-3 cursor-nesw-resize"
|
||||
@mousedown.stop="startResize('sw', $event)"
|
||||
@touchstart.stop="startResize('sw', $event)"
|
||||
></div>
|
||||
<div
|
||||
class="resize-handle absolute w-6 h-6 bg-white rounded-full -right-3 -bottom-3 cursor-nwse-resize"
|
||||
@mousedown.stop="startResize('se', $event)"
|
||||
@touchstart.stop="startResize('se', $event)"
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 底部取景按钮 - 跟随取景框 -->
|
||||
<div
|
||||
class="capture-button-container absolute z-20 -translate-x-1/2 -translate-y-1/2"
|
||||
:style="{
|
||||
left: viewfinder.x + viewfinder.width / 2 + 'px',
|
||||
top: viewfinder.y + viewfinder.height + 'px'
|
||||
}"
|
||||
>
|
||||
<ImgButton class="w-36" image="shooting/按钮-取景" @click="captureScene" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 结果弹窗 -->
|
||||
<Overlay :visible="showModal" @close="handleModalClose">
|
||||
<div class="relative w-[1000px] h-[600px] flex items-center justify-center">
|
||||
<!-- 截图内容 -->
|
||||
<div v-if="capturedImageUrl" class="bg-white p-2 rounded-md -rotate-6">
|
||||
<img :src="capturedImageUrl" alt="拍摄结果" />
|
||||
</div>
|
||||
|
||||
<!-- 操作按钮 -->
|
||||
<!-- <div class="absolute bottom-1/2 -right-1/3 translate-y-1/2">
|
||||
<ImgButton image="shooting/按钮-前往下一个取景地" @click="handleFinish" />
|
||||
</div> -->
|
||||
</div>
|
||||
</Overlay>
|
||||
</div>
|
||||
|
||||
<LoadingOverlay :visible="isLoading" text="正在出片中..." />
|
||||
|
||||
<!-- 引导步骤 -->
|
||||
<GuideSteps v-if="showGuide" positionOffsetY="80%" @complete="handleComplete">
|
||||
<GuideStepsItem> 实地取景已全部完成，现在跟着我走进现场开始正式的拍摄吧~ </GuideStepsItem>
|
||||
</GuideSteps>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,291 @@
|
||||
import { ref, onMounted, onUnmounted } from 'vue'
|
||||
import { getTouchDistance, getTouchCenter, getClientPosition } from '../utils/touchGestures'
|
||||
|
||||
// 设计稿尺寸常量
|
||||
const DESIGN_WIDTH = 1920
|
||||
const DESIGN_HEIGHT = 1080
|
||||
|
||||
/**
|
||||
* 自由取景框模式的逻辑
|
||||
* 支持拖动、四角调整大小、双指缩放
|
||||
*/
|
||||
export function useViewfinderB() {
|
||||
// 取景框相关
|
||||
const viewfinderContainer = ref<HTMLElement>()
|
||||
const viewfinderBox = ref<HTMLElement>()
|
||||
const viewfinder = ref({
|
||||
x: 660, // (1920 - 600) / 2 = 660，居中
|
||||
y: 340, // (1080 - 400) / 2 = 340，居中
|
||||
width: 600,
|
||||
height: 400
|
||||
})
|
||||
|
||||
// 拖动相关状态
|
||||
const isDragging = ref(false)
|
||||
const dragStart = ref({ x: 0, y: 0 })
|
||||
|
||||
// 调整大小相关状态
|
||||
const isResizing = ref(false)
|
||||
const resizeCorner = ref<'nw' | 'ne' | 'sw' | 'se' | null>(null)
|
||||
const resizeStart = ref({
|
||||
x: 0,
|
||||
y: 0,
|
||||
boxX: 0,
|
||||
boxY: 0,
|
||||
boxWidth: 0,
|
||||
boxHeight: 0
|
||||
})
|
||||
|
||||
// 双指缩放相关状态
|
||||
const isPinching = ref(false)
|
||||
const pinchStart = ref({
|
||||
distance: 0,
|
||||
centerX: 0,
|
||||
centerY: 0,
|
||||
boxWidth: 0,
|
||||
boxHeight: 0,
|
||||
boxX: 0,
|
||||
boxY: 0
|
||||
})
|
||||
|
||||
// 将屏幕坐标转换为缩放后的本地坐标
|
||||
const convertClientToLocal = (clientX: number, clientY: number) => {
|
||||
if (!viewfinderContainer.value) return { x: clientX, y: clientY }
|
||||
|
||||
const containerRect = viewfinderContainer.value.getBoundingClientRect()
|
||||
|
||||
// 计算缩放比例
|
||||
const scaleX = containerRect.width / DESIGN_WIDTH
|
||||
const scaleY = containerRect.height / DESIGN_HEIGHT
|
||||
|
||||
// 计算相对于容器的坐标，并转换为设计稿坐标系
|
||||
const localX = (clientX - containerRect.left) / scaleX
|
||||
const localY = (clientY - containerRect.top) / scaleY
|
||||
|
||||
return { x: localX, y: localY }
|
||||
}
|
||||
|
||||
// 开始拖动取景框
|
||||
const startDrag = (e: MouseEvent | TouchEvent) => {
|
||||
if (isResizing.value || isPinching.value) return
|
||||
|
||||
// 检测双指触摸
|
||||
if ('touches' in e && e.touches.length === 2) {
|
||||
// 双指缩放
|
||||
isPinching.value = true
|
||||
const touch1 = e.touches[0]
|
||||
const touch2 = e.touches[1]
|
||||
|
||||
pinchStart.value = {
|
||||
distance: getTouchDistance(touch1, touch2),
|
||||
centerX: (touch1.clientX + touch2.clientX) / 2,
|
||||
centerY: (touch1.clientY + touch2.clientY) / 2,
|
||||
boxWidth: viewfinder.value.width,
|
||||
boxHeight: viewfinder.value.height,
|
||||
boxX: viewfinder.value.x,
|
||||
boxY: viewfinder.value.y
|
||||
}
|
||||
e.preventDefault()
|
||||
return
|
||||
}
|
||||
|
||||
// 单指拖动
|
||||
if ('touches' in e && e.touches.length !== 1) return
|
||||
|
||||
isDragging.value = true
|
||||
const { x: clientX, y: clientY } = getClientPosition(e)
|
||||
|
||||
const localPos = convertClientToLocal(clientX, clientY)
|
||||
|
||||
dragStart.value = {
|
||||
x: localPos.x - viewfinder.value.x,
|
||||
y: localPos.y - viewfinder.value.y
|
||||
}
|
||||
|
||||
e.preventDefault()
|
||||
}
|
||||
|
||||
// 开始调整大小
|
||||
const startResize = (corner: 'nw' | 'ne' | 'sw' | 'se', e: MouseEvent | TouchEvent) => {
|
||||
isResizing.value = true
|
||||
resizeCorner.value = corner
|
||||
|
||||
const { x: clientX, y: clientY } = getClientPosition(e)
|
||||
|
||||
const localPos = convertClientToLocal(clientX, clientY)
|
||||
|
||||
resizeStart.value = {
|
||||
x: localPos.x,
|
||||
y: localPos.y,
|
||||
boxX: viewfinder.value.x,
|
||||
boxY: viewfinder.value.y,
|
||||
boxWidth: viewfinder.value.width,
|
||||
boxHeight: viewfinder.value.height
|
||||
}
|
||||
|
||||
e.preventDefault()
|
||||
}
|
||||
|
||||
// 处理移动
|
||||
const handleMove = (e: MouseEvent | TouchEvent) => {
|
||||
if (!isDragging.value && !isResizing.value && !isPinching.value) return
|
||||
|
||||
// 处理双指缩放
|
||||
if (isPinching.value && 'touches' in e && e.touches.length === 2) {
|
||||
const touch1 = e.touches[0]
|
||||
const touch2 = e.touches[1]
|
||||
|
||||
const currentDistance = getTouchDistance(touch1, touch2)
|
||||
const scale = currentDistance / pinchStart.value.distance
|
||||
|
||||
// 计算新的尺寸
|
||||
let newWidth = pinchStart.value.boxWidth * scale
|
||||
let newHeight = pinchStart.value.boxHeight * scale
|
||||
|
||||
const minSize = 200
|
||||
|
||||
// 限制最小和最大尺寸
|
||||
newWidth = Math.max(minSize, Math.min(newWidth, DESIGN_WIDTH))
|
||||
newHeight = Math.max(minSize, Math.min(newHeight, DESIGN_HEIGHT))
|
||||
|
||||
// 保持中心点不变，计算新的位置
|
||||
const center = getTouchCenter(touch1, touch2)
|
||||
const localCenter = convertClientToLocal(center.x, center.y)
|
||||
|
||||
let newX = localCenter.x - newWidth / 2
|
||||
let newY = localCenter.y - newHeight / 2
|
||||
|
||||
// 边界检测
|
||||
newX = Math.max(0, Math.min(newX, DESIGN_WIDTH - newWidth))
|
||||
newY = Math.max(0, Math.min(newY, DESIGN_HEIGHT - newHeight))
|
||||
|
||||
viewfinder.value.width = newWidth
|
||||
viewfinder.value.height = newHeight
|
||||
viewfinder.value.x = newX
|
||||
viewfinder.value.y = newY
|
||||
|
||||
e.preventDefault()
|
||||
return
|
||||
}
|
||||
|
||||
const { x: clientX, y: clientY } = getClientPosition(e)
|
||||
|
||||
const localPos = convertClientToLocal(clientX, clientY)
|
||||
|
||||
if (isDragging.value && viewfinderContainer.value) {
|
||||
// 拖动取景框
|
||||
let newX = localPos.x - dragStart.value.x
|
||||
let newY = localPos.y - dragStart.value.y
|
||||
|
||||
// 边界检测 - 使用设计稿尺寸
|
||||
newX = Math.max(0, Math.min(newX, DESIGN_WIDTH - viewfinder.value.width))
|
||||
newY = Math.max(0, Math.min(newY, DESIGN_HEIGHT - viewfinder.value.height))
|
||||
|
||||
viewfinder.value.x = newX
|
||||
viewfinder.value.y = newY
|
||||
} else if (isResizing.value && viewfinderContainer.value) {
|
||||
// 调整取景框大小
|
||||
const deltaX = localPos.x - resizeStart.value.x
|
||||
const deltaY = localPos.y - resizeStart.value.y
|
||||
|
||||
const minSize = 200 // 最小尺寸
|
||||
|
||||
if (resizeCorner.value === 'se') {
|
||||
// 右下角 - 使用设计稿尺寸限制
|
||||
viewfinder.value.width = Math.max(
|
||||
minSize,
|
||||
Math.min(resizeStart.value.boxWidth + deltaX, DESIGN_WIDTH - viewfinder.value.x)
|
||||
)
|
||||
viewfinder.value.height = Math.max(
|
||||
minSize,
|
||||
Math.min(resizeStart.value.boxHeight + deltaY, DESIGN_HEIGHT - viewfinder.value.y)
|
||||
)
|
||||
} else if (resizeCorner.value === 'sw') {
|
||||
// 左下角 - 使用设计稿尺寸限制
|
||||
const newWidth = resizeStart.value.boxWidth - deltaX
|
||||
const newX = resizeStart.value.boxX + deltaX
|
||||
if (newWidth >= minSize && newX >= 0) {
|
||||
viewfinder.value.x = newX
|
||||
viewfinder.value.width = newWidth
|
||||
}
|
||||
viewfinder.value.height = Math.max(
|
||||
minSize,
|
||||
Math.min(resizeStart.value.boxHeight + deltaY, DESIGN_HEIGHT - viewfinder.value.y)
|
||||
)
|
||||
} else if (resizeCorner.value === 'ne') {
|
||||
// 右上角 - 使用设计稿尺寸限制
|
||||
const newHeight = resizeStart.value.boxHeight - deltaY
|
||||
const newY = resizeStart.value.boxY + deltaY
|
||||
if (newHeight >= minSize && newY >= 0) {
|
||||
viewfinder.value.y = newY
|
||||
viewfinder.value.height = newHeight
|
||||
}
|
||||
viewfinder.value.width = Math.max(
|
||||
minSize,
|
||||
Math.min(resizeStart.value.boxWidth + deltaX, DESIGN_WIDTH - viewfinder.value.x)
|
||||
)
|
||||
} else if (resizeCorner.value === 'nw') {
|
||||
// 左上角 - 使用设计稿尺寸限制
|
||||
const newWidth = resizeStart.value.boxWidth - deltaX
|
||||
const newHeight = resizeStart.value.boxHeight - deltaY
|
||||
const newX = resizeStart.value.boxX + deltaX
|
||||
const newY = resizeStart.value.boxY + deltaY
|
||||
|
||||
if (newWidth >= minSize && newX >= 0) {
|
||||
viewfinder.value.x = newX
|
||||
viewfinder.value.width = newWidth
|
||||
}
|
||||
if (newHeight >= minSize && newY >= 0) {
|
||||
viewfinder.value.y = newY
|
||||
viewfinder.value.height = newHeight
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
e.preventDefault()
|
||||
}
|
||||
|
||||
// 结束拖动或调整
|
||||
const handleEnd = () => {
|
||||
isDragging.value = false
|
||||
isResizing.value = false
|
||||
isPinching.value = false
|
||||
resizeCorner.value = null
|
||||
}
|
||||
|
||||
// 挂载时添加全局事件监听
|
||||
onMounted(() => {
|
||||
document.addEventListener('mousemove', handleMove)
|
||||
document.addEventListener('mouseup', handleEnd)
|
||||
document.addEventListener('touchmove', handleMove)
|
||||
document.addEventListener('touchend', handleEnd)
|
||||
})
|
||||
|
||||
// 卸载时移除事件监听
|
||||
onUnmounted(() => {
|
||||
document.removeEventListener('mousemove', handleMove)
|
||||
document.removeEventListener('mouseup', handleEnd)
|
||||
document.removeEventListener('touchmove', handleMove)
|
||||
document.removeEventListener('touchend', handleEnd)
|
||||
})
|
||||
|
||||
return {
|
||||
// Refs
|
||||
viewfinderContainer,
|
||||
viewfinderBox,
|
||||
|
||||
// 状态
|
||||
viewfinder,
|
||||
isDragging,
|
||||
isResizing,
|
||||
isPinching,
|
||||
|
||||
// 方法
|
||||
startDrag,
|
||||
startResize,
|
||||
|
||||
// 常量
|
||||
DESIGN_WIDTH,
|
||||
DESIGN_HEIGHT
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,222 @@
|
||||
<script lang="ts" setup>
|
||||
import { ref, computed } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { GuideSteps, GuideStepsItem } from '@/components/Guide'
|
||||
import { Overlay } from '@/components/Overlay'
|
||||
import { ImgButton } from '@/components/Button'
|
||||
import { getBackgroundImage, IMAGE_PATHS } from '@/utils'
|
||||
import shootingtitle from '@/assets/images/shooting/标题-实地取景.png'
|
||||
import videoSrc from '/video/xinshou_jiuzhonggoutufa.mp4'
|
||||
import KnowledgeCard from '@/components/KnowledgeCard/KnowledgeCard.vue'
|
||||
|
||||
type Btn = {
|
||||
key: string
|
||||
name: string
|
||||
btnImage: string
|
||||
images: string[]
|
||||
desc: string
|
||||
}
|
||||
|
||||
const router = useRouter()
|
||||
|
||||
const showModal = ref(false)
|
||||
|
||||
const showModal2 = ref(false)
|
||||
const showModal3 = ref(false)
|
||||
const currentItem = ref<Btn>({
|
||||
key: '',
|
||||
name: '',
|
||||
btnImage: '',
|
||||
images: [],
|
||||
desc: ''
|
||||
})
|
||||
|
||||
const btnList = ref<Btn[]>([
|
||||
{
|
||||
key: '1',
|
||||
name: '居中构图',
|
||||
btnImage: 'shooting/居中构图底板',
|
||||
desc: '居中构图就是主体放在画面中心，让画面更稳定主体更突出，拍摄时需避免选取杂乱的背景，可以用大光圈或者长焦距让背景虚化使主体从背景中跳出来适合拍摄单个主体，操作比较简单，非常适合新手使用',
|
||||
images: ['shooting/居中构图1', 'shooting/居中构图2']
|
||||
},
|
||||
{
|
||||
key: '2',
|
||||
name: '三分法构图',
|
||||
btnImage: 'shooting/三分法构图底板',
|
||||
desc: '三分法构图又称九宫格构图，就是把拍摄主体置于九宫格的任意一条三分位置，三分构图法是比较常见的构图法可以视觉上让整体画面更加生动，使用三分构图法拍摄人像时，尽量占据画面的下2格比例和重心会更协调',
|
||||
images: ['shooting/图片待定1', 'shooting/图片待定2']
|
||||
},
|
||||
{
|
||||
key: '3',
|
||||
name: '对角线构图',
|
||||
btnImage: 'shooting/对角线构图底板',
|
||||
desc: '对角线构图属于引导线构图的一种，所以也是借助引导线的视觉引导效果来突出强调主体。另外对角线构图在画面中制造出对角线的走向即可。',
|
||||
images: ['shooting/对角线构图1', 'shooting/对角线构图2']
|
||||
}
|
||||
])
|
||||
|
||||
const handleModalClose = () => {
|
||||
showModal.value = false
|
||||
}
|
||||
|
||||
const handleClick = (item: any) => {
|
||||
currentItem.value = item
|
||||
showModal2.value = true
|
||||
}
|
||||
const currentCompositionKey = computed(() => {
|
||||
const k = currentItem.value.key
|
||||
if (k === '1' || k === '2' || k === '3') return k
|
||||
return '1'
|
||||
})
|
||||
|
||||
const handleClickA = () => {
|
||||
// 跳转设备准备
|
||||
router.push({ name: 'InterviewFilmingLocationA' })
|
||||
}
|
||||
const handleClickB = () => {
|
||||
// 跳转设备准备
|
||||
router.push({ name: 'InterviewFilmingLocationB' })
|
||||
}
|
||||
const back = () => {
|
||||
// 跳转设备准备
|
||||
router.back()
|
||||
}
|
||||
</script>
|
||||
<template>
|
||||
<div class="shooting-index">
|
||||
<!-- 背景图片 -->
|
||||
<div
|
||||
class="absolute inset-0 bg-cover bg-center bg-no-repeat shooting-bg"
|
||||
:style="{ backgroundImage: getBackgroundImage(IMAGE_PATHS.SHOOTING.BG) }"
|
||||
>
|
||||
<div class="shooting-title">
|
||||
<img :src="shootingtitle" alt="" />
|
||||
</div>
|
||||
<div class="shooting-return">
|
||||
<ImgButton image="shooting/返回.png" @click="back" />
|
||||
</div>
|
||||
<div class="shooting-left">
|
||||
<ImgButton image="shooting/按钮-取景地A.png" @click="handleClickA" />
|
||||
</div>
|
||||
<div class="shooting-right">
|
||||
<ImgButton image="shooting/按钮-取景地B.png" @click="handleClickB" />
|
||||
</div>
|
||||
<div class="shooting-composition">
|
||||
<ImgButton image="shooting/构图指南.png" @click="showModal = true" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 引导步骤 -->
|
||||
<GuideSteps
|
||||
:highlight-selector="'.mybutton'"
|
||||
:highlight-padding="12"
|
||||
:highlight-radius="20"
|
||||
position-offset-y="85%"
|
||||
>
|
||||
<GuideStepsItem> 在走进拍摄场景之前，我们先来查看一下构图指南。 </GuideStepsItem>
|
||||
</GuideSteps>
|
||||
|
||||
<!-- 保存图片弹窗 -->
|
||||
<Overlay
|
||||
:visible="showModal"
|
||||
:clickable="false"
|
||||
:customStyle="{
|
||||
backgroundImage: getBackgroundImage('shooting/构图指南底图')
|
||||
}"
|
||||
customClass="inset-0 bg-cover bg-center bg-no-repeat"
|
||||
contentClass="relative w-full h-full"
|
||||
>
|
||||
<!-- 返回 -->
|
||||
<ImgButton
|
||||
class="absolute right-0 top-0 z-10"
|
||||
:image="IMAGE_PATHS.COMPONENTS.BACK"
|
||||
@click="handleModalClose"
|
||||
/>
|
||||
|
||||
<!-- 构图指南 -->
|
||||
<ImgButton class="absolute left-0 top-0 z-10" image="shooting/标题-构图指南" />
|
||||
|
||||
<!-- 新手导航视频 -->
|
||||
<ImgButton
|
||||
class="absolute left-28 top-[calc(50%-40px)] -translate-y-1/2"
|
||||
image="shooting/新手导航-视频回顾"
|
||||
@click="showModal3 = true"
|
||||
/>
|
||||
|
||||
<div class="absolute top-[30%] right-10">
|
||||
<ImgButton
|
||||
v-for="item in btnList"
|
||||
:key="item.key"
|
||||
:image="item.btnImage"
|
||||
@click="handleClick(item)"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- 知识卡片 -->
|
||||
<KnowledgeCard
|
||||
v-if="showModal2 && currentItem.key"
|
||||
:visible="showModal2"
|
||||
:title="currentItem.name"
|
||||
:desc="currentItem.desc"
|
||||
:images="currentItem.images"
|
||||
:compositionKey="currentCompositionKey"
|
||||
@close="showModal2 = false"
|
||||
/>
|
||||
<!-- 视频 -->
|
||||
<Overlay :visible="showModal3" :clickable="false">
|
||||
<video :src="videoSrc" controls></video>
|
||||
<!-- 返回 -->
|
||||
<ImgButton
|
||||
class="absolute right-0 top-0 z-10"
|
||||
:image="IMAGE_PATHS.COMPONENTS.CLOSE"
|
||||
@click="showModal3 = false"
|
||||
/>
|
||||
</Overlay>
|
||||
</Overlay>
|
||||
</div>
|
||||
</template>
|
||||
<style lang="less" scoped>
|
||||
.shooting-bg {
|
||||
position: absolute;
|
||||
|
||||
.shooting-title {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.shooting-return {
|
||||
position: absolute;
|
||||
right: -90%;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.shooting-left {
|
||||
position: absolute;
|
||||
left: 16%;
|
||||
top: 50%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.shooting-right {
|
||||
position: absolute;
|
||||
right: -55%;
|
||||
top: 50%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.shooting-composition {
|
||||
position: absolute;
|
||||
left: 24px;
|
||||
bottom: -90%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,47 @@
|
||||
/**
|
||||
* 触摸手势工具函数
|
||||
* 用于处理触摸事件的通用计算
|
||||
*/
|
||||
|
||||
/**
|
||||
* 计算两个触摸点之间的距离
|
||||
* @param touch1 第一个触摸点
|
||||
* @param touch2 第二个触摸点
|
||||
* @returns 两点之间的欧氏距离
|
||||
*/
|
||||
export const getTouchDistance = (touch1: Touch, touch2: Touch): number => {
|
||||
const dx = touch1.clientX - touch2.clientX
|
||||
const dy = touch1.clientY - touch2.clientY
|
||||
return Math.sqrt(dx * dx + dy * dy)
|
||||
}
|
||||
|
||||
/**
|
||||
* 计算两个触摸点的中心坐标
|
||||
* @param touch1 第一个触摸点
|
||||
* @param touch2 第二个触摸点
|
||||
* @returns 中心点坐标 {x, y}
|
||||
*/
|
||||
export const getTouchCenter = (touch1: Touch, touch2: Touch) => {
|
||||
return {
|
||||
x: (touch1.clientX + touch2.clientX) / 2,
|
||||
y: (touch1.clientY + touch2.clientY) / 2
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 从鼠标或触摸事件中获取客户端坐标
|
||||
* @param e 鼠标事件或触摸事件
|
||||
* @returns 客户端坐标 {x, y}
|
||||
*/
|
||||
export const getClientPosition = (e: MouseEvent | TouchEvent) => {
|
||||
if ('touches' in e && e.touches.length > 0) {
|
||||
return {
|
||||
x: e.touches[0].clientX,
|
||||
y: e.touches[0].clientY
|
||||
}
|
||||
}
|
||||
return {
|
||||
x: (e as MouseEvent).clientX,
|
||||
y: (e as MouseEvent).clientY
|
||||
}
|
||||
}
|
||||
Reference in new issue
Block a user