文档章节

学习 kityminder 笔记(十一)

刘军兴
 刘军兴
发布于 2015/11/30 14:49
字数 776
阅读 92
收藏 0
点赞 0
评论 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
博文 150
码字总数 226172
作品 0
昌平
百度脑图解析:如何进行web复杂应用的渐进式开发

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

⋅ 06/04 ⋅ 0

再学习 Kity 笔记(五) 初步

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

刘军兴 ⋅ 2015/12/04 ⋅ 0

hjimce算法类博文目录 个人博客:http://blog.csdn.net/hjimce 个人qq:1393852684 知乎:https://www.zhihu.com/people/huang-jin-chi-28/activities 一、深度学习 深度学习(七十)darknet...

hjimce ⋅ 2016/01/24 ⋅ 0

“我爱智能”原创性博客索引

不知不觉,博客也写出了一点小体系,新的阶段已经开始,未来希望再接再厉继续补充这一体系,在成长中写博客,在博客中成长,在此先做一个小的梳理,谢谢大家的支持。 一)关于深度学习系列 ...

on2way ⋅ 2015/08/29 ⋅ 0

《Pro ASP.NET MVC 3 Framework》学习笔记目录

《Pro ASP.NET MVC 3 Framework》简介: 作者: Adam Freeman 和 Steven Sanderson 出版社: Apress; New 平装: 820页 语种: 英语 ISBN: 1430234040 声明:笔记里面按我自己的理解翻译了大部分...

mszhangxuefei ⋅ 2012/02/07 ⋅ 0

学习 kityminder 笔记(五)

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

刘军兴 ⋅ 2015/11/19 ⋅ 0

九月份的感悟

这个九月对于我来说是成长的季节,从实习工作到辞职,从参加校招到此时此刻心情爆炸.. 这个月学习了很多,基本每天都很充实,忙的不可开交,但想想拿到人生第一桶金,还是挺开心的。 辞职是因...

Timor_张先生 ⋅ 2017/09/28 ⋅ 0

学习 kityminder 笔记(九)

继续学习 kityminder. === module/style.js === // 拷贝选中节点的当前样式,包括字体、字号、粗体、斜体、背景色、字体色// 对应为 styleNames = ['font-size', 'font-family', 'font-weig...

刘军兴 ⋅ 2015/11/24 ⋅ 0

KVM虚拟化学习笔记系列文章列表

kvm虚拟化学习笔记(一)之kvm虚拟化环境安装 http://koumm.blog.51cto.com/703525/1288795 kvm虚拟化学习笔记(二)之linux kvm虚拟机安装 http://koumm.blog.51cto.com/703525/1289627 kvm虚拟...

蓝狐乐队 ⋅ 2015/03/19 ⋅ 0

学习 kityminder 笔记(六)

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

刘军兴 ⋅ 2015/11/19 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

Jenkins实践3 之脚本

#!/bin/sh# export PROJ_PATH=项目路径# export TOMCAT_PATH=tomcat路径killTomcat(){pid=`ps -ef | grep tomcat | grep java|awk '{print $2}'`echo "tom...

晨猫 ⋅ 今天 ⋅ 0

Spring Bean的生命周期

前言 Spring Bean 的生命周期在整个 Spring 中占有很重要的位置,掌握这些可以加深对 Spring 的理解。 首先看下生命周期图: 再谈生命周期之前有一点需要先明确: Spring 只帮我们管理单例模...

素雷 ⋅ 今天 ⋅ 0

zblog2.3版本的asp系统是否可以超越卢松松博客的流量[图]

最近访问zblog官网,发现zlbog-asp2.3版本已经进入测试阶段了,虽然正式版还没有发布,想必也不久了。那么作为aps纵横江湖十多年的今天,blog2.2版本应该已经成熟了,为什么还要发布这个2.3...

原创小博客 ⋅ 今天 ⋅ 0

聊聊spring cloud的HystrixCircuitBreakerConfiguration

序 本文主要研究一下spring cloud的HystrixCircuitBreakerConfiguration HystrixCircuitBreakerConfiguration spring-cloud-netflix-core-2.0.0.RELEASE-sources.jar!/org/springframework/......

go4it ⋅ 今天 ⋅ 0

二分查找

二分查找,也称折半查找、二分搜索,是一种在有序数组中查找某一特定元素的搜索算法。搜素过程从数组的中间元素开始,如果中间元素正好是要查找的元素,则搜素过程结束;如果某一特定元素大于...

人觉非常君 ⋅ 今天 ⋅ 0

VS中使用X64汇编

需要注意的是,在X86项目中,可以使用__asm{}来嵌入汇编代码,但是在X64项目中,再也不能使用__asm{}来编写嵌入式汇编程序了,必须使用专门的.asm汇编文件来编写相应的汇编代码,然后在其它地...

simpower ⋅ 今天 ⋅ 0

ThreadPoolExecutor

ThreadPoolExecutor public ThreadPoolExecutor(int corePoolSize, int maximumPoolSize, long keepAliveTime, ......

4rnold ⋅ 昨天 ⋅ 0

Java正无穷大、负无穷大以及NaN

问题来源:用Java代码写了一个计算公式,包含除法和对数和取反,在页面上出现了-infinity,不知道这是什么问题,网上找答案才明白意思是负的无穷大。 思考:为什么会出现这种情况呢?这是哪里...

young_chen ⋅ 昨天 ⋅ 0

前台对中文编码,后台解码

前台:encodeURI(sbzt) 后台:String param = URLDecoder.decode(sbzt,"UTF-8");

west_coast ⋅ 昨天 ⋅ 0

实验楼—MySQL基础课程-挑战3实验报告

按照文档要求创建数据库 sudo sercice mysql startwget http://labfile.oss.aliyuncs.com/courses/9/createdb2.sqlvim /home/shiyanlou/createdb2.sql#查看下数据库代码 代码创建了grade......

zhangjin7 ⋅ 昨天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部