一.相关知识:
- AMD规范:异步模块定义(Asynchronous Module Definition),它采用异步方式加载模块,模块的加载不影响它后面语句的运行。所有依赖这个模块的语句,都定义在一个回调函数中,等到加载之后,这个回调函数才会执行。
- AMD模块的写法
require.js加载的模块,采用AMD规范。也就是说,模块必须按照AMD的规定来写。
具体来说,就是模块必须采用特定的define()函数来定义。如果一个模块不依赖其他模块,那么可以直接定义在define()函数之中。
假定现在有一个math.js文件,它定义了一个math模块。那么,math.js就要这样写:
// math.js
define(function (){
var add = function (x,y){
return x+y;
};
return {
add: add
};});
加载方法如下:
// main.js
require(['math'], function (math){
alert(math.add(1,1));
});
如果这个模块还依赖其他模块,那么define()函数的第一个参数,必须是一个数组,指明该模块的依赖性。
define(['myLib'], function(myLib){
function foo(){
myLib.doSomething();
}
return {
foo : foo
};
});
当require()函数加载上面这个模块的时候,就会先加载myLib.js文件。
三.与bngraph相关名词解释:
1.Canvas:
Canvas元素是HTML5的新元素之一,用于在网页上绘制图形,相当于在HTML中嵌入了一张画布,这样就可以直接在HTML上进行图形操作(注:Canvas元素本身没有绘图能力,它需要借助javaScript来实现绘图功能)。
在使用bngraph.js的HTML页面中可以通过document.createElement('canvas').getContext
是否支持canvas的获取上下文的操作来判断
用户所使用的浏览器是否
支持canvas元素.
2.MVC:
- Stroage(M):Shape数据CURD管理。
- Painter(V):canvas元素生命周期管理,视图渲染,绘画,更新控制。
- Handler(C):事件交互处理,实现完整dom事件模拟封装。
3.
shape:
图形实体,分而自治的图形策略,可扩展定义
4.
tool:
绘画扩展相关实用方法,工具及脚手架。
4.
animation:
动画扩展,提供promise式的动画接口和常用缓动函数
四.bngraph的特色:
1.
简单:
无需canvas基础,精简的接口方法,符合AMD标准,易学易用。
require(['bngraph'], function(bngraph) { // just init to get a bngraph Instance var bg = bngraph.init(document.getElementById('main')); // bg can be used now! ... } );
2.数据驱动:利用bngraph绘图,你只需要定义图形数据,剩下的事情就交个bngraph吧。
var CircleShape = require('bngraph/shape/Circle'); bg.addShape( new CircleShape({ style : { x : 100, y : 100, r : 50, color : 'rgba(220, 20, 60, 0.8)' } }) ); bg.render();
3.完整的事件封装:用dom事件模型去操作canvas里的图形元素。你不仅可以响应bngraph全局时间,你甚至可以为特定shape上添加特定时间,后续发生的一切都会按你想的运行。
var CircleShape = require('bngraph/shape/Circle'); bg.addShape( new CircleShape({ style : {...}, // 图形元素上绑定事件 onmouseover : function(params) { concole.log('catch you!'); } }) ); // 全局事件 bg.on('click', function(params) {alert('Hello, bngraph!')});
4.高效是分层刷新:正如css中zlevel的作用一样,你可以定义把不同的shape分别放在不同的层中,这不仅实现了视觉上的上下覆盖,更重要的是当图形元素发生变化后的refresh将局限在发生了变化的图形层中,这在你利用bngraph做各种动画效果是十分有用,性能自然也更加出色。
bg.addShape(shapeA); // shapeA.zlevel = 0; (default) bg.addShape(shapeB); // shapeB.zlevel = 1; bg.render(); bg.modShape(shapeB.id, {color:'red'}); // Don't worry! Is merge! bg.refresh(); // Just the level 1 canvas has been refresh~
5.丰富的图形选项:当前内置多种图形元素(圆形、椭圆、圆环、扇形、矩形、多边形、直线、曲线、心形、水滴、路径、文字、图片。。。。),统一丰富的图形属性充分满足你的个性化需求!
var CircleShape = require('bngraph/shape/Circle'); var myShape = new CircleShape({ zlevel : 1, style : { ... // color | strokeColor | text | textFont | ... }, draggable : true });
6.强大的动画支持:提供promise式的动画接口和常用缓动函数,轻松实现各种动画需求。
bg.addShape(newShape); bg.render(); bg.animate(newShape.id) .when(1000, { position : [300, 200] }) .when(2000, { position : [30, 400] }) .start('BounceOut');
7.易于扩展:分而治之的图形定义策略允许你扩展自己独有的图形元素,你既可以完整实现三个接口方法(brush、drift、isCover),也可以通过base派生后仅实现你所关心的图形细节。
function MyShape() { ... } bg.addShape( new MyShape({ // and use it! style : {...}, ... }) );