KineticJS教程(12)

作者: ysm 

12.舞台

12.1.舞台的大小

舞台创建后还可以用舞台对象的setSize(width, height)方法来设置舞台的宽度与高度。

<script>

stage.setSize(300, 100);

</script>

12.2.舞台的缩放

舞台创建后还可以用舞台对象的setScale()方法来对舞台进行缩放。setScale方法可以接受一个参数,也可以接受两个参数,一个参数是指的横向与纵向均以相同比例缩放,两个参数则是分别设定横向与纵向的缩放比例。参数是不小于0的浮点数,表示缩放的比例,小于1表示缩小,大于1表示放大。另外,缩放是以舞台的左上角为基点的。

<script>

// 横纵方向等比例缩放

stage.setScale(scale);

// 分别制定横纵方向上的缩放比例

stage.setScale(scaleX, scaleY);

</script>

12.3.获取数据URL

Kinetic为舞台对象提供了一个toDataURL方法,可以让用户获得舞台的数据URL信息。toDataURL接受一个方法对象,这个方法至少接受一个参数dataURL保存的既是数据URL。除了这个dataURL参数外,还接受两个参数,一个是mimeType,保存的是数据URL指向数据的mime文件格式,另一个参数是quality,是一个0到1的浮点数,保存的是数据的质量。

用户就可以在这个方法里对数据URL进行处理了。

<script>

stage.toDataURL(function(dataUrl, mimeType, quality){

// 在这里对dataUrl、 mimeType、 quality 信息进行处理

});

</script>

12.4.将舞台保存成JSON数据

将舞台数据保存成JSON数据只需要执行舞台对象的toJSON方法即可。

<script>

var json = stage.toJSON();

</script>

12.5.把JSON数据加载回舞台

将舞台数据保存成JSON数据只需要执行舞台对象的load方法即可。

<script>

// 创建舞台对象

var stage = new Kinetic.Stage({

container: ‘container’,

width: 600,

height: 400

});

// 加载舞台

stage.load(json);

</script>

这个地方要注意,对于事件处理和图像,是不能被序列化成JSON的,需要在加载JSON数据后在加载图像并设定这些事件处理方法。

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

  1. KineticJS教程(1-2)

    1.基本结构 KineticJS首先是要绑定到HTML页面上的一个DOM容器元素上,比如最常用的<div>标签.KineticJS在此容器中创建一个称之为舞台(stage)的结构,这个舞台 ...

  2. NODE-WEBKIT教程(12)全屏

    node-webkit教程(12)全屏 文/玄魂 目录 node-webkit教程(12)全屏 前言 12.1  和全屏有关的三个api Window.enterFullscreen() Window ...

  3. KineticJS教程(11)

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

  4. KineticJS教程(10)

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

  5. KineticJS教程(9)

    KineticJS教程(9) 作者: ysm  9.选择器 Kinetic在舞台.层和组对象上都提供了get方法,用于返回这三者中包含的对象. 9.1.根据ID获取对象 要用id获取对象,首先要给对象 ...

  6. KineticJS教程(8)

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

  7. KineticJS教程(7)

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

  8. KineticJS教程(6)

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

  9. KineticJS教程(5)

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

随机推荐

  1. 【BZOJ 4455】 4455: [Zjoi2016]小星星 (容斥原理+树形DP)

    4455: [Zjoi2016]小星星 Time Limit: 10 Sec  Memory Limit: 512 MBSubmit: 426  Solved: 255 Description 小Y是 ...

  2. Codeforces 650 D. Zip-line

    $ >Codeforces \space 650 D. Zip-line<$ 题目大意 : 有一个长度为 \(n\) 的序列 \(h\) ,\(m\) 次询问,每一次询问求如果把序列中第 ...

  3. POJ 2728 JZYZOJ 1636 分数规划 最小生成树 二分 prim

    http://172.20.6.3/Problem_Show.asp?id=1636 复习了prim,分数规划大概就是把一个求最小值或最大值的分式移项变成一个可二分求解的式子. #include< ...

  4. 【转】代码混淆和apk反编译

    代码混淆 http://blog.csdn.net/vipzjyno1/article/details/21042823 apk反编译 http://blog.csdn.net/vipzjyno1/a ...

  5. Codeforces Round #305 (Div. 1) B. Mike and Feet 单调栈

    B. Mike and Feet Time Limit: 20 Sec  Memory Limit: 256 MB 题目连接 http://codeforces.com/contest/547/pro ...

  6. Unity Pivot/Center与Local/Global总结

    Untiy左上角有两个按钮  Pivot/Center 和 Local/Global  它们叫做 变换Gizmo工具 Pivot/Center:现实游戏对象的轴心参考点.Center为以所有选中物体所 ...

  7. Java--tomcat线程池(分析)

    以apache-tomcat-7.0.57 为例子 tomcat的默认配置如下: <Connector connectionTimeout="/> 默认的线程池为: maxThr ...

  8. Shell编程入门(第二版)(中)

    注:test測试语句一般不单独使用,一般作为if语句的測试条件,如; if test -d file then .... fi test的变量的简写形式"[]" 演示样例-apac ...

  9. https://github.com/wytings

    博客中写了很多比较杂乱的东西,有时候可能一时看不出效果,毕竟代码问题确实是 “Talk is cheap. Show me the code” 所以,就开了一个github,把一些日常开发和使用的工具 ...

  10. Istio在Openshift 3.11的安装

    详细安装步骤及解释参考 https://docs.openshift.com/container-platform/3.11/servicemesh-install/servicemesh-insta ...