forked from zhongyidian/super_video
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,113 @@
|
||||
<script setup lang="ts">
|
||||
import { useRouter } from 'vue-router'
|
||||
import { getBackgroundImage, IMAGE_PATHS } from '@/utils'
|
||||
import { ImgButton } from '@/components/Button'
|
||||
|
||||
const router = useRouter()
|
||||
|
||||
const handleClose = () => {
|
||||
router.back()
|
||||
}
|
||||
|
||||
const goTimeLapse = () => {
|
||||
router.push({ name: 'VlogOnsiteTimeLapse' })
|
||||
}
|
||||
|
||||
const goSlider = () => {
|
||||
router.push({ name: 'VlogOnsiteSlider' })
|
||||
}
|
||||
|
||||
const goSlowShutterDay = () => {
|
||||
router.push({ name: 'VlogOnsiteSlowShutterDay' })
|
||||
}
|
||||
|
||||
const goSlowShutterNight = () => {
|
||||
router.push({ name: 'VlogOnsiteSlowShutterNight' })
|
||||
}
|
||||
|
||||
const goLowAngle = () => {
|
||||
router.push({ name: 'VlogOnsiteLowAngle' })
|
||||
}
|
||||
|
||||
const goRandom = () => {
|
||||
router.push({ name: 'VlogOnsiteRandom' })
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="relative w-full h-full overflow-hidden">
|
||||
<!-- 背景 -->
|
||||
<div
|
||||
class="absolute inset-0 bg-cover bg-center bg-no-repeat"
|
||||
:style="{ backgroundImage: getBackgroundImage(IMAGE_PATHS.SHOOTING.BG) }"
|
||||
></div>
|
||||
|
||||
<!-- 内容卡片 + 按钮 -->
|
||||
<div class="absolute inset-0 flex items-center justify-center px-16 pointer-events-none">
|
||||
<div
|
||||
class="max-w-6xl w-full bg-black/35 backdrop-blur-md rounded-3xl border border-white/15 p-10 space-y-8 text-white pointer-events-auto"
|
||||
>
|
||||
<div class="flex items-baseline justify-between gap-6">
|
||||
<h1 class="text-5xl font-extrabold tracking-wide">现场拍摄</h1>
|
||||
<span class="text-xl opacity-80">从不同维度练习你的镜头语言</span>
|
||||
</div>
|
||||
<p class="text-xl leading-8 opacity-90">
|
||||
选择下面任意一个练习模块，进入对应的现场拍摄场景，按提示完成小任务，逐步建立自己的拍摄手感和创作节奏。
|
||||
</p>
|
||||
|
||||
<div class="grid grid-cols-3 gap-6">
|
||||
<button type="button" class="onsite-btn" @click="goTimeLapse">
|
||||
<span class="onsite-btn-title">延时拍摄</span>
|
||||
<span class="onsite-btn-desc">记录时间流动，让平凡场景变得有节奏、有变化。</span>
|
||||
</button>
|
||||
|
||||
<button type="button" class="onsite-btn" @click="goSlider">
|
||||
<span class="onsite-btn-title">滑轨拍摄</span>
|
||||
<span class="onsite-btn-desc">通过平稳移动镜头，营造空间感和叙事推进感。</span>
|
||||
</button>
|
||||
|
||||
<button type="button" class="onsite-btn" @click="goSlowShutterDay">
|
||||
<span class="onsite-btn-title">慢门拍摄 · 白天</span>
|
||||
<span class="onsite-btn-desc">在白天环境下练习慢门，营造水流、车流等运动轨迹。</span>
|
||||
</button>
|
||||
|
||||
<button type="button" class="onsite-btn" @click="goSlowShutterNight">
|
||||
<span class="onsite-btn-title">慢门拍摄 · 夜晚</span>
|
||||
<span class="onsite-btn-desc">利用城市灯光，拍出具有节奏感和氛围感的夜景画面。</span>
|
||||
</button>
|
||||
|
||||
<button type="button" class="onsite-btn" @click="goLowAngle">
|
||||
<span class="onsite-btn-title">低角度拍摄</span>
|
||||
<span class="onsite-btn-desc">从低视角观察世界，突出主体气势，改变日常视角。</span>
|
||||
</button>
|
||||
|
||||
<button type="button" class="onsite-btn" @click="goRandom">
|
||||
<span class="onsite-btn-title">创作随机性</span>
|
||||
<span class="onsite-btn-desc">跟随直觉自由取景，捕捉那些意料之外的画面惊喜。</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 关闭 -->
|
||||
<ImgButton
|
||||
class="absolute right-0 top-0 z-20"
|
||||
:image="IMAGE_PATHS.COMPONENTS.BACK"
|
||||
@click="handleClose"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.onsite-btn {
|
||||
@apply relative flex flex-col items-start justify-between rounded-2xl px-6 py-5 text-left bg-white/5 hover:bg-white/10 border border-white/10 hover:border-white/30 transition-all duration-200 cursor-pointer;
|
||||
}
|
||||
|
||||
.onsite-btn-title {
|
||||
@apply text-2xl font-bold mb-2;
|
||||
}
|
||||
|
||||
.onsite-btn-desc {
|
||||
@apply text-base leading-7 opacity-80;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,40 @@
|
||||
<script setup lang="ts">
|
||||
import { useRouter } from 'vue-router'
|
||||
import { ImgButton } from '@/components/Button'
|
||||
import { getBackgroundImage, IMAGE_PATHS } from '@/utils'
|
||||
|
||||
const router = useRouter()
|
||||
|
||||
const handleBack = () => {
|
||||
router.back()
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="relative w-full h-full overflow-hidden">
|
||||
<div
|
||||
class="absolute inset-0 bg-cover bg-center bg-no-repeat"
|
||||
:style="{ backgroundImage: getBackgroundImage(IMAGE_PATHS.SHOOTING.BG) }"
|
||||
></div>
|
||||
|
||||
<div class="absolute inset-0 flex items-center justify-center px-16 pointer-events-none">
|
||||
<div
|
||||
class="max-w-5xl w-full bg-black/40 backdrop-blur-md rounded-3xl border border-white/20 p-10 space-y-6 text-white pointer-events-auto"
|
||||
>
|
||||
<h1 class="text-4xl font-extrabold tracking-wide">低角度拍摄</h1>
|
||||
<p class="text-lg leading-8 opacity-90">
|
||||
尝试把镜头放低，接近地面或桌面，从下往上看主体，观察画面气势和空间的变化。
|
||||
</p>
|
||||
<p class="text-base leading-7 opacity-80">
|
||||
你可以拍摄人物、建筑或生活小物件，注意前景、主体与背景的组合，让画面更具故事感和张力。
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<ImgButton
|
||||
class="absolute right-0 top-0 z-20"
|
||||
:image="IMAGE_PATHS.COMPONENTS.BACK"
|
||||
@click="handleBack"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,40 @@
|
||||
<script setup lang="ts">
|
||||
import { useRouter } from 'vue-router'
|
||||
import { ImgButton } from '@/components/Button'
|
||||
import { getBackgroundImage, IMAGE_PATHS } from '@/utils'
|
||||
|
||||
const router = useRouter()
|
||||
|
||||
const handleBack = () => {
|
||||
router.back()
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="relative w-full h-full overflow-hidden">
|
||||
<div
|
||||
class="absolute inset-0 bg-cover bg-center bg-no-repeat"
|
||||
:style="{ backgroundImage: getBackgroundImage(IMAGE_PATHS.SHOOTING.BG) }"
|
||||
></div>
|
||||
|
||||
<div class="absolute inset-0 flex items-center justify-center px-16 pointer-events-none">
|
||||
<div
|
||||
class="max-w-5xl w-full bg-black/40 backdrop-blur-md rounded-3xl border border-white/20 p-10 space-y-6 text-white pointer-events-auto"
|
||||
>
|
||||
<h1 class="text-4xl font-extrabold tracking-wide">创作随机性</h1>
|
||||
<p class="text-lg leading-8 opacity-90">
|
||||
不预设太多规则，带着手机走一圈，只要看到有感觉的光线、人物或场景，就果断按下录制键。
|
||||
</p>
|
||||
<p class="text-base leading-7 opacity-80">
|
||||
可以从“声音”“光线”“动作”这三个维度去寻找灵感，把这些零散片段记录下来，之后再在剪辑中重新组合，形成属于你的故事。
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<ImgButton
|
||||
class="absolute right-0 top-0 z-20"
|
||||
:image="IMAGE_PATHS.COMPONENTS.BACK"
|
||||
@click="handleBack"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,40 @@
|
||||
<script setup lang="ts">
|
||||
import { useRouter } from 'vue-router'
|
||||
import { ImgButton } from '@/components/Button'
|
||||
import { getBackgroundImage, IMAGE_PATHS } from '@/utils'
|
||||
|
||||
const router = useRouter()
|
||||
|
||||
const handleBack = () => {
|
||||
router.back()
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="relative w-full h-full overflow-hidden">
|
||||
<div
|
||||
class="absolute inset-0 bg-cover bg-center bg-no-repeat"
|
||||
:style="{ backgroundImage: getBackgroundImage(IMAGE_PATHS.SHOOTING.BG) }"
|
||||
></div>
|
||||
|
||||
<div class="absolute inset-0 flex items-center justify-center px-16 pointer-events-none">
|
||||
<div
|
||||
class="max-w-5xl w-full bg-black/40 backdrop-blur-md rounded-3xl border border-white/20 p-10 space-y-6 text-white pointer-events-auto"
|
||||
>
|
||||
<h1 class="text-4xl font-extrabold tracking-wide">滑轨拍摄</h1>
|
||||
<p class="text-lg leading-8 opacity-90">
|
||||
使用滑轨或模拟滑轨移动（例如沿桌面平移手机），练习横向、前后、环绕等不同方向的移动镜头。
|
||||
</p>
|
||||
<p class="text-base leading-7 opacity-80">
|
||||
重点关注移动速度的稳定性，以及前景、主体和背景在画面中的关系，尝试拍出有空间层次感的镜头。
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<ImgButton
|
||||
class="absolute right-0 top-0 z-20"
|
||||
:image="IMAGE_PATHS.COMPONENTS.BACK"
|
||||
@click="handleBack"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,40 @@
|
||||
<script setup lang="ts">
|
||||
import { useRouter } from 'vue-router'
|
||||
import { ImgButton } from '@/components/Button'
|
||||
import { getBackgroundImage, IMAGE_PATHS } from '@/utils'
|
||||
|
||||
const router = useRouter()
|
||||
|
||||
const handleBack = () => {
|
||||
router.back()
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="relative w-full h-full overflow-hidden">
|
||||
<div
|
||||
class="absolute inset-0 bg-cover bg-center bg-no-repeat"
|
||||
:style="{ backgroundImage: getBackgroundImage(IMAGE_PATHS.SHOOTING.BG) }"
|
||||
></div>
|
||||
|
||||
<div class="absolute inset-0 flex items-center justify-center px-16 pointer-events-none">
|
||||
<div
|
||||
class="max-w-5xl w-full bg-black/40 backdrop-blur-md rounded-3xl border border-white/20 p-10 space-y-6 text-white pointer-events-auto"
|
||||
>
|
||||
<h1 class="text-4xl font-extrabold tracking-wide">慢门拍摄 · 白天</h1>
|
||||
<p class="text-lg leading-8 opacity-90">
|
||||
在白天选择有连续运动元素的场景（如喷泉、水流、人群、车流等），尝试使用慢门制造“运动模糊”的效果。
|
||||
</p>
|
||||
<p class="text-base leading-7 opacity-80">
|
||||
建议：固定机位，尽量降低感光度，必要时使用减光配件；注意避免画面过曝，同时保留主体的清晰度与背景的动感。
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<ImgButton
|
||||
class="absolute right-0 top-0 z-20"
|
||||
:image="IMAGE_PATHS.COMPONENTS.BACK"
|
||||
@click="handleBack"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,41 @@
|
||||
<script setup lang="ts">
|
||||
import { useRouter } from 'vue-router'
|
||||
import { ImgButton } from '@/components/Button'
|
||||
import { getBackgroundImage, IMAGE_PATHS } from '@/utils'
|
||||
|
||||
const router = useRouter()
|
||||
|
||||
const handleBack = () => {
|
||||
router.back()
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="relative w-full h-full overflow-hidden">
|
||||
<div
|
||||
class="absolute inset-0 bg-cover bg-center bg-no-repeat"
|
||||
:style="{ backgroundImage: getBackgroundImage(IMAGE_PATHS.SHOOTING.BG) }"
|
||||
></div>
|
||||
|
||||
<div class="absolute inset-0 flex items-center justify-center px-16 pointer-events-none">
|
||||
<div
|
||||
class="max-w-5xl w-full bg-black/40 backdrop-blur-md rounded-3xl border border-white/20 p-10 space-y-6 text-white pointer-events-auto"
|
||||
>
|
||||
<h1 class="text-4xl font-extrabold tracking-wide">慢门拍摄 · 夜晚</h1>
|
||||
<p class="text-lg leading-8 opacity-90">
|
||||
在夜晚的城市路口、桥上或高处，尝试记录车流灯轨、行人轨迹等富有节奏感的光线运动。
|
||||
</p>
|
||||
<p class="text-base leading-7 opacity-80">
|
||||
建议：寻找安全稳定的拍摄点，将设备固定好，控制好曝光时间与
|
||||
ISO，避免过度抖动，让光轨清晰流畅。
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<ImgButton
|
||||
class="absolute right-0 top-0 z-20"
|
||||
:image="IMAGE_PATHS.COMPONENTS.BACK"
|
||||
@click="handleBack"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,157 @@
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { ImgButton } from '@/components/Button'
|
||||
import { Video, QuestionQuiz, type Question } from '@/components'
|
||||
import { getBackgroundImage, IMAGE_PATHS } from '@/utils'
|
||||
|
||||
const router = useRouter()
|
||||
|
||||
// 延时拍摄视频 URL（占位，后续可替换）
|
||||
const timeLapseVideoUrl =
|
||||
'https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4'
|
||||
|
||||
const handleBack = () => {
|
||||
router.back()
|
||||
}
|
||||
|
||||
// 交互一 & 交互二：选择题
|
||||
const questions = ref<Question[]>([
|
||||
{
|
||||
id: 1,
|
||||
title: '交互一｜观察判断（引导问题）',
|
||||
description:
|
||||
'画面状态：展示一张「江边建筑 + 天空」的静态画面截图（不播放视频）。如果你只用一条普通视频来拍这个场景，你觉得画面最难被感知的是什么？',
|
||||
options: [
|
||||
{ id: 'a', label: '建筑的外形结构' },
|
||||
{ id: 'b', label: '天空的颜色' },
|
||||
{ id: 'c', label: '时间的变化' },
|
||||
{ id: 'd', label: '画面的清晰度' }
|
||||
],
|
||||
correctOptionId: 'c',
|
||||
mediaSrc: 'shooting/延时场景静帧.png' // 占位：请按需替换为真实图片
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
title: '交互二｜方法选择（技术判断）',
|
||||
description:
|
||||
'画面状态：同一场景的短视频首帧（仍未播放）。如果希望在很短时间内，让观众明显感知"时间正在流动"，你会选择哪种拍摄方式？',
|
||||
options: [
|
||||
{ id: 'a', label: '手持拍摄' },
|
||||
{ id: 'b', label: '慢动作拍摄' },
|
||||
{ id: 'c', label: '延时拍摄' },
|
||||
{ id: 'd', label: '推拉镜头' }
|
||||
],
|
||||
correctOptionId: 'c',
|
||||
mediaSrc: 'shooting/延时场景静帧.png' // 占位：请按需替换为真实图片
|
||||
}
|
||||
])
|
||||
|
||||
const showObserveStep = ref(false)
|
||||
const showSummary = ref(false) // 是否显示交互四总结
|
||||
const videoPlaying = ref(false) // 视频播放状态
|
||||
|
||||
// 答题完成，进入交互三（视频）
|
||||
const handleQuestionsComplete = () => {
|
||||
showObserveStep.value = true
|
||||
showSummary.value = false // 先显示交互三（视频）
|
||||
}
|
||||
|
||||
// 视频播放完成，进入交互四总结
|
||||
const handleVideoEnded = () => {
|
||||
showSummary.value = true
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="relative w-full h-full overflow-hidden">
|
||||
<!-- 背景 -->
|
||||
<div
|
||||
class="absolute inset-0 bg-cover bg-center bg-no-repeat"
|
||||
:style="{ backgroundImage: getBackgroundImage(IMAGE_PATHS.SHOOTING.BG) }"
|
||||
></div>
|
||||
|
||||
<!-- 交互一 & 交互二：选择题 -->
|
||||
<QuestionQuiz
|
||||
v-if="!showObserveStep"
|
||||
:questions="questions"
|
||||
@complete="handleQuestionsComplete"
|
||||
/>
|
||||
<!-- 交互三：观察型 - 播放视频 -->
|
||||
<div
|
||||
v-if="showObserveStep && !showSummary"
|
||||
class="absolute inset-0 flex items-center justify-center px-20 pointer-events-none"
|
||||
>
|
||||
<div
|
||||
class="max-w-7xl w-full bg-black/40 backdrop-blur-md rounded-3xl border border-white/20 p-12 space-y-8 text-white pointer-events-auto"
|
||||
>
|
||||
<div>
|
||||
<h2 class="text-2xl font-bold mb-4">交互三｜观察型（无选项）</h2>
|
||||
<p class="text-xl leading-7 opacity-90 mb-5">
|
||||
播放延时拍摄视频（延时拍摄 .mp4）。在这个延时画面中，请注意天空变化与光影移动的节奏 ——
|
||||
它们在短时间内被连续表现出来，这就是延时拍摄让「时间流动」变得可见的关键。
|
||||
</p>
|
||||
<div class="rounded-2xl overflow-hidden border border-white/20 bg-black/60 min-h-[500px]">
|
||||
<Video
|
||||
:src="timeLapseVideoUrl"
|
||||
v-model="videoPlaying"
|
||||
:muted="false"
|
||||
:volume="1"
|
||||
:controls="true"
|
||||
:hideNativeControls="true"
|
||||
fit="contain"
|
||||
@ended="handleVideoEnded"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 交互四：总结 - 显示文本内容 -->
|
||||
<div
|
||||
v-if="showObserveStep && showSummary"
|
||||
class="absolute inset-0 flex items-center justify-center px-20 pointer-events-none"
|
||||
>
|
||||
<div
|
||||
class="max-w-6xl w-full bg-black/40 backdrop-blur-md rounded-3xl border border-white/20 p-12 space-y-6 text-white pointer-events-auto"
|
||||
>
|
||||
<div>
|
||||
<h2 class="text-2xl font-bold mb-5">交互四｜总结</h2>
|
||||
|
||||
<!-- 总结文本内容 -->
|
||||
<div class="space-y-3">
|
||||
<p class="text-xl leading-7 opacity-90">
|
||||
<span class="px-1 rounded">延时拍摄的主要目的</span>，<span class="px-1 rounded"
|
||||
>是交代时间流逝与环境状态</span
|
||||
>。
|
||||
</p>
|
||||
<p class="text-xl leading-7 opacity-90">
|
||||
<span class="px-1 rounded">这里的拍摄对象是江边的建筑群与天空</span>。<span
|
||||
class="px-1 rounded"
|
||||
>通过固定机位的连续拍摄</span
|
||||
>，<span class="px-1 rounded">将原本需要较长时间才能观察到的</span
|
||||
><span class="px-1 rounded">天空变化和光影移动</span>，<span class="px-1 rounded"
|
||||
>压缩到一个较短的镜头中呈现</span
|
||||
>。
|
||||
</p>
|
||||
<p class="text-xl leading-7 opacity-90">
|
||||
<span class="px-1 rounded">这种处理方式</span>，<span class="px-1 rounded"
|
||||
>非常适合放置在视频片头阶段</span
|
||||
>，<span class="px-1 rounded">用于快速建立时间感与空间环境</span>，<span
|
||||
class="px-1 rounded"
|
||||
>而不会占用过多时长</span
|
||||
>。
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 返回按钮 -->
|
||||
<ImgButton
|
||||
class="absolute right-0 top-0 z-20"
|
||||
:image="IMAGE_PATHS.COMPONENTS.BACK"
|
||||
@click="handleBack"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
@@ -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,330 @@
|
||||
<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: 'VlogFilmingLocationB' })
|
||||
|
||||
// 截图功能
|
||||
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" />
|
||||
|
||||
<p
|
||||
class="absolute left-1/2 -translate-x-1/2 top-[260px] text-red-500 text-4xl leading-normal font-bold"
|
||||
>
|
||||
操作说明：在手机取景框区域，滚动鼠标滚轮可缩放画面，按住鼠标左键拖动可调整画面位置。
|
||||
</p>
|
||||
|
||||
<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,289 @@
|
||||
<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 { useVlogStore } from '@/stores'
|
||||
|
||||
const router = useRouter()
|
||||
const start = ref(false)
|
||||
const showInstruction = ref<boolean>(false)
|
||||
|
||||
type ResizeDirection = 'nw' | 'ne' | 'sw' | 'se'
|
||||
|
||||
// 基础逻辑
|
||||
const back = (): void => router.back()
|
||||
|
||||
const hideInstruction = (): void => {
|
||||
showInstruction.value = false
|
||||
}
|
||||
|
||||
const handleStart = (): void => {
|
||||
start.value = true
|
||||
showInstruction.value = true
|
||||
}
|
||||
|
||||
// 截图功能
|
||||
const { isLoading, showModal, capturedImageUrl, capture } = useCanvasCapture()
|
||||
|
||||
const handleModalClose = () => {
|
||||
showModal.value = false
|
||||
}
|
||||
|
||||
// 自由取景框模式
|
||||
const { viewfinderContainer, viewfinderBox, viewfinder, startDrag, startResize } = useViewfinderB()
|
||||
|
||||
const handleStartDrag = (event: MouseEvent | TouchEvent): void => {
|
||||
hideInstruction()
|
||||
startDrag(event)
|
||||
}
|
||||
|
||||
const handleStartResize = (direction: ResizeDirection, event: MouseEvent | TouchEvent): void => {
|
||||
hideInstruction()
|
||||
startResize(direction, event)
|
||||
}
|
||||
|
||||
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 (): Promise<void> => {
|
||||
if (isLoading.value) return
|
||||
|
||||
hideInstruction()
|
||||
|
||||
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 = (): void => {
|
||||
showGuide.value = false
|
||||
useVlogStore().setVlogUnlockProgress(3)
|
||||
router.push({
|
||||
name: 'Vlog'
|
||||
})
|
||||
}
|
||||
</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"
|
||||
/>
|
||||
|
||||
<p
|
||||
v-if="start && showInstruction"
|
||||
class="absolute left-1/2 -translate-x-1/2 top-[220px] z-30 text-red-500 text-4xl leading-normal font-bold"
|
||||
>
|
||||
操作说明：拖动取景框四角调整裁剪范围，点击“取景”键就完成啦！
|
||||
</p>
|
||||
|
||||
<StartOverlay v-if="!start" @start="handleStart" />
|
||||
|
||||
<!-- 取景 -->
|
||||
<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="handleStartDrag"
|
||||
@touchstart="handleStartDrag"
|
||||
>
|
||||
<!-- 九宫格辅助线 -->
|
||||
<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="handleStartResize('nw', $event)"
|
||||
@touchstart.stop="handleStartResize('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="handleStartResize('ne', $event)"
|
||||
@touchstart.stop="handleStartResize('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="handleStartResize('sw', $event)"
|
||||
@touchstart.stop="handleStartResize('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="handleStartResize('se', $event)"
|
||||
@touchstart.stop="handleStartResize('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: 'VlogFilmingLocationA' })
|
||||
}
|
||||
const handleClickB = () => {
|
||||
// 跳转设备准备
|
||||
router.push({ name: 'VlogFilmingLocationB' })
|
||||
}
|
||||
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