• KineticJS教程(1-2)


    1.基本结构

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

    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>

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



  • 相关阅读:
    C++ XML文件解析
    coco2d-x create tableView
    cocos2d-x button setTitleLabel
    cocos2d-X create std colorlayer
    Windows cmd "tree"
    C/C++ std::function && std::bind
    C/C++ “std::invoke”: 未找到匹配的重载函数
    31 迭代器 Iterator 是什么?
    30 哪些集合类是线程安全的?
    02 rpx 与 px
  • 原文地址:https://www.cnblogs.com/snowhite/p/5239032.html
Copyright © 2020-2023  润新知