首页 > 编程知识 正文

jsmind中文文档,如何使用minmaster画线

时间:2023-05-05 05:10:38 阅读:243401 作者:4915

2.1. 综述

上一章的示例中简单提到了 jsMind 的 options 对象:

var options = {

container:'jsmind_container', // [必选] 容器的ID

editable:true, // [可选] 是否启用编辑

theme:'orange' // [可选] 主题

};

var jm = new jsMind(options);

不过这只是很少的一部分,jsMind 的 options 对象的完整定义如下所示:

options = {

container : '', // [必选] 容器的ID

editable : false, // 是否启用编辑

theme : null, // 主题

mode :'full', // 显示模式

support_html : true, // 是否支持节点里的HTML元素

view:{

engine: 'canvas', // 思维导图各节点之间线条的绘制引擎

hmargin:100, // 思维导图距容器外框的最小水平距离

vmargin:50, // 思维导图距容器外框的最小垂直距离

line_width:2, // 思维导图线条的粗细

line_color:'#555' // 思维导图线条的颜色

},

layout:{

hspace:30, // 节点之间的水平间距

vspace:20, // 节点之间的垂直间距

pspace:13 // 节点与连接线之间的水平间距(用于容纳节点收缩/展开控制器)

},

shortcut:{

enable:true, // 是否启用快捷键

handles:{}, // 命名的快捷键事件处理器

mapping:{ // 快捷键映射

addchild : 45, //

addbrother : 13, //

editnode : 113, //

delnode : 46, //

toggle : 32, //

left : 37, //

up : 38, //

right : 39, //

down : 40, //

}

},

};

以上选项是 jsMind 的默认选项,除 container 之外,其它选项都是可选的,你可以添加相应的选项以覆盖这些默认选项。

下面将对这些选项进行详细介绍。

2.2. 常规选项

container : (string) [必选] 容器的ID

实例化一个 jsMind 时,此参数不可缺省。jsMind 通过此参数查找页面元素,并将思维导图输出到该元素中。为了便于控制思维导图的大小和位置,请使用块元素作为思维导图的容器,如

你可以给该元素进行修饰,但是一般仅限于设置其大小、位置、边框等;如果想改变思维导图的字体、字号、背景颜色、前景颜色等,建议通过添加自定义主题的方式进行处理。

editable : (bool) 是否启用编辑

该参数控制是否支持在思维导图上进行编辑,jsMind 目前提供的编辑行为有添加节点、删除节点、修改节点标题、移动节点位置等,如果该参数设置为 true,将可以使用 API 进行以上这些操作,否则这些 API 将不会生效。默认情况下,该参数的值为 false 。

需要注意的是,jsMind 仅提供了编辑接口和少量的快捷键支持,并未提供完整的编辑功能,此参数仅用于限制这些 API 的使用。

theme : (string) 主题

指定 jsMind 的主题名。

mode : (string) 显示模式

jsMind 现支持两种显示模式:

full - 子节点动态分布在根节点两侧 [默认值]

side - 子节点只分布在根节点右侧

support_html : (bool) 是否支持节点里的HTML元素

该参数的默认值为 true ,含义为允许在节点的标题中使用 HTML 代码,如果你愿意,你甚至可以在节点标题里插入一个表格

需要注意的是,在 freemind 中,节点的样式是使用 html 语言进行控制的,如果你使用 freemind 格式的数据时,建议将此参数设置为 true。

2.3. 排版选项

view.engine : (string) 思维导图各节点之间线条的绘制引擎

jsMind 现支持两种线条的绘制引擎:

canvas - 把线条绘制在 canvas 上 [默认值]

svg - 使用 svg 绘制线条,当思维导图的节点很多,面积巨大的时候,使用该模式能带来显著的性能提升

view.hmargin : (number) 思维导图距容器外框的最小水平距离(像素)

view.vmargin : (number) 思维导图距容器外框的最小垂直距离(像素)

这两个参数决定了思维导图与容器的边框能距离多近。把思维导图本身作为一个对象的话,这两个参数就类似该对象的 margin(css) 属性。为了美观起见,水平方向上默认设置为 100 像素,垂直方向上默认设置为 50 像素。

view.line_width : (number) 思维导图线条的粗细(像素)

view.line_color : (string) 思维导图线条的颜色(html的颜色表示方法)

这两个参数决定了思维导图中的线条的样式。默认情况下,线条的粗细是2px,颜色是深灰色(#555)。

layout.hspace : (number) 节点之间的水平间距(像素)

layout.vspace : (number) 节点之间的垂直间距(像素)

这两个参数相当于节点对象的 margin(css)属性,水平方向上默认值为 30 像素,垂直方向上默认值为 20 像素。

layout.pspace : (number) 节点收缩/展开控制器的尺寸(像素)

如果某一节点(根节点除外)存在下级节点,则此节点外侧则会显示出收缩/展开下级节点的控制器,此参数用于设置此控制器的大小(宽和高),默认值为 13 像素。

2.4. 快捷键

shortcut.enable : (bool) 是否启用快捷键

该参数用于控制是否可以在jsMind界面上使用键盘快捷键对思维导图进行编辑(或其它操作),默认值为 true,即启用快捷键。

shortcut.handles : (object{string : function}) 命名的快捷键事件处理器

jsMind提供了一些常用的处理器,用于操作思维导图(参见下一节),该参数提供了定义额外处理器的能力。

该参数是一个 string->function(jsmind,event) 的集合,string 指名了该处理器的名称,function 则是这个处理器具体要执行的逻辑,在下一节的 shortcut.mapping 的配置中,将把处理器的名称绑定到具体的按键上,实现快捷操作的目的。比如以下代码就定义了一个处理器:

handles : {

'dosomething' : function(jm,e){

// do something...

},

'dosomeotherthing' : function(jm,e){

// do some other things

}

...

}

shortcut.mapping : (object{string : number}) 快捷键映射配置

该参数用于配置具体的按键与处理器之间的对应关系,此代码显示了默认情况下的对应关系,如 [Insert] 键的代码是 45 ,可用于添加一个子节点,而 112 代表的是 [F1] 键,用于 dosomething。

mapping:{ // handle mapping.

addchild : 45, //

addbrother : 13, //

editnode : 113, //

delnode : 46, //

toggle : 32, //

left : 37, //

up : 38, //

right : 39, //

down : 40, //

// 示例

dosomething: 112, //

}

除了上述这种单一按键的情况,jsMind新增了对组合按键的支持,组合快捷键的代码为常规按键的代码加上功能键的标识代码。

目前支持四种功能键,对应的标识代码分别为:

Meta : 8192 (jsMind.key.meta)

Ctrl : 4096 (jsMind.key.ctrl)

ALT : 2048 (jsMind.key.alt)

SHIFT : 1024 (jsMind.key.shift)

以下是一些示例:

mapping:{

addchild : jsMind.key.ctrl + 73, // +

delnode : jsMind.key.ctrl + jsMind.key.alt + 68, // + +

}

版权声明

禁止转载、禁止演绎。

jsMind 项目仍在不断升级变化,版本更新时会同时更新对应的文档。为避免给使用者带来困惑,在没有得到书面许可前,禁止转载本文档,同时禁止对本文档进行任何形式的更改。

版权声明:该文观点仅代表作者本人。处理文章:请发送邮件至 三1五14八八95#扣扣.com 举报,一经查实,本站将立刻删除。