App說明
Screen Shot 2016-07-23 at 19.57.14.png
打開App酝枢，你可以添加新任務，刪除任務悍手，修改任務的優(yōu)先級帘睦，點擊隨機任務袍患，輪盤會隨機轉動，輪盤靜止時竣付，手指指向的位置就是選中的任務诡延，被選中的任務顯示在輪盤中央。（由于輪盤上會根據(jù)任務和任務的優(yōu)先級分割成不同的扇形古胆，那么優(yōu)先級高的任務會有更大機率被選中）肆良。有了這個App，時間管理更有趣逸绎，既有隨機任務的不確定性帶來的新奇惹恃，又能保證任務的分配的優(yōu)先級。
MUI
MUI,國產手機開發(fā)框架桶良，混合模式App座舍，但不用寫Native代碼沮翔。
以前項目中用過陨帆，運行效率還行。因為MUI有相關的優(yōu)化采蚀，但是畢竟基于混合模式原理疲牵，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();
});
刪除任務,改變任務優(yōu)先級都會觸發(fā)輪盤重繪
mui(".mui-table-view").on("tap",".taskDel",function(){
$(this).parent().remove();
preRender();
render();
});
mui(".mui-table-view").on("change",".taskWeight", function() {
preRender();
render();
});
根據(jù)任務數(shù)的優(yōu)先級計算得扇形大小
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ā)等∮颊遥現(xiàn)在正在用React Native做工作上的項目姨伤。接下來我打算用React Native完善這個項目。
項目地址
