室内概念设计：扇形空间布置系统

Table of Contents

扇形空间家具布置系统 – 开发技术报告

项目背景与简介

传统 2D 室内设计工具多基于正交矩形坐标系，在处理扇形等异形空间时易产生排版与视觉偏差。“扇形空间布置系统”为此痛点研发，以**极坐标系（Polar Coordinate System）**为底层几何基准，结合 SVG 动态渲染与原生 JavaScript，实现了家具在异形空间内的自由平滑移动、精准径向对齐与实时构件统计，为非标准建筑平面提供了创新的 CAD 方案。

核心技术栈

渲染层：HTML5 DOM 用于挂载交互构件；SVG 用于高精度绘制扇形轮廓与极坐标网格（1° 刻度）。
样式层：Tailwind CSS 原子化构建紧凑专业的控制面板及现代视觉效果。
逻辑层：原生 Vanilla JavaScript，零第三方库依赖，直接操作数学模型与 Pointer Events 以保障最高运行帧率。

核心架构与关键算法

极坐标与笛卡尔坐标的实时双向映射

鼠标事件获取的是笛卡尔坐标（x, y），而扇形排布依赖极坐标（r, θ）。系统在拖拽时实现了高效的双向映射：

输入转换：通过 Math.sqrt(x² + y²) 与 Math.atan2(y, x)，将拖拽增量实时转化为家具的极径（Radius）与极角（Theta）。
输出渲染：利用 x = r * cos(θ)、y = r * sin(θ) 将高精度极坐标精准还原为画布的绝对定位（left / top）。

动态极值包围盒与视口自适应（Smart ViewBox Fit）

为消除画布留白或偏移，系统重写了 SVG 包围盒算法：

根据空间参数（内外径、角度）计算扇形二维平面的极值边界（x_min, x_max, y_top, y_bottom）。
基于边界计算精确物理宽高，推导最大化利用屏幕空间的动态比例尺（PIXELS_PER_METER）。
将 SVG 的 viewBox 严格锁定于极值矩形，确保任何尺寸的扇形都能零偏移、无畸变地撑满绘图区。

相对径向坐标系的正交旋转引擎

这是解决异形空间对齐的核心。家具的“摆正”基准并非平行于屏幕，而是平行于所在位置的切线或法线。

家具的 transform: rotate() 动态计算为 posAngleDeg + 90 + mR。
posAngleDeg 使其随时跟随半径射线偏转，mR 为双击触发的 90° 步进增量。
结果：无论移至何处，家具长轴均能自动绝对地指向圆心或顺应圆弧，彻底消除视觉偏角。

交互与 UX 设计

无极自由移动与解耦交互

移除强制网格磁吸，采用无边界自由平滑移动（FreeMode）。通过解耦位置拖拽与双击旋转操作，消除密集排布时的事件干涉，极大提升排版灵活性。

沉浸式透明画布与视觉降噪

摒弃方形底板，将 SVG 画布设为透明，仅对扇形路径执行白色填充与投影。空间宛如悬浮于操作台上，消除冗余边界。

自动化工程数据提取

内置遍历引擎实时抓取场景中所有构件的物理元数据（尺寸），自动合并同类项，一键生成用于采购的 BOM（物料清单）明细表。

总结

《扇形空间布置系统》成功克服了 Web DOM 处理极坐标系对齐的技术壁垒，通过精巧的数学换算、自适应视口映射及双击正交交互，在纯原生 Web 环境下打造了高精度、高流畅度的异形空间设计平台。