交互式图形框架clunch.js之环境搭建和基本使用

这是一个专门为前端快速绘制可交互的复杂图形而设计的框架！

环境搭建

咱们这里演示基于webpack的搭建方式，更多方式请查阅接口文档进行学习。

首先，你须要安装clunch.js:

npm install --save clunch

安装好了之后，直接在webpack.config.js配置文件中添加loader配置：

module.exports = {
    ......
    module: {
        rules:[
            {
                test: /\.clunch$/,
                exclude: /node_modules/,
                loader: ['clunch/loader.js']
            },
            ......
        ]
};

通过上面的配置之后，环境就搭建好了。

一个简单的例子

假如如今有一个这样的需求：一个进度条，范围是0~100，咱们每隔1.5s随机生成一个数（值的范围是0~100），进度实时显示。

第一步：编辑clunch文件

你须要新建一个.clunch文件，好比demo.clunch，而后在里面添加下列代码：

<!-- 显示当前的值 -->
<text c-bind:x='value * 5' align='center' y='0' c-bind:content='"当前随机生成的值：" + value' baseline='top'/>

<!-- 进度条值,由于总长度是500，值的范围是0~100，实际宽就应该乘以5 -->
<rect c-bind:width='value * 5' height='20' x='0' y='20' type='fill' fill-color='red'/>

<!-- 进度条轮廓 -->
<rect width='500' height='20' x='0' y='20' type='stroke'/>

第二步：准备画布

可能叫挂载点更合适，咱们须要在页面上准备好挂载的地方，好比有一个div，给他设置了大小（这个div的大小直接决定了最终绘图画布的大小）：

<div id='canvas-id' style='width:500px;height:40px;'></div>

第三步：建立clunch对象

好比在和上述.clunch文件同级目录的.js文件里面：

import Clunch from 'clunch';
import demo from './demo.clunch';

new Clunch({
    el:document.getElementById('canvas-id'),
    render:demo,
    data(){
        return {
            value:0
        };
    },
    mounted(){

        // 每隔1500毫秒改变一下数据
        setInterval(()=>{
            this.value = (Math.random() * 100).toFixed(0);
        },1500);
    }
});

运行效果一

到这里，简单的例子就写完了，下面是运行效果(由于是动态的，所以只是截图了几个瞬间)：

第四步：三元表达式

在上面的例子咱们发现，若是随机数太小或过大的时候，文字有部分显示不出来，由于咱们设置的文字水平对齐方式是固定居中的。

幸运的是，c-bind指令能够解析一个合法的js表达式，所以，只须要对.clunch进行简单的修改便可（这次修改只涉及text标签，别的不列出了）：

<text c-bind:align='value>83?"right":(value<16?"left":"center")'/>

运行效果二

而后咱们看看如今的效果：

怎么样，是否是好多了，你能够用一下试试。

小结

通过上面的学习，咱们主要让你感觉一下clunch是如何设计绘图方式的，也就是数据驱动绘图的方式，使用者专一业务代码的开发便可！

固然，咱们还支持事件交互、过渡动画，拖拽等，最终你会发现，你能够像用div绘制普通页面同样绘制图表或开发一个拖拽项目。

你能够查阅文档进行学习，或者进入issue和咱们取得联系来得到帮助。