【创新实训个人记录】思维导图组件实现

矩形组件

想要实现完整的思维导图，显然需要有足够丰富的组件。
根据主要关键点分类，可以分为矩形和线型两类。而矩形组件根据其组成图形可以分为以下三类。

普通矩形组件

即仅包含矩形必须的关键点的组件。若考虑到

• 标签图形属性直接依赖于矩形关键点
  圆形、椭圆形
• 路径关键点直接依赖于矩形关键点
  棱形、信封
• 路径关键点间接依赖于矩形关键点
  五角星等

针对以上三种普通矩形组件，各取一例进行分析。

圆形

圆形的必须属性有圆心坐标及半径。可以直接定义：

     圆形接口
    double Circle::getCx() const
    {
        return T->getX();
    }
    double Circle::getCy() const
    {
        return L->getY();
    }
    double Circle::getR() const
    {
        return std::abs((L->getX() - R->getX()) * 0.5);
    }

但是应注意，圆形的外接矩形应始终为正方形，因此应当重写其关键点移动的方法。
四边中点移动时，其其中一条临边也同时移动，例如右侧边移动时，下侧边也应当跟着移动，与角关键点类似。为保证一致性，规定从动规律：R=RB;B=RB;L=LB;T=RT。考虑到点移动时的回调函数，只需设置该中点所在线段的两个端点从动；
除此之外，当角关键点移动时，其dx与dy应当相等，规定如下：角点的决定性移动方向：LT:dx;RT:dy;RB:dy;LB=dx。

信封

信封图形由矩形和一条折线组成。在此主要讨论这条折线的设置方法。

由于SVG中线段Path的形式为指定+参数，因此只要分析其必要指令，并将参数以已定义关键点的形式表示即可。
而对于本图形，即从左上角到矩形中点，再到右上角，其表示如下：

M LT.X LT.Y L T.X R.Y L RT.X RT.Y

五角星

原理同上，但是其部分折线拐点处于某两个关键点连线的固定比例处，因此需要计算出比例并表示。

复合组件

参考上述的信封图形，其原理与普通图形相似，但是包含多个SVG标签，因此需要对每个标签的参数都进行指定。

特殊组件（包含额外关键点）

某些图形可能额外包含一个控制的，可以用于调整某些参数，从而改变图形形状。
以圆角矩形为例，可以包含一个额外的关键点从而控制圆角半径，其使用方法与普通关键点类似，将对应的标签属性用控制关键点表示即可。

    const double RoundedRectangle::getRx() const
    {
        return std::abs(R->getX() - Control->getX());
    }
    const double RoundedRectangle::getRy() const
    {
        return std::abs(R->getX() - Control->getX());
    }

但是也需要考虑其移动范围。例如，圆角矩形的圆角半径显然应该小于较短边长，因此若控制点新的坐标位置必须在限制区间中。通过on_update方法进行约束

double maxR = std::min((this->getHeight() / 2), (this->getWidth() / 2));
  if (!corePointMoving) return;
  if(nx > R->getX())
  {
     Control->setX(R->getX());
  }
  if(nx < R->getX() - maxR)
  {
     Control->setX(R->getX() - maxR);
  }

除此之外，还要考虑到，当矩形大小或位置改变时，控制点也应答随之改变。其中位置变化与其他关键点保持一致即可；对于矩形大小改变，应当保证变化之后控制点仍在矩形范围中，约束如下

Rectangle::moveCorePoint(id, dx, dy);
if(d > maxR)
{
    d = maxR;
}
if(d < 0)
{
    d = 0;
}
*Control = createPoint(getX() + getWidth() - d, getY() + getHeight() / 4);

同理，当存在多个关键点且关键点之间存在约束时，也可以在对主动关键点移动之后设置从动关键点的位置。