forked from: forked from: 【のびる線を引くには？】スケジュール円グラフ

▼▼▼　ぜひ回答ください！！！▼▼▼


▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲
こんにちは！
右の円グラフ、途中までできたんですが、
テキストをドラッグした時に、線を伸びちぢみさせたいのです。

で、クラス「DrgblText」（テキストのクラス）内で線を描いたのですが、
どこ　から　どこ　へ線を引けばいいかわかりません。
(たぶん私はインスタンスの中の座標と、親の座標の区別ができてないんです）

現在適用中のは、親のコンストラクタ内でENTER_FRAMEを使って
繰り返し線をひいています。ですが、とちゅうでとまってしまうことがあるみたいです。
（負荷が無駄に大きいみたいです。各インスタンスに addEventListener しちゃってるから？？）

線はどのクラス内で、どんなふうに引けばいいのでしょうか！？教えてください！

by nolabs 15 Mar 2010

Embed

// forked from SoWhat1983's forked from: 【のびる線を引くには？】スケジュール円グラフ
// forked from SoWhat1983's 【のびる線を引くには？】スケジュール円グラフ
/*
▼▼▼　ぜひ回答ください！！！▼▼▼


▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲
こんにちは！
右の円グラフ、途中までできたんですが、
テキストをドラッグした時に、線を伸びちぢみさせたいのです。

で、クラス「DrgblText」（テキストのクラス）内で線を描いたのですが、
どこ　から　どこ　へ線を引けばいいかわかりません。
(たぶん私はインスタンスの中の座標と、親の座標の区別ができてないんです）

現在適用中のは、親のコンストラクタ内でENTER_FRAMEを使って
繰り返し線をひいています。ですが、とちゅうでとまってしまうことがあるみたいです。
（負荷が無駄に大きいみたいです。各インスタンスに addEventListener しちゃってるから？？）

線はどのクラス内で、どんなふうに引けばいいのでしょうか！？教えてください！

*/

package {
    import flash.display.*;
    import flash.events.*;
    import flash.geom.*;
	import flash.utils.*;
	import caurina.transitions.Tweener;
	import caurina.transitions.properties.*;
	
	[SWF(width=465, height=465, frameRate=20)]
    public class Main extends Sprite {
    		
		private const CX:Number = stage.stageWidth/2;
		private const CY:Number = stage.stageHeight/2;
		private const DAY:Number = 24;
		public var graph:Sprite = new Sprite();
    	
		public function Main (){
			
			// スケジュールデータ
			var schlData:Array = [
				{time: '6:00',  title: '起きる', timeNum: 6},
				{time: '7:00',  title: '食べる', timeNum: 7},
				{time: '8:30',  title: '出かける', timeNum: 8.5},
				{time: '9:30',  title: '始業', timeNum: 9.5},
				{time: '12:00',  title: 'ランチ', timeNum: 12},
				{time: '15:00',  title: 'おやつ', timeNum: 15},
				{time: '20:00',  title: '帰宅', timeNum: 20},
				{time: '20:30',  title: '料理', timeNum: 20.5},
				{time: '22:15',  title: '夕食', timeNum: 22.25},
				{time: '1:00',  title: '就寝', timeNum: 25}
			];
			
			// スケジュールデータのイニシャライズ
			for (i=1;i<schlData.length;i++){
				if(schlData[i]['timeNum']<schlData[i-1]['timeNum']) {schlData[i]['timeNum'] += 24;}
			}
			
			// Trace
			inittrace(stage);
			
			// frame
			var frame:Sprite = new Sprite();
			var frameW:Number = 420;
			var frameH:Number = 229;
			with(frame.graphics){
				lineStyle(1,0xcccccc);
				lineTo(frameW,0);lineTo(frameW,frameH);
				lineTo(0,frameH);lineTo(0,0);
			}
			frame.x = stage.stageWidth/2-frameW/2;
			frame.y = stage.stageHeight/2-frameH/2;
			addChild(frame);
			
			
			// グラフをつくる
			// var schdr:Array = new Array(8,12.5,13,16,22,2);
			var graphColor:Array = new Array(0xffff99, 0xccffcc, 0x99ccff, 0xffcc99, 0xff99cc, 0xccffcc, 0xffff99, 0xffff99, 0xccffcc, 0x99ccff, 0xffcc99, 0xff99cc, 0xccffcc, 0xffff99, 0xffff99);
			var presentAngle:Number;
			var hour:Number;
			var i:Number;
			var graphOverrayRadius:Number = 76;
			
			// 一個いっこ作ります
			for (i=0;i<schlData.length;i++){
				var sss:Number = schlData[i]['timeNum'];
				
				// set startAngle
				presentAngle = hour2deg(schlData[i]['timeNum']);
				
				// set hour(arc)
				if(schlData[i+1]==null) {
					hour = (schlData[0]['timeNum']+24)-schlData[i]['timeNum'];
					graphColor[i] = 0xc0c0c0;
				}
				else hour = schlData[i+1]['timeNum']-schlData[i]['timeNum'];
				hour = hour2deg(hour);
				
				// x, y, radius, startAngl, arc
				var arc:drawArc = new drawArc(0,0,graphOverrayRadius,-presentAngle,-hour,graphColor[i]);
				graph.addChild(arc);
				
				// テキストも、入れる
				var txt:DrgblText = new DrgblText(schlData[i]['time'],schlData[i]['title']);
				txt.addEventListener(Event.ENTER_FRAME,onMouseDown,false,0,true);
/*
				txt.addEventListener(MouseEvent.MOUSE_DOWN,onMouseDown,false,0,true);
				txt.addEventListener(MouseEvent.MOUSE_UP,onMouseUp,false,0,true);
*/
				
				var presRad:Number = deg2rad(presentAngle-90);
				txt.TX = CX + Math.cos(presRad)*graphOverrayRadius;
				txt.TY = CY + Math.sin(presRad)*graphOverrayRadius;
				txt.x = (CX + Math.cos(presRad)*120)-txt.width/2;
				txt.y = (CY + Math.sin(presRad)*120)-txt.height/2;
				
				var timer:Timer = new Timer(20);
				timer.addEventListener(TimerEvent.TIMER,function(e:Timer){
					txt.drawBorder();
					trace(i++);
				});
				addChild(txt);
			}
			
			function hour2deg(n:Number):Number{
				return 360*(n/DAY);
			}
			
			// graph overray
			var graphOverray:Sprite = new Sprite();
			var mtr:Matrix = new Matrix();
			mtr.createGradientBox(graphOverrayRadius*2, graphOverrayRadius*2, 0, -graphOverrayRadius, -graphOverrayRadius); 
			with(graphOverray.graphics){
				// beginFill(0xff0000);
				beginGradientFill(GradientType.RADIAL, [0xffffff,0xffffff], [0,0.6], [233,253], mtr);
				drawCircle(0,0,graphOverrayRadius);
				endFill();
			}
			graphOverray.x = graphOverray.y = 0;
			graph.addChild(graphOverray); 
			
			// graph positioning
			graph.x = graph.y = CX;
			graph.rotation = -90;
			addChild(graph);
			
			trace(graph.x);
			trace(graph.y);
			
			function getAngle(x1:Number, y1:Number, x2:Number, y2:Number):Number {
				var radians:Number = Math.atan2(y2-y1,x2-x1);
				return rad2deg(radians);
			}
			function rad2deg(rad:Number):Number {
				return rad * (180 / Math.PI);
			}            
			function deg2rad(deg:Number):Number { 
				return deg * (Math.PI/180);
			}
			
			// イベントハンドラ
	        function onMouseDown(e:Event):void {
				e.target.addEventListener(Event.ENTER_FRAME,onLoop,false,0,true);
	        }
	        function onMouseUp(e:Event):void {
				e.target.removeEventListener(Event.ENTER_FRAME,onLoop);
	        }
	        function onLoop(e:Event):void {
				trace(i++);
				e.target.drawBorder();
	        }
		}
    }
}


import flash.display.*;
class drawArc extends Sprite
{
	public function drawArc(x:Number, y:Number, radius:Number, startAngle:Number, arc:Number, color:uint):void {
		
		// if (arguments.length<5) {return;}
		var yRadius:Number = radius;
		
		var segAngle:Number, theta:Number, angle:Number, angleMid:Number, segs:Number, ax:Number, ay:Number, bx:Number, by:Number, cx:Number, cy:Number, return_arr:Array;
		// if (Math.abs(arc)>360) {arc = 360;}
		segs = Math.ceil(Math.abs(arc)/45);
		segAngle = arc/segs;
		
		theta = -(segAngle/180)*Math.PI;
		angle = -(startAngle/180)*Math.PI;
		
		// angle += theta;
		
		ax = 0;//x-Math.cos(angle)*radius;
		ay = 0;//y-Math.sin(angle)*yRadius;
		angleMid = angle-(theta/2);
		bx = ax+Math.cos(angle)*radius;
		by = ay+Math.sin(angle)*yRadius;
		
		with(graphics){
			beginFill(color);
		//	lineStyle(1);
			moveTo(0,0); 
			lineTo(bx, by);
		}
		
		
		if (segs>0) {
			for (var i:int = 0; i<segs; i++) { 
				angle += theta;
				angleMid = angle-(theta/2);
				bx = ax+Math.cos(angle)*radius;
				by = ay+Math.sin(angle)*yRadius;
				cx = ax+Math.cos(angleMid)*(radius/Math.cos(theta/2));
				cy = ay+Math.sin(angleMid)*(yRadius/Math.cos(theta/2));
				graphics.curveTo(cx, cy, bx, by);
			}
		}
		graphics.lineTo(0,0); 
	};
}


import flash.display.*;
import flash.text.*;
import flash.events.*;
import flash.geom.*;
import caurina.transitions.Tweener;
import caurina.transitions.properties.*;
/*
import org.libspark.betweenas3.BetweenAS3;
import org.libspark.betweenas3.tweens.ITween;
import org.libspark.betweenas3.events.TweenEvent;
import org.libspark.betweenas3.easing.*;*/

class DrgblText extends Sprite {
	
	private var t:TextField =new TextField();
	private var de:Sprite = new Sprite();
	private var frame:Sprite = new Sprite();
	private var bdr:Sprite = new Sprite();
	
	// コンストラクタ
	public function DrgblText(timeStr:String,titleStr:String) {
	
		//drawBorder
		addChild(bdr);
	    
	    // 楕円
/*
	    drawE();
	    addChild(de);
*/
	    
		// text
	    setText(timeStr,titleStr);
	    addChild(t);
	    
		// frame
		drawFrame();
 		addChild(frame);
				
		// events
	    addEventListener(MouseEvent.MOUSE_OVER,onMouseOver);
	    addEventListener(MouseEvent.MOUSE_OUT,onMouseOut);
	    addEventListener(MouseEvent.MOUSE_DOWN,onMouseDown);
	    addEventListener(MouseEvent.MOUSE_UP,onMouseUp);
	}
	
	// テキスト書き換え
	public function setText(timeStr:String, titleStr:String):void {
		var htmlStr:String = '<span class="time">'+timeStr+'</span> <span class="title">'+titleStr+'</span>';
		var style:StyleSheet = new StyleSheet();
		var fontSize:String = '14px';
		style.setStyle('.time',{color:'#fa538b',fontFamily:'GothicBBBPro-Medium,_sans',fontSize:fontSize});
		style.setStyle('.title',{color:'#232323',fontFamily:'ShinGoPro-Regular,_sans', fontSize:fontSize});
		
		t.autoSize = TextFieldAutoSize.LEFT;
		t.background = true;
		t.backgroundColor = 0xffffff;
		t.selectable = false;
 		t.antiAliasType = flash.text.AntiAliasType.ADVANCED;
 		t.sharpness = 400;
		t.styleSheet = style;// スタイルシートが先！
		t.htmlText = htmlStr;// html文字列はあとで入れる！ 
	}
	
	// フレームをかく。
	private function drawFrame():void {
		with(frame.graphics){
			lineStyle(1.8,0xfa538b);
			beginFill(0xffffff,0);
			drawRoundRect(-18,-1,t.width+23,t.height ,10,10);
		}
		frame.alpha = 0;
		
		// tiny rect
		var i:Number;
		var ii:Number;
		for(i=0;i<4;i++){
			for(ii=0;ii<5;ii++){
				drawTinyRect(i*3, ii*3);
			}
		}
	}
	private function drawTinyRect(tx:Number,ty:Number):void{
		var tr:Sprite = new Sprite();
		with(tr.graphics){
			beginFill(0xfa538b,0.7);
			drawRect(-14,5.5,2,2);
		}
		tr.x = tx; tr.y = ty;
		frame.addChild(tr);
	}
	
	// 楕円
/*
	private function drawE():void {
		with(de.graphics){
			beginFill(0xff0000);
			drawEllipse(0,0,frame.width,frame.height*2);
		}
		de.x = -18;
		de.y -= frame.height/2;
		trace('yeah')
	}
*/
	
	// 線を引き直す。
	public var TX:Number = 0;
	public var TY:Number = 0;
	public function drawBorder():void {
		with(bdr.graphics){
			clear();
			lineStyle(2,0xcccccc);
			moveTo(width/2, height/2);
			lineTo(TX-this.x, TY-this.y);
		}
	}
	
	// イベントハンドラ
	private function onMouseOver(e:MouseEvent):void {
		Tweener.removeTweens(frame);
		Tweener.addTween(frame, { time: 0.2, alpha: 0.6, transition:"linear" } );
	}
	private function onMouseOut(e:MouseEvent):void {
		Tweener.removeTweens(frame);
		Tweener.addTween(frame, { time: 0.2, alpha: 0, transition:"linear" } );
	}
	private function onMouseDown(e:MouseEvent):void {startDrag();}
	private function onMouseUp(e:MouseEvent):void {
		this.stopDrag();
	}
}
















/////  WONDERFL TRACE /////

import flash.display.Sprite;
import flash.display.Stage;
import flash.text.TextField;
import flash.text.TextFormat;
function inittrace(s:Stage):void
{
    WTrace.initTrace(s);
}

//global trace function
var trace:Function;

//wtreace class
class WTrace
{
        private static var FONT:String = "Fixedsys";
        private static var SIZE:Number = 12;
        private static var TextFields:Array = [];
        private static var trace_stage:Stage;
        
        public static function initTrace(stg:Stage):void
        {
            trace_stage = stg;
            trace = wtrace;
        }
        
        private static function scrollup():void
        {
            // maximum number of lines: 100
            if (TextFields.length > 100) 
            {
                var removeme:TextField = TextFields.shift();
                trace_stage.removeChild(removeme);
                removeme = null;
            }
            for(var x:Number=0;x<TextFields.length;x++)
            {
                (TextFields[x] as TextField).y -= SIZE*1.2;
            }
        }
    
        public static function wtrace(... args):void
        {
        
            var s:String="";
            var tracefield:TextField;
            
            for (var i:int;i < args.length;i++)
            {
                // imitating flash:
                // putting a space between the parameters
                if (i != 0) s+=" ";
                s+=args[i].toString();
            }
            

            tracefield= new TextField();
            tracefield.autoSize = "left";
            tracefield.text = s;
            tracefield.y = trace_stage.stageHeight - 20;

            var tf:TextFormat = new TextFormat(FONT, SIZE);
            tracefield.setTextFormat(tf);
            trace_stage.addChild(tracefield);
            scrollup();                      
            TextFields.push(tracefield);
            
        }
}