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. 【筛法求素数】【推导】【组合数】UVALive - 7642 - Prime Distance

    题意:n个格子,m个球,让你把球放入某些格子里,使得所有有球的格子之间的距离(abs(i-j))均为素数 ,让你输出方案数. 只占一个格子或者两个格子显然可行. 占有三个格子的情况下,则必须保证其中两 ...

  2. hibernate之条件查询

    一.条件查询简介 条件查询是更据面向对象特色的数据查询方式,主要通过如下3个类完成 1.Criteria:代表一次查询 2.Criterion:代表一个查询条件 3.Restrictions:产生查询 ...

  3. bzoj 2770 堆的中序遍历性质

    我们知道二叉搜索树的中序遍历是一个已经排好序的序列,知道序列我们无法确定树的形态(因为有多种). 但是,Treap如果告诉我们它的关键字以及权值,那么就可以唯一确定树的形态(Treap的O(logn) ...

  4. April Fools Day Contest 2016 A. Da Vinci Powers

    A. Da Vinci Powers 题目连接: http://www.codeforces.com/contest/656/problem/A Description The input conta ...

  5. vue获取当前v-for里当前点击元素

    app.vue <template> <div id="app"> <ul > <li v-for="(item,index) ...

  6. IDA IDC Tutorials: Additional Auto-Commenting

    https://www.hex-rays.com/products/ida/support/tutorials/idc/autocomment.shtml This program creates a ...

  7. SQL Server 2008内存及I/O性能监控

    来源: it168  发布时间: 2011-04-12 11:04  阅读: 10820 次  推荐: 1   原文链接   [收藏]   以下均是针对Window 32位系统环境下,64位的不在下面 ...

  8. hdu4035之经典慨率DP

    Maze Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65768/65768 K (Java/Others) Total Submi ...

  9. TYVJ P1933 绿豆蛙的归宿 题解(未完成)

    P1933 「Poetize3」绿豆蛙的归宿 时间: 1000ms / 空间: 131072KiB / Java类名: Main 背景 随着新版百度空间的上线,Blog宠物绿豆蛙完成了它的使命,去寻找 ...

  10. Hibernate查询语言

    HQL(Hibernate Query Language)查询语言是完全面向对象的查询语言,它提供了更加面向对象的封装,它可以理解如多态.继承和关联的概念.HQL看上去和SQL语句相似,但它却提供了更 ...