异形编辑 说明文档
<h1>异形编辑</h1>
<p>作者: 漆军 陈诚 江柳成
时间: 2024/03</p>
<h2>文件结构</h2>
<h3>UI文件</h3>
<p>![qml文件结构](<a href="https://www.showdoc.com.cn/server/api/attachment/visitFile?sign=81871f3bcd365b9ffe7ba06bf3493c85&file=file.png">https://www.showdoc.com.cn/server/api/attachment/visitFile?sign=81871f3bcd365b9ffe7ba06bf3493c85&file=file.png</a> "qml文件结构")</p>
<h3>JS文件</h3>
<pre><code> 拖点/边/孔、插点/切角操作： Editor.js
数据处理算法： Analyze.js
标准数据定义： Def.js
按键功能操作： Func.js
数据模型操作: Model.js
鼠标选中操作、按钮功能实现: Operate.js
绘制操作： Painter.js
同步加载JSON文件： Untils.js
视窗变化操作： Viewport.js</code></pre>
<h2>实现思路</h2>
<ul>
<li>
<p>采用矩形包围盒（BoundingBox/BoundingRect)来进行区域划分。
给元素（点/线等）加上一层包围框，用于快速淘汰不感兴趣的元素。当做点击选择元素，及元素的拖动操作时，首先进行包围盒碰撞判断，粗略筛选出有碰撞的元素。接下来对筛选出的元素进行精确的查找，以确定最终的元素。</p>
</li>
<li>保存计算过程的中间数据，避免大量重复计算。这是本次性能优化的关键。
这一过程中，使用两个数据结构来存储数据：model 和 vModel。model 中包含多个形状（shape），其中 shapes[0] 表示当前的主图形。当添加孔时，我们向 shapes 中追加孔的信息，而 pathes 则保存前一个点和后一个点计算得到的路径信息。而 vModel 则类似地保存了缩放后的 model 信息，用于外部显示。</li>
</ul>
<h2>数据结构</h2>
<h3>model结构</h3>
<pre><code class="language-json">{
shapes: [
{
pathes: [
{
p1: {editable, x, y, b} // 前一个点坐标
p2: {editable, x, y, b} // 后一个点坐标
vec: { x, y } // p1到p2的向量
kRadian // 向量与x轴正方向夹角
sink // 角度kRadian的正弦值
cosk // 角度kRadian的余弦值
lineCenter: { x, y } // 直线中心(直线属性)
distancePow2 // 向量平方和
distance // 距离
distanceDiv2 // 距离一半
type // 路径类型, 0 直线 1 弧线
boundingRect: { minX, minY, maxX, maxY } // 路径的包围框
paddingBoundingRect: { minX, minY, maxX, maxY } // 用于鼠标选中扩大可选中的包围框
// 弧线的额外属性
clickwise // 旋转角度
radius // 半径
arcCenter // 圆心
startRadian // 开始弧度
endRadian // 结束弧度
}
]
boundingRect: { minX, minY, maxX, maxY } //图形的包围框
paddingBoundingRect: { minX, minY, maxX, maxY } //扩大可选中的包围框
// 图形为孔的额外数据
disType // 孔类型
through // 是否打穿
depth // 打孔深度
}
],
rect: { x, y, w, h } // 矩形左上角的点，和宽高
points: [
{ x, y, b, isEdit } // 图形的点信息
],
extras: [
[
{ x, y, b, disType, through, depth } // 孔的点信息
]
]
}</code></pre>
<h2>常见操作流程</h2>
<h3>一 刷新</h3>
<ol>
<li>
<p>根据异形数据呈现异形</p>
</li>
<li>
<p>状态信息呈现选中等状态，根据异形数据和状态信息生成可编辑数据数据给编辑模块</p>
</li>
<li>根据被选中元素(点/线/孔)的属性信息，生成属性栏组件支持的数据格式，加载属性栏</li>
</ol>
<h3>二 拖拽</h3>
<p>1.按下鼠标左键位移，不松开，编辑模块画板根据鼠标落点和可编辑数据生成新的可编辑数据，刷新编辑界面画板</p>
<p>2.按下鼠标左键位移后松开，编辑模块根据根据鼠标落点和可编辑数据数据生成预期结果，发送到自由绘制操作模块，更改异形数据</p>
<h3>三 切角或加点</h3>
<p>1.按下鼠标左键位移后松开，编辑模块根据根据鼠标落点和可编辑数据生成切角数据或者加点数据</p>
<p>2.如生成加点数据，发送到自由绘制操作模块，更改异形数据</p>
<p>3.如生成切角数据，编辑模块进入切角模式，鼠标悬浮且位置改变时，刷新编辑模块画板，以高亮显示悬浮位置的备选异形。鼠标点击时生成切角的预期结果，发送到自由绘制操作模块，更改异形数据，退出切角模式</p>
<h3>四 属性栏编辑</h3>
<p>操作属性栏组件，如有检查函数须经过通过检查，后生成预期结果发送到自由绘制操作模块，更改异形数据</p>
<h3>五 工具栏操作</h3>
<p>点击工具栏按钮，调用自由绘制操作模块，更改异形数据</p>
<h2>未实现功能</h2>
<h4>1、固定距边</h4>
<p>通过测试发现，柜柜中异形编辑固定距边之后居中效果。可以通过选择之后调用Editor.js的modifyHolePosition函数，将画板的水平/垂直中点坐标作为参数调用即可。</p>