文档章节

学习 kityminder 笔记(十)

刘军兴
 刘军兴
发布于 2015/11/25 12:04
字数 1575
阅读 101
收藏 0

今天学习 layout 下的各个 js. 在此之前, 需要回顾一下 core/layout.
注意在 core 下面有 layout.js, module 下面也有 layout.js, 我是被混淆了, 不能换个名字么?

=== 布局基类 Layout 位于 core/layout.js ===

布局的基类, 各种不同的布局从此类派生.
class Layout {
  // 子类需要实现此布局算法. 算法输入是父节点, 及其子节点(数组), 
  //   要求布局这些子节点(即相对于父节点的变换)
  virtual doLayout(parent, children[]): throw 'sub-class impl'
  align(),stack(),move() 等辅助方法(子类可使用), 稍后看.
}

 

在理解布局前, 需要先了解一点变换的知识, 以及 kity 中对变换的包装(和实现).

变换这里指将一个点(x1,y1) 经函数 f 映射到另一个点 (x2,y2).

对于平移(translate)有:
     x2 = x1 + a, y2 = y1 + b
这里 a,b 分别是 x,y 轴平移量.

在 svg 中相当于为元素设置一个 transform="translate(a,b)" (或其它等价形式).

对于缩放(scale)有:
    x2 = a*x1, y2 = b*y1
在 svg 中相当于为元素设置 transform="scale(a,b)" (或等价形式)

对于旋转(rotate)一个角度 α:
   x2 = x1*cosα + y1*sinα
   y2 = y1*cosα - x1*sinα
对应 svg 中相当于 transform="rotate(α)"

斜切变换 skewX(α), skewY() 相似:
    x2 = x1 + y1*tanα, y2 = y1

上述各种变换都可是线性变化, 即 x2,y2 是 a*x1+b*y1+c 的形式, 因此可表示为线性代数的
矩阵乘法. 这样变换就可以写作:

点 x,y 平移 tx,ty 距离:
     [1 0 tx] [x]   [x+tx]
     [0 1 ty]*[y] = [y+ty]
     [0 0 1 ] [1]   [ 1  ]
点 x,y 缩放 sx,sy 倍:
     [sx 0 0] [x]   [x*sx]
     [0 sy 0]*[y] = [y*sy]
     [0  0 1] [1]   [1]
点 x,y 绕原点旋转 α 角的矩阵, 向量和乘的结果略:
     [cos -sin 0]
     [sin cos  0]
     [ 0   0   1]
斜切  skewX:         skewY:
     [1 tan(ax) 0]  [1       0 0]
     [0  1      0]  [tan(ay) 1 0]
     [0  0      1]  [0       0 1]

使用矩阵的最强大的地方在于, 多个线性变换可以乘积, 而矩阵*矩阵还是矩阵, 这即是 svg matrix 的含义了.

多个(线性)变换组合在一起, 即是多个矩阵的乘积, 矩阵乘积仍然是矩阵, 
svg 中 transform="matrix(a,b,c,d,e,f)" 即表示矩阵:
     [a c e]
     [b d f]
     [0 0 1]

这样, 你无论为一个元素施加多少次线性变换, 其最终结果都是一个简单的矩阵.

因此我合理地猜测这些变换,矩阵在 kity svg 库中都有对应的封装类/方法. 例如 kity.Matrix 类...

 

=== 下面研究 layout/mind.js, btree.js ===

以上我们看到了 Layout (虚)基类, 现在我们找一个实做的子类来查看 doLayout() 是具体怎么实现的.
位于 src/layout 目录下有 6 个 js 文件. 例如 tianpan.js(拼音天盘?), fish-bone*(鱼骨图) 等.
我简单看了下, 其中 mind.js 对应缺省布局, 其引用了 btree.js, 所以我们先研究这两个.

// 实际名字可称为 MindLayout 或 DefaultLayout
class <noname-layout> : public Layout {
  doLayout(node, children): {  // 这里算法需要仔细看
    // 1. 将 children 切分成两部分 left~right. 也可认为是 up~down.
    var left[] = 前一半 children,
        right[] = 后一半 children;

    // 2. 得到 left, right (子)布局器 (layout)
    var left_layout = Minder.left_layout_object;
    // right_layout 也一样, 所以只需研究明白 left 一半即可.
    
    // 3. 使用子布局器 布局各自一半.
    left_layout.doLayout(node, left[])  // right 一半相同

    // 4. 合在一起, 设置 node 的 vertex_out, vector_out
    box = node.content_box
    set out-vertex,out-vector // 估计和连线有关, 以后看.
  }
}

 

这里 left, right 子布局器在 btree.js 中. 该文件其实生成了 dir=left,right,top,bottom 四个布局器,
为了简化问题, 我实际代入该生成函数以 dir=left, 模拟出一个类, 以方便理解.

// 将一组子节点布局到自己的左侧, 子节点右边界是对齐的(right, align), 
//   垂直方向(即沿着 y 轴)顺序排列(stack).
class LeftLayout : public Layout {
  doLayout(node, children[]): {
    // 1.
    axis = 'x', oppsite = 'right'  // left 是 x 轴的, 相对方向为 right.
    parent.out_vertex = ..., .out_vector = ... (略)

    // 2.
    for-each (child in children[]) {
      child.layout_transform = new kity.Matrix() // 等于重置了变换矩阵?
      child.in_vertex = ..., .in_vector = ... (暂时略)
    }

    // 3. 使用基类辅助方法. 对齐子节点, 堆叠成一列.
    base::align(children[], 'right')  // right = oppsite of left
    base::stack(children[], 'y')      // y = oppsite of x-axis

    // 4. 计算偏移各子节点的一个 dx,dy 值. 
    p_box = parent.content_box  // 父节点位置.
    c_box = getBranchBox() // 工具方法:获取给点的子节点所占的布局区域
    // 这里还是对 dx 的计算有点疑惑, 可能需要调试下...
    dx = ..., dy = ...  // c_box 放 p_box 左边+margin, y 值中心对齐.
    // 平移子节点到该偏移, 实际是调用 base::move() 方法. 
    for-each (child)
      node.translate(dx, dy)
  }
}

这里重点是将一组子节点靠右对齐(即所有 child.right 值相同), 沿着 y 轴堆叠(顺序排列, 中间有间距),
然后布置在父节点的左侧. 实际使用三个 Layout 基类的方法: align(), stack(), move().

下面特化 align() 为 align_right(), 在上面的例子中调用的 align() 给出参数为 'right':
(其它 align left,top,bottom 类似, 只是多一个 switch(dir) 判断.

class Layout {
  align_right(nodes[]) {
    for-each (node in nodes[]) {
      // 经此平移, 所有 node 节点的 right 值变为 0, 所以就右对齐了.
      node.transform_matrix.translate(-node.right, 0)
    }
  }
}

下面特化 stack() 为 stack_y():

class Layout {
  stack_y(nodes) {
    distance = node.margin-bottom  // 节点间距离
    position = 0  // 节点在 y 轴上的位置.
    for-each (node) {
      // 对 node 的当前变换矩阵 再叠加一个 dy 平移, 使得其 y 轴定位到 position 位置.
      matrix = node.transform_matrix
      matrix.translate(0, position - node.top)
       // 计算下一个位置. 考虑两个节点之间的间距.
       position += node.height + distance_of_curr_node_and_next_node
    }
  }
}

一组 nodes[] 在 align_right() 之后, node.right = 0; 在 stack_y() 之后 nodes[0].top = 0;
这相当于整组节点的右上角是 (0,0) 原点了. 上面计算偏移 dx,dy 的疑惑也略微解开了一些, 因为那里已经
知道整个 children_box .top=0, .right=0 了. 

现在我们知道了 Layout 的作用是计算子节点的布局位置, 该位置是相对于父节点的. 对于其它布局形式,
如鱼骨图, 天盘?图估计作用类似, 只是计算方法有所不同, 布局的子节点的位置也就有些不同.

这里 Layout 只是算出了位置, 但并未将节点实际移动到那里, 于是问题就产生了:
   谁,什么时候,怎么移动(动画?)节点到新的位置的呢?

 

© 著作权归作者所有

共有 人打赏支持
刘军兴
粉丝 57
博文 189
码字总数 231687
作品 0
昌平
私信 提问
百度脑图解析:如何进行web复杂应用的渐进式开发

内容来源:2017 年 4 月 8 日,张博在“HTML5梦工场 & 微软开发者沙龙第05期—持续集成”进行《Web复杂应用的 「渐进式」开发》演讲分享。IT 大咖说(微信id:itdakashuo)作为独家视频合作方...

06/04
0
0
KityMinder 1.2.0 发布,脑图工具

脑图工具 KityMinder 出新版本啦! 功能增加,体验提升:) 自从KityMinder1.x版本正式上线以来,得到了广大同学的热情关注。同学们为KityMinder提出了各种好的建议。我们整个小组受到了很大...

战毅
2014/07/10
9.1K
12
Kity Minder 1.1.0 发布更新

KityMinder思维脑图,正式线上使用地址已经开放 naotu.baidu.com KityMinder Change Log v1.1.0 功能更新 添加了剪贴板操作的支持 添加了本地自动保存草稿的功能 优化了文字选中效果 改进了文...

战毅
2014/03/19
1K
5
学习 kityminder 笔记(五)

接着学习 kityminder, 前面其实没看完 kity, 大致了解之后, 我们先看看 minder 部分, 两者结合起来学更好些. 下载 kityminder-core (按文档说只含核心部分), 从 git-hub, 建立起开发/构造环境...

刘军兴
2015/11/19
0
0
Kity Minder —— 来自百度的在线思维导图工具

KityMinder 是百度FEX团队的f-cube小组(原UEditor小组)的又一力作。作为一款在线的脑图编辑工具,它有着不输给Native编辑工具(如 xMind,MindManager等)的最佳用户体验。同时,它充分发挥...

oschina
2014/03/04
4
0

没有更多内容

加载失败,请刷新页面

加载更多

Sping之项目中pofile的应用

工程中,我们必须要面对的一件事就是, 开发环境中使用的数据库连接地址等与生产上的不同, 如果上线, 那么我们是否还要手动修改这些地址么, 这样做有很多弊端, 不方便, 这时我们就可以使用spr...

克虏伯
6分钟前
0
0
Linux中安装MySQL

Linux中安装MySQL 一、准备工作 此处准备的操作系统位CentOS 7。 MySQL安装包: MySQL-server-5.6.29-1.linux_glibc2.5.x86_64.rpm MySQL-client-5.6.29-1.linux_glibc2.5.x86_64.rpm 将准备......

星汉
11分钟前
0
0
深入理解Hadoop之HDFS架构

Hadoop分布式文件系统(HDFS)是一种分布式文件系统。它与现有的分布式文件系统有许多相似之处。但是,与其他分布式文件系统的差异是值得我们注意的: HDFS具有高度容错能力,旨在部署在低成...

架构师springboot
15分钟前
0
0
MaxCompute表设计最佳实践

MaxCompute表设计最佳实践 产生大量小文件的操作 MaxCompute表的小文件会影响存储和计算性能,因此我们先介绍下什么样的操作会产生大量小文件,从 而在做表设计的时候考虑避开此类操作。 使用...

阿里云官方博客
15分钟前
0
0
云上领跑,快人一步:华为云抢先发布Redis5.0

12月17日,华为云在DCS2.0的基础上,快人一步,抢先推出了新的Redis 5.0产品,这是一个崭新的突破。目前国内在缓存领域的发展普遍停留在Redis4.0阶段,华为云率先发布了Redis5.0,全面展现了...

中间件小哥
15分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部