文档章节

学习 kityminder 笔记(十一)

刘军兴
 刘军兴
发布于 2015/11/30 14:49
字数 776
阅读 104
收藏 0

上次看到了 Layout 类及其实做子类 MindLayout 等, 本次研究驱动它们的部分: Minder.layout() 函数.

回顾 core/layout.js 里面相关代码(按照调用顺序):

extend class Minder {
  // 用于在 Minder 类上支持布局(layout).
  function layout(): {
    // 内部函数定义: 稍后研究.
    function layout-node();

    // 1. 清空现有所有节点的布局信息.
    this.root-node.traverse() -> clear node.layout; 

 
    
    // 2. 调用进行第一轮布局.
    layout-node(this.root-node, round = 1);

    // 3. 调用进行第二轮布局, 根据我看 layout 子类, tianpan 类型的需要两轮布局, 
    //    其它可能只需要一轮即可. 但这里不加区分地都调用两次, 是很浪费时间的...
    layout-node(root-node, round = 2);

    
    // 4. 应用布局结果(产生动画,如果图形不复杂的话).
    this.apply-layout-result(动画参数, ...)
    // 发布事件略.
  }
}

这里的重点一是调用 layout-node() 函数, 通过两轮布局计算出节点应该布局到的位置.
二是通过动画(图形复杂时直接移动) 移动 node 到目标布局位置 (从现有位置).

下面先看看 layout-node()

// node 表示要布局的节点, 此函数被递归调用.
function layout-node(node, round=1 or 2) {
  // 剪枝: 收起的节点无需计算. 但实际上 if 语句总是真, 这样白剪?
  // 这里的重点是顺序: 先(递归)访问子节点, 再访问自己. 称为后序遍历?
  if (可以不计算 || true)
    for-each(node's child) 
      -> 递归调用 layout-node(child, round) 

  // 计算一个 childrenInFlow 但却未使用, 不明白是不是调试代码忘记删除了?
  cildrenInFlow = ...

  // 实际驱动 Layout 类进行布局的核心调用在这里.
  node.layout-instance.doLayout(node, node.children, round)
}

通过最后一句调用, 我们将 Minder.layout() 和 Layout.doLayout() 关联在一起. 这样完成了 layout 的流程理解.

 

另一个重点是 Minder.applyLayoutResult():

function Minder.apply-layout-result() {
  complex? = 判断脑图是不是太复杂, 如果太复杂, 下面就不用动画了.
  
  // 内部函数 consume(), apply-matrix(), apply() 定义. 下面研究.
  // 调用内部函数 apply() 处理.
  apply(root-node, init-matrix)
}

// 上面所说内部函数, 放这里单独看.
closure function apply(node, parent-matrix) {
  // 合并变换矩阵. 这里 * 理解为数学矩阵乘法(或某种 matrix 计算即可)
  matrix = node.layout-matrix * parent-matrix;
  // 再加上布局偏移.
  matrix += node.layout-offset

  // 如果当前有动画, 停止动画.
  if (node.layout-timeline) ...timeline.stop()

  // 用动画更新位置(非动画方式略)
  node.layout-timeline = new kity.Animator(...)  // 新建动画对象.
     .start(..., duration, ...) // 开始动画.
     .on('finish', 某些处理略);
   
  // 递归调用, 子节点也产生动画.
  for-each (child)
    apply(child, matrix)
}

(其它两个内部函数如果未用到就略过)

这里的重点一是合并变换矩阵, 节点自己的变换分两部分(layout-matrix, layout-offset), 现在虽未彻底理解两者
分工, 但可先认为是通过函数中方式计算出最终(相对于全局)的布局位置 (matrix).

重点二是使用 kity.Animator() 包装动画, 为此需要先去看看 svg 动画, 以及 kity 对其封装是什么. 这里我想大致
是在 duration 时间内进行(完成)一个移动动画.

这也是为了回答本文第(十)最后提出的问题.

© 著作权归作者所有

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

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

06/04
0
0
学习 kityminder 笔记(五)

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

刘军兴
2015/11/19
0
0
学习 kityminder 笔记(六)

接上篇, 接着学习 kityminder. == core/keyreceiver.js == extend class Minder { init-hook(): 构造时设置选项, 侦听 'paperrender' 事件, 以调用 _initKeyReceiver() _initKeyReceiver():......

刘军兴
2015/11/19
0
0
学习 kityminder 笔记(七)

接上篇继续学习. 本段都是 seajs require(module/*.js) 的, 看起来是按照字母顺序 a-z 排列的, 所以应没什么互相依赖性. 考虑到前面有很多细节都略过, 或不懂, 在学习过程中可能还要不断回顾...

刘军兴
2015/11/20
0
0
再学习 Kity 笔记(五) 初步

在过去两周左右, 一直在学习 kity, kityminder, nodejs, seajs 等一系列项目. 有些认识经过一段时间学习, 已经发生了 变化, 使得原有笔记过时. 兹为深入学习, 有必要回顾复习重新看一遍. Kit...

刘军兴
2015/12/04
68
0

没有更多内容

加载失败,请刷新页面

加载更多

Java中的移位运算符

国庆给自己放了个小长期二十几天,回来继续更新专栏 上一篇文章我们说了Java里的二进制,知道了计算机是以0和1来处理数据的,在阅读源码的过程中,经常会看到这些符号<< ,>>,>>>,这些符号...

SuShine
33分钟前
2
0
linux版QQ

下载地址在这 http://yun.tzmm.com.cn/index.php/s/XRbfi6aOIjv5gwj Appimage包不用做什么别的处理,安装啥的都不需要。。找到文件所在目录,终端中修改一下文件的权限 chmod 777 QQ-2017112...

悲催的古灵武士
39分钟前
1
0
咕泡-MyBatis 实用篇作业

1. Mapper在spring管理下其实是单例,为什么可以是一个单例? 首先,mapper 内部不包含 成员字段,无状态单例是安全的 另外,一直存在不用每次调用都new 一个新实例 2. MyBatis在Spring集成下...

职业搬砖20年
42分钟前
2
0
MQTT协议的初浅认识之连接建立

MQTT百科 MQTT(消息队列遥测传输)是ISO 标准(ISO/IEC PRF 20922)下基于发布/订阅范式的消息协议。它工作在 TCP/IP协议族上,是为硬件性能低下的远程设备以及网络状况糟糕的情况下而设计的发布...

亚林瓜子
58分钟前
1
0
OpenStack部署都有哪些方式

对于每一个刚接触到OpenStack的新人而言,安装无疑是最困难的,同时这也客观上提高了大家学习OpenStack云计算的技术门槛。想一想,自己3年前网上偶然接触到OpenStack时,一头茫然,手动搭建一...

tututu_jiang
59分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部