KineticJS教程1：基本结构与示例|Jerkwin

2015-06-11 08:27:22

来源: 肆零玖陆
对一些代码进行了修改以适用于最新版本的KineticJS

1. 基本结构

KineticJS首先是要绑定到HTML页面上的一个DOM容器元素上, 比如最常用的<div>标签. KineticJS在此容器中创建一个称之为舞台(stage)的结构, 这个舞台由一个不可见的后台层和一个不可见的缓冲层组成, 提供了高性能的路径和像素检测能力. 舞台上再包含若干(至少一层)用户层(layer), 每个层上又包含有若干canvas元素, 比如各种图形, 图像, 元素组(组可以包含其他的图形和其他的组)等. 用户还可以给这些层上的图形, 元素组, 层本身以及舞台本身添加事件监听方法, 以响应鼠标, 键盘等事件. 浏览器最终显示的就是这些用户层的叠加效果.

原始图像来源: http://www.kineticjs.com/how-it-works.php

2. 第一个画面

现在我们开始用Kinetic制作我们的第一个画面.

Kinetic绘图的基本的流程可以如下图所示:

首先是创建一个HTML5页面, 在<head>里添加对Kinetic库的引用:

<script src="kinetic.js"></script>

在<body>中添加一个用于绑定到Kinetic用于创建舞台的容器, 比如说可以是个<div>:

<div id="container"></div>

我们的Kinetic图像就将在这个容器中完成绘制.

在本例中, 我们打算创建一个600×400的舞台, 并在中心位置画一个红色矩形框.

同样是在<head>中添加脚本:

# Language: js
<script>
	//在页面加载时进行绘图
	window.onload = function() {

		//创建Kinetic舞台, 绑定我们添加的<div>容器
		var stage = new Kinetic.Stage({
			container: "container", //<div>的id
			width: 600, //创建的舞台宽度
			height: 400 //创建的舞台高度
		});

		//创建Kinetic用户层
		var layer = new Kinetic.Layer();

		//创建一个Kinetic矩形对象
		var rect = new Kinetic.Rect({
			x: 200, //矩形左上角x坐标
			y: 150, //矩形左上角y坐标
			width: 200, //矩形的宽度
			height: 100, //矩形的高度
			fill: "red", //矩形的填充色
			stroke: "black", //矩形边缘线的颜色
			strokeWidth: 4 //矩形边缘线的宽度
		});

		//向用户层中添加上面的矩形
		layer.add(rect);

		//将上面的用户层添加到舞台上
		stage.add(layer);
	};
</script>

用浏览器打开页面就能看到如下的图像了: