学习可视化基础库笔记

最新推荐文章于 2022-06-28 19:23:04 发布

原创最新推荐文章于 2022-06-28 19:23:04 发布 · 594 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#可视化

可视化基础专栏收录该内容

1 篇文章

订阅专栏

一.相关知识：

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：bngraph 是一个轻量级的Canvas类库，MVC封装，数据驱动，提供类Dom事件模型，让canvas绘图大不同！

三.与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 : {...},
        ...
    })
);