92 lines
4.9 KiB
TypeScript
92 lines
4.9 KiB
TypeScript
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))})`;
|
|
}
|