App說明

Screen Shot 2016-07-23 at 19.57.14.png

打開App，你可以添加新任務，刪除任務，修改任務的優先級，點擊隨機任務，輪盤會隨機轉動，輪盤靜止時，手指指向的位置就是選中的任務，被選中的任務顯示在輪盤中央。（由于輪盤上會根據任務和任務的優先級分割成不同的扇形，那么優先級高的任務會有更大機率被選中）。有了這個App，時間管理更有趣，既有隨機任務的不確定性帶來的新奇，又能保證任務的分配的優先級。

MUI

MUI,國產手機開發框架，混合模式App，但不用寫Native代碼。
以前項目中用過，運行效率還行。因為MUI有相關的優化，但是畢竟基于混合模式原理，App包含稍復雜的動畫的話，會卡頓。

項目代碼詳解

顯示輪盤

<canvas id="canvas" width="250" height="250"></canvas>

添加任務

一個隱藏的taskItem，用于添加任務時clone這部分fragmentDocument,添加到添加任務之前，并重新render輪盤

<div style="display: none;" id="taskItem">
    <li class="mui-table-view-cell task">
        <div class="taskName"></div>
        <div class="mui-numbox marginLeft20" data-numbox-step='1' data-numbox-min='1' data-         numbox-max='10'>
            <button class="mui-btn mui-numbox-btn-minus" type="button">-</button>
            <input class="mui-numbox-input taskWeight" type="number" value="1" />
            <button class="mui-btn mui-numbox-btn-plus" type="button">+</button>
        </div>
        <button type="button" class="mui-btn mui-btn-danger taskDel">刪除</button>
    </li>
</div>

$(".taskAdd").on("click", function() {
    var self = $(this);
    var taskNameInput = self.siblings().find("input");
    var taskName = taskNameInput.val();
    if (taskName == "") {
        alert("請輸入正確的任務名稱！");
        return;
    } else if (taskName.length >5) {
        alert("您輸入的任務名稱過長！");
        return;
    }
    $taskItem.find(".taskName").text(taskName);
    $taskItem.clone().insertBefore($taskAddItem);
    taskNameInput.val("");
    preRender()
    render();
}); 

刪除任務,改變任務優先級都會觸發輪盤重繪

mui(".mui-table-view").on("tap",".taskDel",function(){
    $(this).parent().remove();
    preRender();
    render();
});
mui(".mui-table-view").on("change",".taskWeight", function() {
    preRender();
    render();
});         

根據任務數的優先級計算得扇形大小

function getRes(angle) {
    var allWeight = 0,
        anglePercent = 1 - angle / 360,
        curWeight = 0;
    nextWeight = 0;
    for (var i = 0; i < items.length; i++) {
        allWeight += items[i].weight;
    }
    for (var i = 0; i < items.length; i++) {
        nextWeight += items[i].weight;
        if (curWeight / allWeight <= anglePercent && nextWeight / allWeight > anglePercent) {
            return items[i].name;
        }
        curWeight = nextWeight;
    }
}

function getItems() {
    items = [];
    $taskList.find(".task").each(function() {
        var self = $(this);
        var taskName = self.children(".taskName").text();
        var taskWeight = parseInt(self.find(".taskWeight").val());
        items.push({
            name: taskName,
            weight: taskWeight
        });
    });
}               

繪制輪盤

一些HTML5 canvas知識

輪盤轉動后停止

設定定時器，每隔60秒，清空canvas,rotate旋轉step度，step為隨機的，且是不斷減小的。直到step<=0.1,停止轉動。

$(".randomTask").on("click", function() {
    if (t) {
        return false;
    }
    var step = beginAngle + Math.random() * 10;
    var angle = 0;
    t = setInterval(function() {
        step *= radio;
        if (step <= 0.1) {
            clearInterval(t);
            t = null;
            var res = getRes(angle);
            context.save();
            context.beginPath();
            context.font = "23px 微軟雅黑";
            context.fillStyle = "#f00";
            context.textAlign = "center";
            context.textBaseline = "middle";
            context.fillText(res, 0, 0);
            context.restore();
        } else {
            context.clearRect(-125, -125, 250, 250);
            angle += step;
            if (angle > 360) {
                angle -= 360;
            }
            context.save();
            context.beginPath();
            context.rotate(angle * Math.PI / 180);
            render();
            context.restore();
            
        }
    }, 60);
});

最后

當然項目還有諸多不完善的，mui的numbox"+","-"事件不能被觸發等?，F在正在用React Native做工作上的項目。接下來我打算用React Native完善這個項目。
項目地址