-
JTopo-API-
文档
核心对象
?
?
?
?
?
?
ner
e
不断更新中
(
可能存在错误
)....
目前主要
：
Stage/Scene/Node
API:
一个抽象的舞台对象
,
对应一个
Canvas
和多个场景对象
(Scene)
浏览器
>IE, Firefox, Safari, Opera,
Chrome
frames
[
属性
]
设
置当前舞台播放的帧数
/
秒
默认为
:24
frames
可以为
0
，表示：不自
动绘制，由用户手工调用
Stage
对象的
paint()
方法来触发。
如
果小于
0
意味着：只有键盘、鼠标有动作时才会重绘，例如：<
/p>
= -24
。
浏览器
>IE, Firefox,
Safari, Opera, Chrome
canvas
[
属性
]
对应的
Canvas
对象
浏览器
>IE, Firefox,
Safari, Opera, Chrome
width
[
属性
]
舞
台宽度
(Canvas
的宽度）
浏览器
>IE, Firefox,
Safari, Opera, Chrome
height
[
属性
]
舞
台高度
(Canvas
的高度）
浏览器
>IE, Firefox,
Safari, Opera, Chrome
mode
[
属性
]
舞台模式，不同模式下有不同的表现
:
设置舞台模式，例如：
=
normal[
默认
]
：可以点击选中单个节点（按住
Ctrl
可以选中多个），点
中空白处可以拖拽
整个画面
drag:
该模式下不可以选择节点，只能拖拽整个画面
select:
可以框选多个节点、可以点击单个节点
edit:
在默认基础上增加了：选中节点时可以通过
6
个控制点来调整节点的宽、高
浏览器
>IE, Firefox,
Safari, Opera, Chrome
childs
[
属性
]
场景对象列表
浏览器
>IE, Firefox, Safari, Opera,
Chrome
eagleEye [
属性
]
鹰眼对象
显示鹰眼：
e =
true
隐藏鹰眼：
e =
false
浏览器
>IE, Firefox, Safari, Opera,
Chrome
wheelZoom
[
属性
]
鼠
标滚轮缩放操作比例，默认为
null
，不显示鹰眼
启用鼠标滚轮缩放：
oom = 0.85;
//
缩放比例为
0.85
禁用用鼠标滚轮缩放
: oom =
null;
浏览器
>IE, Firefox, Safari, Opera,
Chrome
add(Scene)
[
函数
]
将
一个
Scene
场景加入到舞台中（只有加入舞台才可以显示出
现）
浏览器
>IE, Firefox, Safari, Opera,
Chrome
remove(Scene)
[
函数
]
将
一个
Scene
场景从舞台中移除（不再显示）
浏览器
>IE,
Firefox, Safari, Opera, Chrome
clear()
[
函数
]
将
所有
Scene
场景从舞台中移除
浏览器
>IE, Firefox,
Safari, Opera, Chrome
paint()
[
函数
]
执行一次绘制
,
如果
frames
设置为
0
，可以
手工调用此方法来通知
jtopo
进行一次重绘。
浏览器
>IE,
Firefox, Safari, Opera, Chrome
zoom(scale)
[
函数
]
缩
放，
scale
取值范围
[0-1]<
/p>
，
实际上本操作是调用了舞台中所有
Sc
ene
对象的
zoom
函数。
浏览器
>IE,
Firefox, Safari, Opera, Chrome
zoomOut(scale)
[
函数
]
放
大，
scale
取值范围
[0-1],
调用
zoom
实现。
< br>
浏览器
>IE,
Firefox, Safari, Opera, Chrome
zoomIn(scale)
[
函数
]
缩
小，
scale
取值范围
[0-1],
调用
zoom
实现。
< br>
浏览器
>IE,
Firefox, Safari, Opera, Chrome
centerAndZoom(scale) [
函数
]
缩放并居中显示所有元素
浏览器
>IE, Firefox,
Safari, Opera, Chrome
setCenter(x, y)
[
函数
]
设置当前舞台的中心坐标（舞台平移）
浏览器
>IE, Firefox,
Safari, Opera, Chrome
getBound()
[
函数
]
得
到舞台中所有元素位置确定的边界大小（
left
、
top
、
right
、<
/p>
bottom
）
浏览器
>IE, Firefox,
Safari, Opera, Chrome
saveImageInfo()
[
函数
]
导
出成
PNG
图片（在新打开的浏览器
T
ab
页中）
浏览器
>IE, Firefox,
Safari, Opera, Chrome
saveAsLocalImage()
[
函数
]
导
出成
PNG
图片（直接弹出另存为对话框或者用下载软件下载）
浏览器
>IE, Firefox, Safari, Opera,
Chrome
toJson()
[
函数
]
把
当前对象的属性序列化成
json
数据
浏览器
>IE, Firefox,
Safari, Opera, Chrome
addEventListener(eventName,
eventHandler) [
函数
]
监听事件
例如：
ntListener(
可以监听的事件有：
click,d
bclick,mousedown,mouseup,mouseover,mouseout,mousem
ove,mousedrag,
mousewheel
浏览器
>IE, Firefox,
Safari, Opera, Chrome
removeEventListener(eventName) [
函数
]
移除监听事件和
add
EventListener
相对应
浏览器
>IE, Firefox,
Safari, Opera, Chrome
removeAllEventListener() [
函数
]
移除所有监听事件
浏览器
>IE, Firefox,
Safari, Opera, Chrome
click(eventHandler)
[
函数
]
监
听鼠标单击事件（鼠标按下并松开），等价于：
ntListener(
eventHandler);
浏览器
>IE, Firefox,
Safari, Opera, Chrome
dbclick(eventHandler)
[
函数
]
监
听鼠标双击事件（鼠标按下并松开），等价于：
ntListener(
eventHandler);
浏览器
>IE, Firefox,
Safari, Opera, Chrome
mousedown(eventHandler)
[
函数
]
监
听鼠标按下事件，等价于：
ntListener(
浏览器
>IE, Firefox,
Safari, Opera, Chrome
mouseup(eventHandler)
[
函数
]
监听鼠标松开事件，等价于：
ntListener(
浏览器
>IE,
Firefox, Safari, Opera, Chrome
mouseover(eventHandler) [
函数<
/p>
]
监听鼠标进入
Canvas
事件，等价于：
ntListener(
even
tHandler);
浏览器
>IE, Firefox, Safari, Opera,
Chrome
mouseout(eventHandler)
[
函数
]
监
听鼠标离开
Canvas
事件，等价于：
ntListener(
eventHandler);
浏览器
>IE, Firefox,
Safari, Opera, Chrome
mousemove(eventHandler)
[
函数
]
监
听鼠标移动事件，等价于：
ntListener(
浏览器
>IE, Firefox,
Safari, Opera, Chrome
mousedrag(eventHandler)
[
函数
]
监听鼠标拖拽事件，等价于：
ntListener(
浏览器
>IE,
Firefox, Safari, Opera, Chrome
mousewheel(eventHandler) [
函数
]
监听鼠标滚轮事件，等价于：
ntL
istener(
API:
场景对象，概念上同很
多图形系统中的
Layer
。
浏览器
>IE, Firefox, Safari,
Opera, Chrome
alpha
[
属性
]
场
景的透明度，默认为
0
，即：完全透明。所以有时候即使设置了
背景颜色却不
起作用）
浏览器
>IE, Firefox, Safari,
Opera, Chrome
backgroundColor
[
属性
]
背
景颜色，设置的时候请注意
alpha
属性。
< br>
浏览器
>IE, Firefox,
Safari, Opera, Chrome
background
[
属性
]
设置场景的背景图片
,
与
backgroundColor
冲突，一旦设置了该属性，
backgroundColor
属性将失效
例如：
ound =
浏览器
>IE, Firefox, Safari,
Opera, Chrome
visible
[
属性
]
得到、设置场景是否可见，默认为：
true
浏览器
>IE, Firefox, Safari,
Opera, Chrome
areaSelect
[
属性
]
在
select
模式中，是否显示选择矩形框
浏览器
>IE, Firefox, Safari,
Opera, Chrome
mode
[
属性
]
舞台模式，不同模式下有不同的表现
:
设置舞台模式，例如：
=
norm
al[
默认
]
：可以点击选中单个节点
（按住
Ctrl
可以选中多个），点中空白处
< br>可以拖拽整个画面
drag:
该模式下不可以选择节点，只能拖拽整个画面
select:
可以框选多个节点、可以点击单个节点
edit:
在默认基础上增加了：选中节点时可以通过
6
个控制点来调整节点的宽、
高
浏览器
>IE, Firefox,
Safari, Opera, Chrome
selectedElements [
属性
< br>]
当前场景中被选中的元素对象
浏览器
>IE,
Firefox, Safari, Opera, Chrome
translateX
[
属性
]
场景偏移量（水平方向），随鼠标拖拽变化
浏览器
>IE, Firefox, Safari,
Opera, Chrome
translateY
[
属性
]
场景偏移量（垂直方向），随鼠标拖拽变化
浏览器
>IE, Firefox, Safari,
Opera, Chrome
show()
[
函数
]
显示
浏览器
>IE, Firefox, Safari, Opera, Chrome
hide()
[
函数
]
隐藏
浏览器
>IE,
Firefox, Safari, Opera, Chrome
add(element)
[
函数
]
添加对象到当前场景中来
,
例如：
(new ()); (new
(nodeA, nodeZ))
浏览器
>IE, Firefox, Safari,
Opera, Chrome
remove(element)
[
函数
]
移除场景中的某个元素
,
例如：
(myNode);
浏览器
>IE, Firefox, Safari,
Opera, Chrome
clear()
[
函数
]
移除场景中的所有元素
浏览器
>IE, Firefox, Safari,
Opera, Chrome
getDisplayedElements() [
函数
]
浏览器
>IE, Firefox,
Safari, Opera, Chrome
获取场景中可见并绘制出来的元素（超过
Canvas
边界）
getDisplayedNodes() [<
/p>
函数
]
浏览器
>IE, Firefox, Safari, Opera, Chrome
获取场景中可见并绘制出来的
Nod
e
对象（超过
Canvas
边界）
findElements(cond) [
函数
]
浏览器
>IE,
Firefox, Safari, Opera, Chrome
查找场景中的对象，例如
:
findElements(function(e){ return e.x > 100; });
addEventListener(eventName,
eventHandler) [
函数
]
监听事件
例如：
ntListen
er(
可以监听的事件有：
click,dbclick,mo
usedown,mouseup,mouseover,mouseout,mousemove,mouse
drag,m
ousewheel
浏览器
>IE, Firefox, Safari,
Opera, Chrome
removeEventListener(eventName) [
函数
]
移除监听事件和
add
EventListener
相对应