ActionScript 3 绘制工具提示形状

Posted 2021-05-23

//You need this imports
import flash.geom.*;
import flash.display.*;

import flash.geom.*;
import flash.display.*;



var h:Number = 50;								//Set the height of the tooltip
var w:Number = 150;								//Set the width of the tooltip
var cornerRadius:Number = 5;					//Corner radius of the tooltip, same for all 4 sides
var borderColor:int = 0xafa98c;					//Border color
var borderColorSize:int = 1;					//Border size
var bgColors:Array = [0xfaf7ec, 0xe9e1bb];		//Bg gradient colors
var useHook:Boolean = true;						//If there should be a hook
var hookWidth:Number = 8;						//Hook width
var hookHeight:Number = 24;						//Hook height
var hookSkew:Number = 0;						//If the hook should skew to left or rigth. 0 is straigth down.
var hookAlign:String = "center";				//Where to place the hook
var alphas:Array = [ 1, 1];						//Alpha of the bg with gradient.

var tt:Shape = new Shape();
var hookOffSet:Number = 10;
var buffer:Number = 10;
var fillType:String = GradientType.LINEAR;
var ratios:Array = [0x00, 0xFF];
var matr:Matrix = new Matrix();
var radians:Number = 90 * Math.PI / 180;
matr.createGradientBox(w, h, radians, 0, 0);
var spreadMethod:String = SpreadMethod.PAD;
var offSet:Number

switch( hookAlign ){
	case "left":
		offSet = - w +  ( buffer * 3 ) + hookWidth; 
		hookOffSet = w - ( buffer * 3 ) - hookWidth; 
	break;
	
	case "right":
		offSet = 0 - ( buffer * 3 ) - hookWidth;
		hookOffSet =  buffer * 3 + hookWidth;
	break;
	
	case "center":
		offSet = - ( w / 2 );
		hookOffSet =  ( w / 2 );
	break;
	
	default:
		offSet = - ( w / 2 );
		hookOffSet =  ( w / 2 );;
	break;
}

if( borderColorSize>0){
	tt.graphics.lineStyle( borderColorSize, borderColor, 1 );
}

tt.graphics.beginGradientFill(fillType, bgColors, alphas, ratios, matr, spreadMethod); 

if ( useHook ) {
	var xp:Number = 0; var yp:Number = 0
	
	tt.graphics.moveTo ( xp + cornerRadius, yp );
	tt.graphics.lineTo ( xp + w - cornerRadius, yp );
	tt.graphics.curveTo ( xp + w, yp, xp + w, yp + cornerRadius );
	tt.graphics.lineTo ( xp + w, yp + h - cornerRadius );
	tt.graphics.curveTo ( xp + w, yp + h, xp + w - cornerRadius, yp + h );
	
	//hook
	tt.graphics.lineTo ( xp + hookOffSet + hookWidth, yp + h );
	tt.graphics.lineTo ( xp + hookOffSet + hookSkew , yp + h + hookHeight );
	tt.graphics.lineTo ( xp + hookOffSet - hookWidth, yp + h );
	tt.graphics.lineTo ( xp + cornerRadius, yp + h );
	
	tt.graphics.curveTo ( xp, yp + h, xp, yp + h - cornerRadius );
	tt.graphics.lineTo ( xp, yp + cornerRadius );
	tt.graphics.curveTo ( xp, yp, xp + cornerRadius, yp );
	tt.graphics.endFill();
	
}else {
	tt.graphics.drawRoundRect( 0, 0, w, h, cornerRadius );
}

addChild(tt);