actionscript画交通灯相位圆形饼图,可动态修改比例

公司内部代码,因此只记录核心算法,方便以后查找,不喜勿看

/**
* 开始画饼图❀
*/
private function drawTrafficLightPlotChart():void {
currentPercent = 0;
// 删除之前的
for each(var chart:SkinnableContainer in this.voCharts) {
this.removeElement(chart);
}
this.voCharts.removeAll();

// 画每一项
for each(var vo:TrafficLightPlotChartVO in this.vos) {
drawTrafficLightPlotChartVO(vo, total);
}

currentPercent = 0;
}


/**
* 对每一项进行画饼图
* @param vo 包含底色、标签和量值的对象
* @param total 总共的数量
*/
private function drawTrafficLightPlotChartVO(vo:TrafficLightPlotChartVO, total:int):void {
var chart:SkinnableContainer = new SkinnableContainer();
// 获取该项数据所占比例
var percent:Number = vo.data/total * 100;
chart.toolTip = vo.label + ":" + vo.data + "s,占" + Math.round(percent) + "%";

// 开始画该项的区域
chart.graphics.lineStyle(1, vo.bgColor);
// 每0.25度画一次
for(var i:Number = 0;i < percent * 14.4;i++) {
chart.graphics.moveTo(centerX, centerY);
chart.graphics.lineTo(centerX + radius * Math.cos(currentPercent*Math.PI/180), centerY - radius * Math.sin(currentPercent*Math.PI/180));
currentPercent = currentPercent + 0.25;
}
this.addElement(chart);
this.voCharts.addItem(chart);
}


/**
* 根据比例画进度条
*/
private function drawAdjustProcess():void {
// 画每一项
for (var i:int = 0;i < this.vos.length;i++) {
drawProcess(this.vos[i], total, i);
}
currentProcess = 0;
// 画调节尺
for (var i:int = 0;i < this.vos.length;i++) {
addHand(this.vos[i], total, i);
}

this.addElement(this.adjustProcess);
}

/**
* 画进度条
*/
private function drawProcess(vo:TrafficLightPlotChartVO, total:int, index:int):void {
var process:SkinnableContainer = new SkinnableContainer();
process.graphics.lineStyle(1, vo.bgColor);

for(var i:Number = 0;i < 100*vo.data/total;i = i + 0.5) {
process.graphics.moveTo(currentProcess + i, 0);
process.graphics.lineTo(currentProcess + i, 20);
}
process.toolTip = 100*vo.data/total + "%";
currentProcess = currentProcess + 100*vo.data/total;
this.adjustProcess.addElement(process);
this.voProcess.addItem(process);
}


/**
* 添加指针
*/
private function addHand(vo:TrafficLightPlotChartVO, total:int, index:int):void {
if(index == this.vos.length - 1){
return;
}

var hand:SkinnableContainer = new SkinnableContainer();
hand.toolTip = "使用鼠标拖动或键盘左右键改变比例";
hand.buttonMode = true;
hand.depth = 2;
// 开始画该项的区域
this.currentProcess = this.currentProcess + vo.data;
hand.graphics.lineStyle(2, 0x000000);
hand.graphics.moveTo(this.currentProcess, 0);
hand.graphics.lineTo(this.currentProcess, 20);

hand.addEventListener(MouseEvent.MOUSE_DOWN, function(e:MouseEvent):void {
// 获取事件发生时的坐标
previousX = e.localX;
previousY = e.localY;
// 将当前获得焦点的指针设为事件对象
currentHand = e.target as SkinnableContainer;
// 当前设为可进行比例改变
isCurent = true;
});

// 鼠标放开时放弃监听事件
this.adjustProcess.addEventListener(MouseEvent.MOUSE_UP, function(e:MouseEvent):void{
isCurent = false;
drawTrafficLightPlotChart();
activeDrawProcess();
activeDrawHand();
activeDrawLegend();
});

this.adjustProcess.addEventListener(MouseEvent.MOUSE_MOVE, function(e:MouseEvent):void {
if(isCurent){
// 获取当前指针左右两边的vo
var obj:Object = handsProcess.get(currentHand);

// 如果向右移动→
if(previousX < e.localX){
if(!changeChartProportion(obj, e.localX - previousX, "right")){
return;
}
}
// 如果向左移动←
if(previousX > e.localX){
if(!changeChartProportion(obj, previousX - e.localX, "left")){
return;
}
}

// 移动指针
currentHand.graphics.clear();
currentHand.graphics.lineStyle(2, 0x000000);
currentHand.graphics.moveTo(e.localX, 0);
currentHand.graphics.lineTo(e.localX, 20);

previousX = e.localX;
previousY = e.localY;
}
});

this.adjustProcess.addElement(hand);
this.voHands.addItem(hand);
}

/**
* 根据调解的比例重新画进度条,不修改指针
*/
private function activeDrawProcess():void {
currentProcess = 0;
// 删除之前的
for each(var process:SkinnableContainer in this.voProcess) {
this.adjustProcess.removeElement(process);
}
this.voProcess.removeAll();
// 画每一项
for (var i:int = 0;i < vos.length;i++) {
drawProcess(vos[i], total, i);
}
}

/**
* 动态画指针
*/
private function activeDrawHand():void {
this.currentProcess = 0;

for (var i:int = 0;i < this.vos.length;i++) {
if(i == this.vos.length - 1){
return;
}
this.voHands[i].graphics.clear();
this.voHands[i].graphics.lineStyle(2, 0x000000);
this.currentProcess = this.currentProcess + this.vos[i].data * 100/total;
this.voHands[i].graphics.moveTo(this.currentProcess, 0);
this.voHands[i].graphics.lineTo(this.currentProcess, 20);
this.voHands[i].depth = 2;
}
}

/**
* 动态改变图例
*/
private function activeDrawLegend():void {
this.legend.removeAllElements();
// 画每一项
for (var i:int = 0;i < this.voCharts.length;i++) {
var text:Label = new Label();
text.y = i*15;
text.setStyle("color", this.vos[i].bgColor);
text.setStyle("fontWeight", FontWeight.BOLD);
text.text = this.voCharts[i].toolTip;
this.legend.addElement(text);
}
}

/**
* 微调比例 
*/ 
private function microChange(e:KeyboardEvent):void {
if(e.keyCode != 39 && e.keyCode != 37){
return;
}
// 37左方向键,39右方向键
// 获取当前指针左右两边的vo
var obj:Object = handsProcess.get(currentHand);

// 如果向右移动→
if(e.keyCode == 39){
if(!changeChartProportion(obj, 1, "right")){
return;
}
}
// 如果向左移动←
if(e.keyCode == 37){
if(!changeChartProportion(obj, 1, "left")){
return;
}
}

// 移动指针
currentHand.graphics.clear();
currentHand.graphics.lineStyle(2, 0x000000);
// 如果向左移动←
if(e.keyCode == 37){
currentHand.graphics.moveTo(previousX - 1, 0);
currentHand.graphics.lineTo(previousX - 1, 20);
previousX = previousX - 1;
previousY = previousX - 1;
}
if(e.keyCode == 39){
currentHand.graphics.moveTo(previousX + 1, 0);
currentHand.graphics.lineTo(previousX + 1, 20);
previousX = previousX + 1;
previousY = previousX + 1;
}

activeDrawHand();
}

/**
* 改变饼图数据
* @param obj 包含指针左右饼图数据的对象
* @param changeNumber 改变的百分比
* @param direction 方向,left左,right右
*/
private function changeChartProportion(obj:Object, changeNumber:Number, direction:String):Boolean {
if(direction == "left"){
// 如果有某一项小于0或者将要大于100,那么不拖动
if(obj.right.data * 100/total + changeNumber >= 100){
return false;
}
// 如果有某一项小于0或者将要大于100,那么不拖动
if(obj.left.data * 100/total - changeNumber <= 0){
return false;
}

// 左边减少,右边增加
obj.left.data -= changeNumber * total/100
obj.right.data += changeNumber * total/100
drawTrafficLightPlotChart();
activeDrawProcess();
activeDrawLegend();
return true;
} else if(direction == "right"){
// 如果有某一项将要小于0或者将要大于100,那么不拖动
if(obj.left.data * 100/total + changeNumber >= 100){
return false;
}
// 如果有某一项小于0或者将要大于100,那么不拖动
if(obj.right.data * 100/total - changeNumber <= 0){
return false;
}

// 左边增加,右边减少
obj.left.data += changeNumber * total/100
obj.right.data -= changeNumber * total/100
drawTrafficLightPlotChart();
activeDrawProcess();
activeDrawLegend();
return true;
}

return false;
}

/**
* 改变总秒数
*/
private function changeTotal(e:TextOperationEvent):void {
var remainder:int = int(totalInput.text) % 100;
if(remainder != 0){
totalInput.text = total + "";
return;
}

var temp:Number = int(totalInput.text) / this.total;
// 画每一项
for (var i:int = 0;i < this.vos.length;i++) {
this.vos[i].data *= temp;
}

this.total = int(totalInput.text);
drawTrafficLightPlotChart();
activeDrawProcess();
activeDrawLegend();
}

/**
* 提交修改后的交通灯相位
*/
private function submitTrafficLight(e:MouseEvent):void {
dispatchEvent(new SIPITSEvent(SIPITSEvent.DISPATCH_TRAFFICLIGHT, this.vos));
}

actionscript画交通灯相位圆形饼图,可动态修改比例_第1张图片

actionscript画交通灯相位圆形饼图,可动态修改比例_第2张图片

你可能感兴趣的:(actionscript画交通灯相位圆形饼图,可动态修改比例)