【SDU Chart Team - Core】关于SVG和图形SVG

（对此前的文章进行了修改，使其更清晰化）

矢量图

坐标系 Coordinate

描述一种坐标系

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

二维点 Point2D

含坐标系、坐标等信息的对象。

成员

• 坐标系
• 坐标

二维点函数 Point2DFunction

点的函数，默认不可逆。返回新的点。

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

二维点变换 Point2DTransform

特殊的点的函数，是可逆变换，由Point2DFunction扩展。其中实现正变换和逆变换。返回新的点。

常用变换：线性变换、常变换。

路径点 WayPoint

可识别的二维点。继承自二维点，增加了wp_id和wp_name等属性。

适量图定义 SVGDefine

一些预定义内容。需要返回一个xml。

填充样式 FillStyle

继承SVGDefine，结构化的css。

线条样式 StrokeStyle

继承SVGDefine，结构化的css。

矢量图元素 SVGElement

由点连接或根据一些规则生成的图形为元素。

成员

• 路径点表
• 填充样式
• 线条样式
• 其他元素相关属性

接口

• 生成svg文本
• 检测坐标是否在元素内
• 修改填充样式
• 修改线条样式
• 修改路径点表

一些常用矢量图元素

以下类均继承自矢量图元素类。

• RectSVGElement
• CircleSVGElement
• PathSVGElement
• …
• CustomSVGElement (使用脚本)

矢量图 SVG

一系列矢量图元素的集合，同时提供统一的样式修改接口。

成员

• 矢量图元素集合
• 预定义表(包含样式)

接口

• 生成svg文本
• 修改矢量图元素表
• 修改预定义表
• 返回坐标处的元素

图形矢量图

图形矢量图类 ShapeSVG

使用组件坐标系的动态可修改的矢量图，用于表示图形，是矢量图的装饰器。

成员

成员对外均只读。

• 矢量图 SVG

  详见concept/svg。这里的矢量图使用的是组件坐标系，由其他组成部分导出，导出过程被称为绘制。

• 关键点 CriticalPoint

  关键点是可由用户移动的点，根据关键点计算路径点。继承Point2D。属性中还包含cp_id、名称cp_name、类别cp_class，用于区分各个点。还包含一些关于约束的信息：

  • active_area：活动域约束
  • following: 主从约束

  关键点集合负责维护关键点，包括如何通过属性找到关键点等关键点定位方法。

• 活动域约束 ActiveAreaFunction

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

  首先需要确定活动域约束的相对坐标系，点坐标系或者向量坐标系；接下来根据其他点在该坐标系中的坐标、或者常量坐标$(x_i,y_i)$，计算活动域。每次动点作出改变时，计算其是否在活动域内。若不在，则根据运动方向计算一个边缘位置。

  • 活动域约束函数 ActiveAreaFunction

    返回二维坐标，输入关键点的新位置，返回关键点最终在活动域内的坐标。

    一些预设的活动域约束：

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

  允许外置脚本，自定义活动域约束函数。

  • ActiveAreaFunction

    成员：类型、坐标系。

    函数：活动域函数

    • 参数：点在该坐标系的新坐标，其他参数；
    • 返回：点的合法坐标。

• 主从约束 FollowingFunction

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

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

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

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

  • 主从约束函数 FollowingFunction

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

    一些预设的主从约束：

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

  允许外置脚本，自定义主从约束函数。

  • FollowingFunction

    成员：类型、ActivePoint代表主动点、FollowingPoint代表从动点。

    函数：变更函数

    • 参数：主动点坐标，从动点坐标，主动点的新坐标，其他参数；
    • 返回：从动点合法坐标，主动点合法坐标。

  组件中所有的主从约束被组织成一个有向图，以进行动量的传播。

• 路径点 WayPoint

  路径点由关键点根据路径点生成规则生成。相较于关键点，存在匿名性。除了坐标外，还包含所在元素el_id、所在元素的顺次el_num、是否是候选关键点is_candidate等。

  • el_id：路径点被映射到元素；
  • el_num：路径点在矢量图元素的路径点列表中的位置（支持非连续取值，按其排序）；
  • is_candidate：是否是候选关键点；
  • on_elected：选举事件，若被选择成为关键点后，返回一个关键点对象。

接口

• 定义过程

  构造对象时进行过程的定义。两个主要的过程如下：

  • 关键点初始化过程

    一个返回json对象的javascript脚本或一个json对象，是关键点的对象数组。脚本中可以引用一些预定义内容，包括坐标系、预置活动域约束、预置主从约束。

  • 元素初始化过程

    定义一个矢量图元素集。过程类似关键点初始化。

  • 路径点生成过程

    一个javascript脚本，其中结果是返回一系列的函数（路径点生成函数）。每个返回的路径点生成函数的返回结果是一个json形式的路径点对象。脚本中可以引用一些预定义内容，包括坐标系、关键点定位、预置点函数等。

• 读

  • 返回坐标附近的关键点
  • 返回坐标是否在图形矢量图内
  • 返回坐标处的元素

• 更新

  • 关键点的位置更新

    提供某个关键点在画布上的新位置。

  • 关键点的增减

    增加关键点：部分路径点可以转变为关键点。

    删除关键点：部分关键点可以被删除。

  • 图形样式的更新

    对某个矢量图元素或整个矢量图，设置线条样式、填充样式等。

• 绘制

  更新结束后进行绘制。

  • 关键点的位置更新

    关键点位置更新后将重新计算路径点，步骤如下：

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

  • 关键点的增减

    将按照元素生成器修改特定SVG元素的路径点表，并且还将作用于关键点列表、活动域约束集、主从约束集。

  （样式更新时无需重绘）

组件图形矢量图类 ComponentShapeSVG

使用画布坐标系的图形矢量图，是图形矢量图的装饰器。

成员

• 图形矢量图
• 布局

接口

• 布局调整

  每次更新都会进行布局调整。

  1. 根据元素，重新规划图形外接矩形
  2. 更新各个点的组件坐标系坐标
  3. 更新组件在画布中的位置

• 更新

  对点先按照布局进行逆变换，然后转发给图形矢量图。（画布坐标系 $\to$ 组件坐标系）

• 绘制

  图形矢量图完成绘制后，图形矢量图中所有点的坐标被按照布局进行了变换。（组件坐标系 $\to$ 画布坐标系）