KineticJS教程(1-2)

KineticJS教程(1-2)

作者:ysm @ iysm.net

邮箱:[email protected]

注:参考 http://www.html5canvastutorials.com/kineticjs/html5-canvas-events-tutorials-introduction-with-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>中添加脚本:

 

 

<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);

 

stage.draw();

 

 

};

 

</script>

 

 

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



KineticJS教程(1-2),古老的榕树,5-wow.com

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。