交互式圖形框架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和咱們取得聯繫來得到幫助。