【SDU Chart Team - Core】关于组件矢量图的概念分析

组件矢量图内概念分析

坐标系Coordinate

一个抽象信息的对象。

坐标系	说明
画布坐标系	画布的绝对坐标系
图形坐标系	以图形中心为原点的绝对坐标系
图形相对坐标系	以图形中心为原点，以图形矩形区域长宽为$[-1,1]$的相对坐标系
点坐标系	以一点$a$作为原点的绝对坐标系
点相对坐标系	以一点$a$作为原点，另一点$b$作为$(1,1)$的相对坐标系
向量坐标系	以一点$a$作为原点，$\overrightarrow{ab}$作为x轴的绝对坐标系
向量相对坐标系	以一点$a$作为原点，另一点$b$作为$(1,0)$的相对坐标系

点

二维点 Point2D

含x,y轴等信息的对象。

• 点的变换

  PointTransform类，是对一个点可逆变换。其中实现正变换和逆变换。返回新的点。

  内置变换类：线性变换、常变换。

• 点的函数

  PointFunction类，一些自定义的函数，表示导出点，不可逆。返回新的点。

  内置函数：轴对称、中心对称、中心缩放、几何中心、权重中心。

关键点 CriticalPoint

可由用户移动的点，根据关键点计算路径点继承Point2D。

点的颜色：设计图形时自拟。一般维持图形轮廓的为蓝色点，确定图形细节的为黄色点。蓝色点一般无活动域，黄色点存在活动域。

点的cp_id和名称cp_name：用于区分各个点。

坐标系：使用的是图形坐标系。

• 关键点的活动域

  用户对关键点的位置作出修改时，需要限制其活动范围。但由于关键点的相对性，只能使用点之间的相对限制。需要引入活动域约束，一种几何意义上的范围约束，来表示这种限制。

  首先需要确定活动域约束的相对坐标系，点坐标系或者向量坐标系；接下来根据其他点在该坐标系中的坐标、或者常量坐标$(x_i,y_i)$，计算活动域。

  每次动点作出改变时，计算其是否在活动域内。若不在，则根据运动方向计算一个边缘位置。

  • 活动域约束函数

    返回二维坐标，表示动点最终在活动域内的坐标。

    一些预设的活动域约束：

    活动域约束	参数	说明
    线段约束	坐标系、$(x_1,y_1)$、$(x_2,y_2)$	约束活动域为坐标系下的一条线段或直线
    矩形约束	坐标系、$(x_1,y_1)$、$(x_2,y_2)$	约束活动域为坐标系下的一个矩形
    封闭约束	坐标系、$(x_i,y_i)$、内/外	约束活动域为多个点组成的封闭图形的内或外

• 关键点的主从关系

  当其他某些关键点$a,b,c,...$变化时，关键点$x$需要动态发生变化，以保持与前者间的状态。称$x$为从动关键点，变化的$a,b,c,...$称为主动点。称从动点根据主动点变化的规则为主从约束。

  主从约束指的是几何意义上的定值约束，它需要能根据主动点变化前后的位置重新计算出唯一的从动点的位置。

  主从关系是逐级传播的，因此可能存在环与冲突，这导致一个关键点集合内的约束可能是死约束。为了避免这种情况，认为已经变化的点不受主从约束影响。

  主从关系的传播导致一些从动点可能不满足其活动域。所以主从约束的必须支持反馈，即，根据从动点的位置逆运算得到主动点的位置。这个过程可能会在一个关系链上反复进行，甚至无限进行（无解）。认为次数超过10次无解，直接撤销修改。

  • 活动域约束函数

    返回两个二维坐标。第一个二维坐标表示从动点的合法位置，第二个二维坐标表示主动点的合法位置。若主动点当前坐标与返回得到的坐标不同，则反馈至上级，然后重新计算。

    一些预设的主从约束：

    主从约束	参数	说明
    向量约束	坐标系、主动点变化前后坐标	使主动点与从动点间的向量在某坐标系下不变
    三角约束	主动点变化前后坐标、支点	使主动点、从动点、支点构成的三角形相似

• 点位置变更

  通过运算符重载，监听位置变化。然后这个接口会根据该关键点新的坐标，自适应图形。具体步骤包括活动域检查、从动点传递更新。

  返回真或假。真表示更新合法，且此时图像对象内部已完成更新；否则更新不合法，图形对象内部保持原状态。

路径点 WayPoint

由关键点生成的路径点，进而用于生成路径。继承Point2D。

点的样式：若路径点和关键点重合，则只显示关键点。

点的wp_id和名称wp_name：用于区分各个点。

点的坐标系：使用的是图形坐标系。

图 Graph

基于svg中的定义。

点

一些路径点(或中心点)。

轮廓

1. 一些点连接得到的路径

   基于svg中’<path>‘的属性’d’，有：直线连接、弧连接、贝塞尔连接。

   详见：https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Paths

2. 一些基本轮廓

   例如’<rect>’、’<circle>’、’<image>'等。参数使用路径点计算。

• 样式

  线条粗细、颜色、区域填充、渐变、变换等。基于svg的style。

预定义/样式

一些svg中支持的预定义内容(包括样式)，被声明在’<defs>'内，可在样式中引用。

组件 Component

组件图 ComponentGraph

包含两个子图：矢量图的图、文字的图。

重绘流程

• 路径点的生成

  1. 初始化/变更关键点位置
  2. 进行关键点活动域约束
  3. 进行关键点主从约束
  4. 使用点的函数生成路径点

• 矢量图生成

  1. 根据规则生成路径/根据规则生成基本图形
  2. 计算轮廓的粗细
  3. 设置填充

• 文字图生成

  1. 根据文字生成路径
  2. 计算轮廓的粗细
  3. 设置填充

• 更新图形坐标系

  1. 根据轮廓，重新规划图形外接矩形
  2. 外接矩形中心作为图形中心和新的图形坐标系原点，更新各个点的坐标
  3. 更新组件的中心点在画布中坐标

组件图与图

组件图使用画布坐标系，矢量图和文字图使用的是图形坐标系。

• 图形到画布

  • 对关键点使用坐标系变换
  • 对路径点使用坐标系变换

• 画布到图形

  • 对任意点使用坐标系逆变换