KineticJS教程(1-2)

作者：ysm @

邮箱：

注：参考完成此文。

1.基本结构

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

原始图像来源：

2.第一个画面

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

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

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

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

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

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

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

//在页面加载时进行绘图

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>

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

转载于:https://www.cnblogs.com/zhangleblog/p/3912156.html

你可能感兴趣的文章