HouYunFei
92 lines
4.1 KiB
TypeScript
92 lines
4.1 KiB
TypeScript
"use client";
|
||
|
||
import { useEffect, useState } from "react";
|
||
import { Button, Modal, Segmented, Slider } from "antd";
|
||
import { RotateCcw, WandSparkles } from "lucide-react";
|
||
|
||
export type CanvasImageAngleParams = {
|
||
horizontalAngle: number;
|
||
pitchAngle: number;
|
||
cameraDistance: number;
|
||
wideAngle: boolean;
|
||
};
|
||
|
||
const defaultParams: CanvasImageAngleParams = {
|
||
horizontalAngle: 0,
|
||
pitchAngle: 9,
|
||
cameraDistance: 4.8,
|
||
wideAngle: false,
|
||
};
|
||
|
||
export function CanvasNodeAngleDialog({ dataUrl, open, onClose, onConfirm }: {
|
||
dataUrl: string;
|
||
open: boolean;
|
||
onClose: () => void;
|
||
onConfirm: (params: CanvasImageAngleParams) => void;
|
||
}) {
|
||
const [params, setParams] = useState(defaultParams);
|
||
|
||
useEffect(() => {
|
||
if (open) setParams(defaultParams);
|
||
}, [dataUrl, open]);
|
||
|
||
const update = <Key extends keyof CanvasImageAngleParams>(key: Key, value: CanvasImageAngleParams[Key]) => setParams((current) => ({ ...current, [key]: value }));
|
||
|
||
return (
|
||
<Modal title={null} open={open && Boolean(dataUrl)} onCancel={onClose} footer={null} width={860} centered destroyOnHidden>
|
||
<div className="space-y-5">
|
||
<div>
|
||
<h2 className="text-xl font-semibold">AI 多角度</h2>
|
||
<p className="mt-1 text-sm opacity-60">左侧只预览方向，结果会基于原图重新生成</p>
|
||
</div>
|
||
<div className="grid gap-6 md:grid-cols-[minmax(260px,1fr)_360px]">
|
||
<div className="flex min-h-[300px] flex-col justify-between rounded-xl border p-4">
|
||
<div className="grid flex-1 place-items-center">
|
||
<div className="relative">
|
||
<img src={dataUrl} alt="" className="size-48 rounded-2xl object-cover shadow-2xl" draggable={false} style={{ transform: previewTransform(params) }} />
|
||
<div className="absolute -bottom-6 left-1/2 h-10 w-24 -translate-x-1/2 rounded-full border bg-black/20 backdrop-blur" />
|
||
</div>
|
||
</div>
|
||
<Button className="w-fit" icon={<RotateCcw className="size-4" />} onClick={() => setParams(defaultParams)}>重置</Button>
|
||
</div>
|
||
<div className="space-y-6 py-2">
|
||
<AngleSlider label="左右角度" value={params.horizontalAngle} min={-60} max={60} step={1} suffix="deg" onChange={(value) => update("horizontalAngle", value)} />
|
||
<AngleSlider label="俯仰角度" value={params.pitchAngle} min={-45} max={45} step={1} suffix="deg" onChange={(value) => update("pitchAngle", value)} />
|
||
<AngleSlider label="镜头距离" value={params.cameraDistance} min={1} max={10} step={0.1} onChange={(value) => update("cameraDistance", value)} />
|
||
<div className="grid grid-cols-[88px_1fr_72px] items-center gap-4">
|
||
<span className="font-medium opacity-75">广角镜头</span>
|
||
<Segmented className="w-fit" value={params.wideAngle ? "wide" : "standard"} options={[{ label: "标准", value: "standard" }, { label: "广角", value: "wide" }]} onChange={(value) => update("wideAngle", value === "wide")} />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div className="flex justify-end">
|
||
<Button type="primary" size="large" icon={<WandSparkles className="size-4" />} onClick={() => onConfirm(params)}>AI 生成</Button>
|
||
</div>
|
||
</div>
|
||
</Modal>
|
||
);
|
||
}
|
||
|
||
function AngleSlider({ label, value, min, max, step, suffix = "", onChange }: {
|
||
label: string;
|
||
value: number;
|
||
min: number;
|
||
max: number;
|
||
step: number;
|
||
suffix?: string;
|
||
onChange: (value: number) => void;
|
||
}) {
|
||
return (
|
||
<div className="grid grid-cols-[88px_1fr_72px] items-center gap-4">
|
||
<span className="font-medium opacity-75">{label}</span>
|
||
<Slider min={min} max={max} step={step} value={value} onChange={onChange} />
|
||
<span className="whitespace-nowrap text-right font-semibold">{Number.isInteger(value) ? value : value.toFixed(1)}{suffix}</span>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
function previewTransform(params: CanvasImageAngleParams) {
|
||
const scale = 1.08 - params.cameraDistance * 0.035 + (params.wideAngle ? -0.08 : 0);
|
||
return `perspective(520px) rotateY(${params.horizontalAngle * -0.45}deg) rotateX(${params.pitchAngle * 0.35}deg) scale(${Math.max(0.72, Math.min(1.08, scale))})`;
|
||
}
|