clay-core
Version:
Provide a more friendly web-side drawing interface!
103 lines (97 loc) • 4.41 kB
HTML
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="../../libs/easycss-1.3.1.min.css">
<link rel="stylesheet" href="../../libs/prettify.css">
<link rel="stylesheet" href="../../doc.css">
<script src="../../libs/prettify.js"></script>
</head>
<body onload="prettyPrint()">
<header>
初始化环境
</header>
<p>
这一部分将对clay.js做一个简要的介绍，主要是库关注的问题、如何更好的使用、需要注意的方面和获取帮助等基本问题。
</p>
<h2>
关注的问题
</h2>
<p>
首先，本库是为了Web端数据可视化而建立的，如果用更通俗的话说，就是为了方便使用HTML + CSS + ES绘制各种图形，并且绘制的图形是可交互的。
</p>
<img width=400 src="../../images/china-map.png" alt="中国地图">
<p>
右图绘制的是一个彩色的2D中国地图，鼠标悬浮所在的地区会显示该地区的一些信息。这是一个简单的例子，通过交互的图形展示数据一方面更直观，另一方面也有更好的用户体验。
</p>
<p>
和别的库不同的是，clay.js关注的重点是绘图过程中繁琐的操作和复杂的计算部分，通过提供更友好的操作接口和丰富而基础的计算接口来加速绘图。除此之外，不会也不喜欢强迫使用者改变自己的代码习惯，或者说在尽可能的情况下，保证灵活性。
</p>
<h2>
如何使用？
</h2>
<p>
如果你开发的是一个web项目，直接在页面引入打包后的文件后即可：
</p>
<pre class='prettyprint lang-html'><script src="./build/clay-core.min.js" type="text/javascript"></script></pre>
<p>
如果你想通过npm方式管理，首先你需要通过命令行安装clay.js：
</p>
<pre class='prettyprint lang-js'>npm install --save clay-core</pre>
<p>
安装好了，可以这样调用：
</p>
<pre class='prettyprint lang-js'>import clay from 'clay-core';
// 基本配置(可以不配置，使用默认值)
clay.config(...);
...
// 导出，供别的模块使用(如果没有配置，别的模块重新import也一样)
export default clay;</pre>
<h4>
更多import接口
</h4>
<p>
如果你是使用npm方式管理的，除了导入全局clay外，你还可以导入你需要的接口，下面列出全部可导入接口：
</p>
<pre class='prettyprint lang-js'>import {
// 全局变量
clay, $$,
// 布局
treeLayout,
// 坐标变换
rotate, move, scale,
// 曲线插值
hermite, cardinal, catmullRom,
// Matrix4矩阵
Matrix4,
// 地球坐标映射
map,
// 轮询
animation, loop
} from 'clay-core';</pre>
<h2>
注意点
</h2>
<p>
需要特别声明一下：clay.js的目的不是创建一种新的环境（比如框架的感觉），然后在里面绘图，而是对原生开发的一种加强。
</p>
<p>
但是，并不意味着你应该把她看成方法的集合，这不益于你的使用。事实是，的确有非常多且独立的方法供使用，比如插值计算和经纬度的坐标映射等，只不过对于如数据和结点之间的维护、区域管理者和canvas2D图层管理者等，特别是webgl3D部分，都是经过一定的设计，不应该是独立的方法，这些请在例子和使用中慢慢体会。
</p>
<h2>
获取帮助
</h2>
<p>
无论何时，在使用clay.js绘制图形的时候，如果遇到任何疑惑或问题，请先在
<a target="_blank" href="https://github.com/yelloxing/clay-core/issues">Github issue</a>
上查找是否存在相同问题，如果依旧无法解决，可以根据问题的类别进行提问，除非特殊情况，你会在24小时内获得回复。
</p>
<p>
如果你对clay.js本身有非常好的建议或发现了重大bug，除了在上面地址中提问，请额外再提供一份更详细的说明，邮件发送至作者的
<a href="mailto:yelloxing@gmail.com">G-Mail 邮箱</a>
，方便及时改进或修复。
</p>
</body>
</html>