仓库源文，站点原文

layout: post title: KineticJS教程1：基本结构与示例 categories:

科 tags:
编程
js

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>中添加脚本:

<pre class="line-numbers" data-start="0"><code class="language-javascript"># 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> </code></pre>

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