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. BeautifulSoup解析库

    解析库 解析器 使用方法 优势 劣势 Python标准库 BeautifulSoup(html, 'html.parser') 速度适中,容错能力强 老版本python容错能力差 lxml HTML解 ...

  2. MySQL笔记(二)之数据检索常用关键字

    SELECT 用于数据的选择 语法: SELECT 列 FROM 表; #从表中选择某些列,也可以是*,代表全部列 DISTINCT 当某些列包含重复值的时候,DISTINCT用于过滤掉重复值,使重复 ...

  3. 【二分答案】【DFS】【分类讨论】Gym - 100851F - Froggy Ford

    题意:河里有n块石头,一只青蛙要从左岸跳到右岸,你可以再在任意一个位置放一块石头,使得在最优方案下,青蛙单步跳的距离的最大值最小化,输出该位置. 将原图视作完全图,二分答案mid,然后在图中只保留小于 ...

  4. Codeforces Beta Round #9 (Div. 2 Only) B. Running Student 水题

    B. Running Student 题目连接: http://www.codeforces.com/contest/9/problem/B Description And again a misfo ...

  5. hihocoder 162周 1323 : 回文字符串

    hihocoder1323 : 回文字符串(162周) 题目链接 思路: dp; ac代码: #include<iostream> #include<cstdio> #incl ...

  6. Android 基于蓝牙的方向控制器

    最近开发了一个蓝牙控制器App,用手机远程控制小球的运动. 包含了一些基础知识:多线程使用,页面UI数据更新,按钮事件,选择项功能,蓝牙功能(蓝牙打开,蓝牙搜索,蓝牙连接,蓝牙命令发送,蓝牙命令接收) ...

  7. UVa 1329 - Corporative Network Union Find题解

    UVa的题目好多,本题是数据结构的运用,就是Union Find并查集的运用.主要使用路径压缩.甚至不须要合并树了,由于没有反复的连线和改动单亲节点的操作. 郁闷的就是不太熟悉这个Oj系统,竟然使用库 ...

  8. Mac通过wifi连接 Android设备

    公司用的全是mac开发,但是全是type-C接口,每次背电脑回家啊,还得带个数据线转换器…… 想着回来,直接通过Wi-Fi连接手机就好,发现完全忘了之前套路,现在赶紧记下一波,保证包教包会! STEP ...

  9. Struts2数据验证机制

    1. 手动验证的实现 只需要在继承ActionSupport类的情况下,直接重写validate()方法即可.使用validate()方法可以对用户请求的多个Action方法进行验证,但其验证的逻辑是 ...

  10. OpenCV学习(7) 分水岭算法(1)

            分水岭算法主要用于图像分段,通常是把一副彩色图像灰度化,然后再求梯度图,最后在梯度图的基础上进行分水岭算法,求得分段图像的边缘线.         下面左边的灰度图,可以描述为右边的地 ...