KineticJS教程7:舞台

类别:    标签: 编程 js   阅读次数:   版权: (CC) BY-NC-SA

2015-06-11 08:27:22

12. 舞台

12.1. 舞台的大小

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

# Language: js
<script>
	stage.setSize(300, 100);
</script>

12.2. 舞台的缩放

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

# Language: js
<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进行处理了.

# Language: js
<script>
	stage.toDataURL(function(dataUrl, mimeType, quality){
		// 在这里对dataUrl,  mimeType,  quality 信息进行处理
	});
</script>

12.4. 将舞台保存成JSON数据

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

# Language: js
<script>
	var json = stage.toJSON();
</script>

12.5. 把JSON数据加载回舞台

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

# Language: js
<script>
	// 创建舞台对象
	var stage = new Kinetic.Stage({
		container: "container",
		width: 600,
		height: 400
	});

	// 加载舞台
	stage.load(json);
</script>

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

随意赞赏

微信

支付宝
◆本文地址: , 转载请注明◆
◆评论问题: https://jerkwin.herokuapp.com/category/3/博客, 欢迎留言◆


前一篇: KineticJS教程6:对象的移动及其上下层关系
后一篇: 在PPT中动态展示分子三维结构的三种方法

访问人次(2015年7月 9日起): | 最后更新: 2017-09-26 07:50:25 UTC | 版权所有 © 2008 - 2017 Jerkwin