圆形文本字段

Posted 2021-02-25

Returns a circle filled with textfields with your text. fully customizable. See the actionscript comments for usage

/*
Usage from other .as file:
 
	public var inputText:String = "Lorem ipsum dolor sit amet%newline%, consectetur adipiscing elit. Donec hendrerit adipiscing quam, eu suscipit arcu mattis eget. Curabitur consectetur eleifend magna id scelerisque. Etiam congue condimentum leo ac lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sed aliquet justo. Nunc dapibus massa ut justo elementum et vestibulum justo suscipit.";
	roundTextField = new RoundedTextField(inputText);
	addChild(roundTextField);
*/
 
package
{
	import caurina.transitions.Tweener;
 
	import flash.display.BlendMode;
	import flash.display.Sprite;
	import flash.text.TextField;
	import flash.text.TextFieldAutoSize;
	import flash.text.TextFormat;
	import flash.text.TextFormatAlign;
 
	/**
	 * @author mparzinski (twitter: @withinmedianl)
	 * INSTRUCTIONS
	 * - parameters (input, circleSize, margin, startY, endY, font, fontSize, lineHeight, backgroundColor, backgroundAlpha)
	 * 				- input: 		The text that should be placed in the roundedtextfield
	 * 				- circlesize:		The size of the circle (from center to side, so 75 gives a circle of 150px)
	 * 				- margin:		The margin in px from the sides of the circle to the text
	 * 				- startY:		topmargin (snaps to textfield's height)
	 * 				- endY:			bottomMargin (snaps to textfield's height)
	 * 				- font:			font used in the textfield
	 * 				- fontSize: 		size of the font in px
	 * 				- lineHeight:		height of a line of text
	 * 				- backgroundColor:	color of the circle (0xRRGGBB)
	 * 				- backgroundAlpha:	alpha of the circle (0 - 1)
	 * 				- animate		(boolean) should the clip animate in?
	 * //////////////////////////////////////////////////////////////
	 * SPECIALS
	 * - %newline% in input for a linebreak (dont work on autosize)
	 * - circlesize to "-1" for autoSize
	 * //////////////////////////////////////////////////////////////
	 */
	public class RoundedTextField extends Sprite
	{
		public var defaultCircleSize:Number;		
		public var defaultMargin:Number;
		public var defaultStartY:Number;
		public var defaultEndY:Number;
		public var defaultFont:String;
		public var defaultFontSize:Number;
		public var defaultLineHeight:Number;
		public var defaultBackgroundColor:Number;
		public var defaultBackgroundAlpha:Number;		
		public var defaultAnimate:Boolean;		
 
		private var autoSize:Boolean;
 
		public var currentTargetIndex:Number;
		public var currentTargetNextY:Number;
		public var placedChars:Number;
		public var difference:Number;
 
		public var circleSprite:Sprite;
		public var squareSprite:Sprite;
		public var textFieldSize:Sprite;
 
		public var textFormat:TextFormat;
		public var currentTarget:TextField;	
		public var textFields:Array;	
 
		// Constructor
		public function RoundedTextField(
		input:String, 
		circleSize:Number 			= 210, 
		margin:Number 				= 15, 
		startY:Number 				= 10, 
		endY:Number 				= 30,
		font:String				= "Arial",
		fontSize:Number 			= 13, 
		lineHeight:Number 			= 17, 
		backgroundColor:uint 			= 0xB3E7FB, 
		backGroundAlpha:Number 			= 1,
		animate:Boolean				= true
		):void 
		{
			if(circleSize != -1)
			{
				defaultCircleSize 	= circleSize;
				autoSize		= false;
			} 
			else
			{
				defaultCircleSize 	= 50;
				autoSize		= true;
			}
			defaultMargin			= margin;
			defaultStartY			= startY;
			defaultEndY 			= endY;
			defaultFont 			= font;
			defaultFontSize 		= fontSize;
			defaultLineHeight 		= lineHeight;
			defaultBackgroundColor 	= backgroundColor;
			defaultBackgroundAlpha 	= backGroundAlpha;
			defaultAnimate 			= animate;
 
			textFormat 			= new TextFormat();
			textFormat.font 		= defaultFont;
			textFormat.size 		= defaultFontSize;
			textFormat.align 		= TextFormatAlign.CENTER;
 
			init(input);
		}
		public function init(input:String):void 
		{			
			currentTargetNextY 		= (-defaultCircleSize) + defaultStartY + defaultLineHeight;
			currentTargetIndex 		= 0;
			placedChars 			= 0;
			textFields 			= new Array();
 
			// draw the background circle
			circleSprite = new Sprite;
			circleSprite.graphics.beginFill(defaultBackgroundColor, defaultBackgroundAlpha);
			circleSprite.graphics.drawCircle(0, 0, defaultCircleSize);
			circleSprite.graphics.endFill();
			addChild(circleSprite);
 
			addTextFields();
 
			trace("input length; " + input.length);
			enterText(input);
		}
		private function addTextFields():void
		{
			trace("adding Textfields");
			while(currentTargetNextY < defaultCircleSize - (defaultLineHeight + defaultEndY))
			{
				var tf:TextField 	= new TextField();
				tf.defaultTextFormat 	= textFormat;
				tf.wordWrap		= true;
				tf.multiline		= false;
				tf.autoSize		= TextFieldAutoSize.LEFT;
 
				tf.y 			= currentTargetNextY;
				var futureTextFieldW:Number;
				var tfy:Number;
				if(currentTargetNextY < 0)
				{
					tfy		= Math.abs(tf.y);
					futureTextFieldW= Math.sqrt((defaultCircleSize * defaultCircleSize) - (tfy * tfy));
				}
				else
				{
					tfy		= Math.abs(tf.y + defaultLineHeight);
					futureTextFieldW= Math.sqrt((defaultCircleSize * defaultCircleSize) - (tfy * tfy));
				}
 
				tf.width		= (futureTextFieldW * 2) - defaultMargin;
				tf.x 			= -tf.width / 2; // centers the textfield (x)
				tf.name 		= tf.name + Math.floor(tf.width);
 
				addChild(tf);
 
				currentTargetNextY 	+= defaultLineHeight;
				textFields.push(tf);
			}
		}
		private function enterText(input:String):void
		{
			currentTarget = textFields[currentTargetIndex] as TextField;
			for(var i:Number = 0; i < input.length; i += 1)
			{
				if(currentTarget.textWidth + (defaultMargin * 5) > currentTarget.width )
				{
					if(input.substring(i, i + 1) == " ")
					{
						if(currentTargetIndex < textFields.length - 1)
						{
							currentTargetIndex += 1;
							currentTarget = textFields[currentTargetIndex] as TextField;
						}
						else
						{
							if(autoSize == true)
							{
								trace("Restarting, not enough space");
								restart(input);
							}
							else
							{
								currentTarget.appendText("...");
							}
							difference = input.length - placedChars;
 
							if(defaultAnimate == true)
							{
								animate();
							}
							return;
						}
					}
				}
				// look for a line break, add a new textfield and delete the %newline% from the inputtext
				if(input.substring(i, i + 9) == "%newline%")
				{
					trace("found newline");
					currentTargetIndex += 1;
					currentTarget = textFields[currentTargetIndex] as TextField;
					input = input.substring(0, i) + input.substring(i + 9, input.length);		
				}
				if(i == input.length)
				{
					for(var x:Number = 0; i < textFields.length; i +=1)
					{
						if(textFields[x].text.length == 1)
						{
							removeChildAt(x + 1);
						}
					}
				}
				currentTarget.appendText(input.substring(i, i + 1)); // add 1 character to the textfield
				placedChars += 1;
				currentTarget.multiline = false;
			}
		}
 
		private function restart(input:String):void
		{
			while(numChildren)
			{
				removeChildAt(0);
			}
			defaultCircleSize += defaultMargin;
			init(input);
		}
 
		private function animate():void
		{
			trace("starting animation");
			circleSprite.scaleY = .8;
			circleSprite.scaleX = .8;
 
			for(var i:Number = 0; i < textFields.length + 1; i += 1)
			{
				var target:Object = getChildAt(i);
				target.alpha = 0;
 
				Tweener.addTween(target, {
					alpha: 1,
					delay: .5 / i,
					time: 1.5 / i,
					transition: "easeInBack" });
			}
			Tweener.addTween(circleSprite, {
				alpha: defaultBackgroundAlpha, delay: .2, time: .5, transition: "easeOutBack" });
			Tweener.addTween(circleSprite, {
				scaleX: 1, delay: .2, time: .5, transition: "easeOutBack" });
			Tweener.addTween(circleSprite, {
				scaleY: 1, delay: .19, time: .49, transition: "easeInBack" });
		}
	}
}