KineticJS教程(9)

作者: ysm 

9.选择器

Kinetic在舞台、层和组对象上都提供了get方法,用于返回这三者中包含的对象。

9.1.根据ID获取对象

要用id获取对象,首先要给对象赋予一个id,比如下面代码创建的Rect的id就是id1:

<script>

var rect = new Kinetic.Rect({

id : “id1“

});

</script>

要注意的是,id是唯一的,不同对象不能使用相同的id,否则get也只能返回其中的一个。

然后用get方法,id选择符“#”为参数获取对象:

<script>

var obj = stage.get(‘#id1′)[0];

var obj = layer.get(‘#id1′)[0];

var obj = group.get(‘#id1′)[0];

</script>

这个地方要注意,这个get返回的是一个数组,即便id是唯一的,所以要得到所要的对象,必须带上数组的索引。

9.2.根据名称获取对象

要用名称获取对象,首先要给对象赋予一个name名称,比如下面代码创建的Rect的名称就是name1:

<script>

var rect = new Kinetic.Rect({

name : “name1“

});

</script>

与id不同,name不是唯一的,不同对象是可以共用相同的name的。

然后用get方法,id选择符“.”为参数获取对象:

<script>

var objs = stage.get(‘.name1′);

var objs = layer.get(‘.name1 ‘);

var objs = group.get(‘.name1 ‘);

</script>

这个地方要注意,这个get返回的是一个数组,包含所有叫这个名字的对象。

KineticJS教程(9)的更多相关文章

  1. KineticJS教程(12)

    KineticJS教程(12) 作者: ysm  12.舞台 12.1.舞台的大小 舞台创建后还可以用舞台对象的setSize(width, height)方法来设置舞台的宽度与高度. <scr ...

  2. KineticJS教程(11)

    KineticJS教程(11) 作者: ysm 11.对象的上下关系 11.1.层的上下关系 Kinetic的层是按照添加到舞台的次序,由下向上排列,上层遮盖下层的图形.每个层各自有一个ZIndex编 ...

  3. KineticJS教程(10)

    KineticJS教程(10) 作者: ysm  10.在容器之间移动图形对象 Kinetic支持通过图形对象的moveTo(container)方法把图形对象从一个容器移动到另一个容器里,这个容器指 ...

  4. KineticJS教程(8)

    KineticJS教程(8) 作者: ysm  8.动画 动画就是一帧帧的画面按照时间间隔显示出来,Kinetic给我们提供了一个舞台对象的onFrame方法,用这个方法可以绑定一个动画方法,我们要显 ...

  5. KineticJS教程(7)

    KineticJS教程(7) 作者: ysm 7.图形变换 7.1.线性变化 Kinetic提供了一个图形对象的transitionTo(config)方法实现图形的线性变换,也就是从原始的状态线性变 ...

  6. KineticJS教程(6)

    KineticJS教程(6) 作者: ysm 6.拖拽 6.1.拖拽功能 要实现Kinetic对象的拖拽功能很简单,只需要将图形对象的draggable属性设为true就可以了. <script ...

  7. KineticJS教程(5)

    KineticJS教程(5) 作者: ysm  5.事件响应 5.1.图形的事件响应 图形对象对事件的响应处理可以使用 on() 方法绑定事件类型和相应方法. On() 方法需要一个事件类型参数和相应 ...

  8. KineticJS教程(4)

    KineticJS教程(4) 作者: ysm  4.图形样式 4.1.填充 Kinetic中图形的填充属性可以在构造方法中的config参数中的fill属性进行设定,也可以用图形对象的setFill方 ...

  9. KineticJS教程(3)

    KineticJS教程(3) 作者: ysm  3.图形对象 3.1.Shape Kinetic提供了一个Shape对象用于在层上绘制图形,我们可以通过Kinetic.Shape()构造方法返回一个S ...

随机推荐

  1. 【UOJ 34】 #34. 多项式乘法 (FFT)

    [分析] 这个只是用来放模板..[其实我还没完全懂的.. 迭代 代替 递归: #include<cstdio> #include<cstdlib> #include<cs ...

  2. 「POI2011 R1」Conspiracy

    「POI2011 R1」Conspiracy 解题思路 : 问题转化为,将点集分成两部分,其中一部分恰好组成一个团,其中另一部分恰好组成一个独立集. 观察发现,如果求出了一个解,那么答案最多可以在这个 ...

  3. [Codeforces #514] Tutorial

    Link: Codeforces #514 传送门 很简单的一场比赛打崩了也是菜得令人无话可说…… D: 一眼二分,发现对于固定的半径和点,能包含该点的圆的圆心一定在一个区间内,求出区间判断即可 此题 ...

  4. hdu 1024 Max Sum Plus Plus DP

    Max Sum Plus Plus Time Limit: 1 Sec  Memory Limit: 256 MB 题目连接 http://acm.hdu.edu.cn/showproblem.php ...

  5. 关于收到谷歌邮件 Googlebot can't access your site 的解决方法

    最近一段时间一直都收到谷歌的邮件,而且“新锐工作室”的关键字在谷歌收录及排名都没有了.下面图为谷歌蜘蛛无法抓取网站的截图,如果你在谷歌网管工具里收到类似消息,说明也中招了.[Webmaster Too ...

  6. ORACEL 创建表空间

    注意点: 1.如果在PL/SQL 等工具里打开的话,直接修改下面的代码中[斜体加粗部分]执行 2.确保路径存在,比如[D:\oracle\oradata\Oracle9i\]也就是你要保存文件的路径存 ...

  7. Struts2 学习笔记 09 访问Web元素

    我们想要访问Map类型request,session,application.真实类型HttpServletRequest,HttpSession,ServletContext的引用,并对它们进行操作 ...

  8. layer弹框,弹出后自动关闭

    今天做项目,出现一个问题,需求是用ajax做文件上传功能,代码写好之后,测试发现问题. 弹出层出现以后我没有主动点击确定和关闭等操作,程序自动关闭了弹出层 一步一步排查,找到了错误,首先,先确认你页面 ...

  9. ios学习笔记图片+图片解释(c语言 oc语言 ios控件 ios小项目 ios小功能 swift都有而且笔记完整喔)

    下面是目录其中ios文件夹包括了大部分ios控件的介绍和演示,swift的时完整版,可以学习完swift(这个看的是swift刚出来一周的视频截图,可能有点赶,但是完整),c语言和oc语言的也可以完整 ...

  10. SEPIC 单端初级电感转换器 稳压器 -- Zeta 转换器

    single ended primary inductor converter 单端初级电感转换器 SEPIC(single ended primary inductor converter) 是一种 ...