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"+","-"事件不能被触发等。现在正在用React Native做工作上的项目。接下来我打算用React Native完善这个项目。
项目地址