module & area render

hustcc · Jun 23, 2018 · 2fdc9ef · 2fdc9ef
1 parent 8b3571b
commit 2fdc9ef
Show file tree

Hide file tree

Showing 23 changed files with 691 additions and 346 deletions.
diff --git a/.babelrc b/.babelrc
@@ -0,0 +1,26 @@
+{
+  "env": {
+    "rollup": {
+      "presets": [
+        [
+          "env",
+          {
+            "modules": false
+          }
+        ]
+      ],
+      "plugins": [
+        "transform-class-properties",
+        "transform-object-rest-spread"
+      ]
+    },
+    "babel": {
+      "presets": ["env"],
+      "plugins": [
+        "transform-class-properties",
+        "add-module-exports",
+        "transform-object-rest-spread"
+      ]
+    }
+  }
+}
diff --git a/.gitignore b/.gitignore
@@ -1,5 +1,5 @@
 .project
 .settings
-
+.idea
 node_modules/*
 
diff --git a/.jshintrc b/.jshintrc
diff --git a/.travis.yml b/.travis.yml
diff --git a/README-zh.md b/README-zh.md
@@ -1,25 +1,27 @@
 # canvas-nest.js
 
-> 一个基于html5 canvas绘制的网页背景效果，非常赞！如果需要 `wordpress插件`，在插件库搜索 `canvas-nest` 或者看看项目 [canvas-nest-for-wp](https://github.com/aTool-org/canvas-nest-for-wp)。
+> 一个基于 html5 canvas 绘制的网页背景效果，非常赞！如果需要 `wordpress插件`，在插件库搜索 `canvas-nest` 或者看看项目 [canvas-nest-for-wp](https://github.com/aTool-org/canvas-nest-for-wp)。
 
-![travis-ci](https://travis-ci.org/hustcc/canvas-nest.js.svg?branch=master) ![npm](https://img.shields.io/npm/v/canvas-nest.js.svg?style=flat-square) ![npm](https://img.shields.io/npm/l/canvas-nest.js.svg?style=flat-square)
+[![npm](https://img.shields.io/badge/demo-online-brightgreen.svg)](https://git.hust.cc/canvas.nest.js)
+![npm](https://img.shields.io/npm/v/canvas-nest.js.svg)
+![npm](https://img.shields.io/npm/dm/canvas-nest.js.svg)
 
 
 ## 特性
 
- - 不依赖任何框架或者类库，比如不依赖 jQuery，使用原生的 javascript。
- - 非常小，只有1.6 kb，如果开启 gzip，可以更小。
- - 非常容易实现，配置简单，即使你不是web开发者，也能简单搞定。
+ - 不依赖 jQuery，使用原生的 javascript。
+ - 非常小，只有 2 Kb。
+ - 非常容易实现，配置简单，即使你不是 web 开发者，也能简单搞定。
 
 
 ## 使用
 
-使用非常简单，感觉都没有必要写这一节内容。
+ - 快捷使用
 
 将下面的代码插入到 `<body> 和 </body> 之间`.
 
 ```html
-<script type="text/javascript" src="//cdn.bootcss.com/canvas-nest.js/1.0.1/canvas-nest.min.js"></script>
+<script type="text/javascript" src="//cdn.bootcss.com/canvas-nest.js/x.x.x/canvas-nest.js"></script>
 ```
 
 强烈建议在 `</body>`标签上方. 例如下面的代码结构:
@@ -32,15 +34,31 @@
 <body>
 	...
 	...
-	...
-	<script type="text/javascript" src="//cdn.bootcss.com/canvas-nest.js/1.0.1/canvas-nest.min.js"></script>
+	<script type="text/javascript" src="//cdn.bootcss.com/canvas-nest.js/x.x.x/canvas-nest.js"></script>
 </body>
 </html>
 ```
 
-`请注意不要将代码置于 <head> </head>里面`.
+然后就完成了，打开网页即可看到效果!`请注意不要将代码置于 <head> </head>里面`.
+
+
+ - 模块化区域绘制（定制开发）
+
+> npm i --save canvas-nest.js
+
+然后可以使用 script 方式引入 umd 包，当然也可使用模块化方式 import。并且只有一个 API，使用如下：
+
+```
+import CanvasNest from 'canvas-nest.js';
+
+const config = {
+  color: '255,0,0',
+  count: 88,
+};
 
-然后就完成了，打开网页即可看到效果!
+// 在 element 地方使用 config 渲染效果
+new CanvasNest(element, config);
+```
 
 
 ## 配置和配置项
@@ -54,11 +72,22 @@
 Example:
 
 ```
-<script type="text/javascript" color="0,0,255" opacity='0.7' zIndex="-2" count="99" src="//cdn.bootcss.com/canvas-nest.js/1.0.1/canvas-nest.min.js"></script>
+<script type="text/javascript" color="0,0,255" opacity='0.7' zIndex="-2" count="99" src="//cdn.bootcss.com/canvas-nest.js/x.x.x/canvas-nest.js"></script>
 ```
 
 这些属性配置在引用js的script标签中，作为它的一个属性值。所有的配置项都有默认值，如果你不知道怎么设置，可以先不设置这些配置项，就使用默认值看看效果也可以的。
 
+或者模块化调用的时候，写成：
+
+```js
+{
+  color: '0,0,255',
+  opacity: 0.7,
+  zIndex: -2,
+  count: 99,
+};
+```
+
 
 ## 示例
 
@@ -71,6 +100,9 @@ Example:
 
 ## 其他
 
-本项目的Javascript文件已经存储在CDN上，可以直接使用，地址为： [http://www.bootcdn.cn/canvas-nest.js/](http://www.bootcdn.cn/canvas-nest.js/)，如果你不需要 CDN 或者有自己的 CDN，可以直接下载源码 dist 目录中的 `canvas-nest.min.js`，然后相应的修改使用地址即可。
+本项目的 Javascript 文件已经存储在 CDN 上，可以直接使用，地址为： [http://www.bootcdn.cn/canvas-nest.js/](http://www.bootcdn.cn/canvas-nest.js/)，如果你不需要 CDN 或者有自己的 CDN，可以直接下载源码 dist 目录中的 `canvas-nest.js`，然后相应的修改使用地址即可。
+
+
+## License
 
-有任何的bug或者建议，非常鼓励 issue 和 pr，来者不拒。
+MIT@[hustcc](https://github.com/hustcc).
diff --git a/README.md b/README.md
@@ -2,28 +2,29 @@
 
 > A nest backgroud of website draw on canvas. [中文Readme帮助文档](https://github.com/hustcc/canvas-nest.js/blob/master/README-zh.md). For `wordpress plugin`, search `canvas-nest` or see [canvas-nest-for-wp](https://github.com/aTool-org/canvas-nest-for-wp).
 
-![travis-ci](https://travis-ci.org/hustcc/canvas-nest.js.svg?branch=master) ![npm](https://img.shields.io/npm/v/canvas-nest.js.svg?style=flat-square) ![npm](https://img.shields.io/npm/l/canvas-nest.js.svg?style=flat-square)
+[![npm](https://img.shields.io/badge/demo-online-brightgreen.svg)](https://git.hust.cc/canvas.nest.js)
+![npm](https://img.shields.io/npm/v/canvas-nest.js.svg)
+![npm](https://img.shields.io/npm/dm/canvas-nest.js.svg)
 
 
+## Feature
 
-## feature
+ - No need jQuery.
+ - Light, only 2 Kb.
+ - Easy to use, even you are not a web developer.
 
- - do not depend on jQuery or other javascript framework.
- - very light, only 1.6 kb. can be smaller after gzip.
- - so easy to use, even you are not a web developer.
 
+## Usage
 
-## usage
+ - Script tag
 
-so eazy that I do not want write the chapter.
-
-insert the code below `between <body> and </body>`.
+Insert the code below `between <body> and </body>`.
 
 ```html
-<script src="//cdn.bootcss.com/canvas-nest.js/1.0.1/canvas-nest.min.js"></script>
+<script src="//cdn.bootcss.com/canvas-nest.js/x.x.x/canvas-nest.js"></script>
 ```
 
-suggest before the tag `</body>`. like below:
+Suggest before the tag `</body>`, like below:
 
 ```html
 <html>
@@ -33,19 +34,36 @@ suggest before the tag `</body>`. like below:
 <body>
 	...
 	...
-	...
-	<script src="//cdn.bootcss.com/canvas-nest.js/1.0.1/canvas-nest.min.js"></script>
+	<script src="//cdn.bootcss.com/canvas-nest.js/x.x.x/canvas-nest.js"></script>
 </body>
 </html>
 ```
 
+Then ok! `Please do not add the code in the <head> </head>`.
+
+
+ - Module usage (Area render)
+
+> npm i --save canvas-nest.js
+
+Or import the `umd` package use `script` tag.
+
+There is only one API, use it like:
+
+```
+import CanvasNest from 'canvas-nest.js';
 
-`please do not add the code in the <head> </head>`.
+const config = {
+  color: '255,0,0',
+  count: 88,
+};
 
-then ok!
+// render nest on element with config.
+new CanvasNest(element, config);
+```
 
 
-## config
+## Config
 
  - **`color`**: the canvas line color, default: `'0,0,0'` ; the color is (R,G,B)
  - **`opacity`**: the opacity of line (0~1), default: `0.5`
@@ -55,23 +73,40 @@ then ok!
 Example:
 
 ```html
-<script type="text/javascript" color="0,0,255" opacity='0.7' zIndex="-2" count="99" src="//cdn.bootcss.com/canvas-nest.js/1.0.1/canvas-nest.min.js"></script>
+<script type="text/javascript" color="0,0,255" opacity='0.7' zIndex="-2" count="99" src="//cdn.bootcss.com/canvas-nest.js/x.x.x/canvas-nest.js"></script>
+```
+
+Or
+
+```js
+{
+  color: '0,0,255',
+  opacity: 0.7,
+  zIndex: -2,
+  count: 99,
+};
 ```
 
 set the config on the script node `as a attribute`. all the config has the default value, you can choose to set any of them.
 
 
-## preview
+## Preview
 
 1. [Online Tools: https://atool.vip/](https://atool.vip/)
 
-if you has used this project, pls let me know, I can add your website on.
+
+If you has used this project, you can send pr and write it here.
+
 
 ![screenshot](https://raw.githubusercontent.com/hustcc/canvas-nest.js/master/screenshot.png)
 
 
-## other
+## Other
+
+Library cdn url: [http://www.bootcdn.cn/canvas-nest.js/](http://www.bootcdn.cn/canvas-nest.js/).
+
+
 
-Project library cdn url: [http://www.bootcdn.cn/canvas-nest.js/](http://www.bootcdn.cn/canvas-nest.js/).
+## License
 
-any bug or question, welcome to push request and issue.
+MIT@[hustcc](https://github.com/hustcc).