Flex【原创】模拟Android图案解锁

拼搏现实的明天。 2021-12-07 15:22 296阅读 0赞

Flex 实现Android图案解锁功能

看见Andorid系统里面有图案解锁的功能，试想能用Flex的移动开发实现吗？答案是：完全可以！

环境：Flex 4.6(air3.2)

先看我的包结构：

![2012042409392520.jpg][]

第一视图Sample\_Locked2View：

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][]

<?xml version="1.0" encoding="utf-8"?>
 
 <s:View xmlns:fx="http://ns.adobe.com/mxml/2009" 
 xmlns:s="library://ns.adobe.com/flex/spark" title="主页视图"
 xmlns:view="com.yyf.view.*" actionBarVisible="false">
 <s:layout>
 <s:VerticalLayout horizontalAlign="center" verticalAlign="middle"/>
 </s:layout>
 <fx:Script>
 <![CDATA[
 import com.yyf.model.MainDataModel;
 import com.yyf.util.Tools;
 [Bindable]private var mainModel:MainDataModel = MainDataModel.getInstance();
 ]]>
 </fx:Script>
 <view:LockedView id="lock" horizontalCenter="0" verticalCenter="0" creationComplete="mainModel.hotArea = (new Tools()).getHotArea(lock);"/>
 <s:Label id="notice" text="Your Password : {mainModel.password}" visible="{mainModel.successCreated}"/>
 
 
 </s:View>

核心逻辑类Circle，用于处理绘图相关计算：

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][]

package com.yyf.element
 {
 import com.yyf.event.PasswordCreateEevent;
 import com.yyf.model.MainDataModel;
 import com.yyf.util.Config;
 import com.yyf.view.LockedView;
 
 import flash.display.BitmapData;
 import flash.display.Sprite;
 import flash.events.FocusEvent;
 import flash.events.MouseEvent;
 import flash.geom.Point;
 
 import mx.core.FlexGlobals;
 import mx.core.UIComponent;
 import mx.events.FlexEvent;
 
 import spark.components.Application;
 
 /**
 * Circle UI
 * @author yao yf
 * 2012-04-19
 * */
 public class Circle extends UIComponent
 {
 
 /**radius of the circle**/
 public var radius:Number;
 /**color of the circle**/
 public var color:uint;
 /**index ofd the circle**/
 public var index:int = 0;
 
 /**
 * @private
 **/
 //selected color
 private var selectedColor:uint;
 //current Circle target
 private var target:Circle;
 //line
 private var line:Line = Line.getInstance();
 //temp line
 private var linetmp:LineTemp = LineTemp.getInstance();
 //current start point for draw temp line
 private var currentStaPoint:Point = new Point();
 //has excute the FUNCTION drawLine()
 private var hasLine:Boolean = false;
 //has excute the FUNCTION circleChange()
 private var hasCircleChanged:Boolean = false;
 //model data
 private var mainModel:MainDataModel = MainDataModel.getInstance();
 //main application
 private static const MAIN_APP:Application = FlexGlobals.topLevelApplication as Application;
 
 /**
 * Constructor
 * @param radius:Number
 * @param color:uint
 * **/
 public function Circle(radius:Number,color:uint)
 {
 super();
 this.radius = radius;
 this.color = color;
 this.draw();
 addListener();
 mainModel.notice = Config.DEFUALT;
 }
 
 //draw
 private function draw():void{
 this.graphics.clear();
 this.graphics.beginFill(color);
 this.graphics.drawCircle(this.radius,this.radius,this.radius);
 }
 
 //add Event Listener
 private function addListener():void{
 this.addEventListener(MouseEvent.MOUSE_DOWN,onMouseDown);
 }
 
 //onMouseDown Handler
 private function onMouseDown(event:MouseEvent):void
 { 
 mainModel.notice = Config.DURING;
 target = event.target as Circle;
 circleChange(target);
 currentStaPoint = new Point(target.x + radius,target.y + radius);
 mainModel.dispatched = false;
 MAIN_APP.addEventListener(MouseEvent.MOUSE_MOVE,onMouseMove);
 MAIN_APP.addEventListener(MouseEvent.MOUSE_UP,onMouseUp);
 }
 
 //onMouseMove Handler
 private function onMouseMove(event:MouseEvent):void
 {
 target = event.target as Circle;
 if(target){
 circleChange(target);
 currentStaPoint = new Point(target.x + radius,target.y + radius);
 }else{
 if(event.target is Application)return;
 // var stagePoint:Point = new Point(event.stageX,event.stageY);
 // trace(stagePoint.x+" =,= "+stagePoint.y);
 drawTmpLine(target);
 }
 }
 
 //onMouseUp Handler
 private function onMouseUp(event:MouseEvent):void
 {
 MAIN_APP.removeEventListener(MouseEvent.MOUSE_MOVE,onMouseMove);
 MAIN_APP.removeEventListener(MouseEvent.MOUSE_UP,onMouseUp);
 mainModel.enable = false;
 linetmp.clear();
 if(!mainModel.dispatched){
 mainModel.dispatchEvent(new PasswordCreateEevent(PasswordCreateEevent.EVT_PASSWORD_CREATED,mainModel.password));
 }
 mainModel.dispatched = true;
 }
 
 //circleChange
 //add a orange small circle on this center
 protected function circleChange(target:Circle):void{
 if(!target)return;
 if(!target.hasCircleChanged){
 target.graphics.beginFill(0xFF5D18);
 target.graphics.drawCircle(this.radius,this.radius,this.radius/2);
 if(!target.hasLine){
 drawLine(target);
 }
 target.hasCircleChanged = true;
 }
 }
 
 /**
 * draw line path with mouse move
 * @param target:Circle
 * **/
 protected function drawLine(target:Circle):void{
 linetmp.clear();
 line.graphics.lineStyle(Line.THINKNESS,Line.COLOR);
 var c_point:Point;
 if(target == this){
 // c_point = localToGlobal(new Point(this.x,this.y));
 line.graphics.moveTo(this.x + radius,this.y + radius);
 }else{
 // c_point = localToGlobal(new Point(target.x,target.y));
 line.graphics.lineTo(target.x + radius,target.y + radius);
 }
 target.hasLine = true;
 mainModel.password += target.index + "";
 }
 
 /**
 * draw temp line path with mouse move
 * @param target:Circle
 * @param stagePoint:Point
 * **/
 protected function drawTmpLine(target:Circle):void{
 // var currentMovPoint:Point = localToGlobal(new Point(owner.mouseX,owner.mouseY));
 // trace(currentMovPoint.x + " =,= " + currentMovPoint.y);
 // if(currentMovPoint.x > mainModel.hotArea.min_x && currentMovPoint.x < mainModel.hotArea.max_x 
 // && currentMovPoint.y > mainModel.hotArea.min_y && currentMovPoint.y < mainModel.hotArea.max_y)
 // {
 // trace(owner.mouseX + " , " + owner.mouseY);
 // trace(owner.width + " , " + owner.height);
 if(owner.mouseX > 6 && owner.mouseX < (owner.width - 6)
 && owner.mouseY > 6 && owner.mouseY < (owner.height - 6))
 {
 linetmp.clear();
 linetmp.graphics.lineStyle(Line.THINKNESS,Line.COLOR);
 linetmp.graphics.moveTo(currentStaPoint.x , currentStaPoint.y);
 linetmp.graphics.lineTo(owner.mouseX,owner.mouseY);
 }
 }
 
 //get color String from ower pixel
 private function getColorString():String{
 var tmpDta:BitmapData = new BitmapData(owner.width, owner.height);
 tmpDta.draw(owner);
 selectedColor = tmpDta.getPixel(owner.mouseX,owner.mouseY);
 var colorDisplay:String = selectedColor.toString(16).toLocaleUpperCase();
 if(colorDisplay.length < 6){
 switch(colorDisplay.length){
 case 1 : colorDisplay = "00000" + colorDisplay;break;
 case 2 : colorDisplay = "0000" + colorDisplay;break;
 case 3 : colorDisplay = "000" + colorDisplay;break;
 case 4 : colorDisplay = "00" + colorDisplay;break;
 case 5 : colorDisplay = "0" + colorDisplay;break;
 default : break;
 }
 }
 return colorDisplay;
 }
 
 }
 }

线对象Line（SingleTon）：

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][]

package com.yyf.element
 {
 import mx.core.UIComponent;
 
 /**
 * Line UI
 * SingleTon
 * @author yao yf
 * 2012-04-19
 * */
 public class Line extends UIComponent
 {
 private static var model:Line;
 
 public static const THINKNESS:Number = 25;
 public static const COLOR:uint = 0xFF5D18;
 
 public function clear():void{
 this.graphics.clear();
 }
 
 public function Line(singletonclass:SingleTonClass)
 {
 if(model != null){
 throw new Error("SingleTon!");
 }
 }
 
 public static function getInstance():Line{
 if(model == null){
 model = new Line(new SingleTonClass());
 }
 return model;
 }
 }
 }
 
 class SingleTonClass{}

临时线对象LineTemp（SingleTon）此对象为绘制过程中的临时线路径，绘制完成后将被清除：

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][]

package com.yyf.element
 {
 import mx.core.UIComponent;
 
 /**
 * Temp Line UI
 * SingleTon
 * @author yao yf
 * 2012-04-19
 * */
 public class LineTemp extends UIComponent
 {
 private static var model:LineTemp;
 
 public static const THINKNESS:Number = 25;
 public static const COLOR:uint = 0xFF5D18;
 
 public function clear():void{
 this.graphics.clear();
 }
 
 public function LineTemp(singletonclass:SingleTonClass)
 {
 if(model != null){
 throw new Error("SingleTon!");
 }
 }
 
 public static function getInstance():LineTemp{
 if(model == null){
 model = new LineTemp(new SingleTonClass());
 }
 return model;
 }
 }
 }
 
 class SingleTonClass{}

核心视图类LockedView，用于呈图案解锁图面板：

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][]

<?xml version="1.0" encoding="utf-8"?>
 
 <s:BorderContainer xmlns:fx="http://ns.adobe.com/mxml/2009" 
 xmlns:s="library://ns.adobe.com/flex/spark" 
 xmlns:mx="library://ns.adobe.com/flex/mx"
 width="275" height="350"
 creationComplete="creationCompleteHandler(event)">
 <fx:Script>
 <![CDATA[
 import com.yyf.element.Circle;
 import com.yyf.element.Line;
 import com.yyf.element.LineTemp;
 import com.yyf.event.PasswordCreateEevent;
 import com.yyf.model.MainDataModel;
 import com.yyf.util.Config;
 
 import mx.collections.ArrayCollection;
 // import mx.controls.Alert;
 import mx.events.FlexEvent;
 
 /**
 * @prvate
 * **/
 private const RADIUS:Number = 30;
 private const COLOR:uint = 0xFED913;
 //store the Circles
 private static var circleData:ArrayCollection;
 //line path
 private var line:com.yyf.element.Line = com.yyf.element.Line.getInstance();
 //temp line path
 private var linetmp:LineTemp = LineTemp.getInstance();
 //model data
 [Bindable]private var mainModel:MainDataModel = MainDataModel.getInstance();
 
 /**init**/
 private function creationCompleteHandler(event:FlexEvent):void
 {
 mainModel.addEventListener(PasswordCreateEevent.EVT_PASSWORD_CREATED,onCreated);
 displayCircle();
 }
 
 /**display nine Circles**/
 private function displayCircle():void{
 circleData = new ArrayCollection();
 line.includeInLayout = false;
 linetmp.includeInLayout = false;
 this.circles.addElement(line);
 this.circles.addElement(linetmp);
 for(var i:int = 0 ; i < 9 ; i++){
 var c:Circle = new Circle(RADIUS,COLOR);
 c.index = (i+1);
 this.circles.addElement(c);
 circleData.addItem(c);
 }
 }
 
 /**remove all of the circles group's elements**/
 private function removeCircle():void{
 circleData.removeAll();
 circleData.refresh();
 circleData = null;
 var i:int = this.circles.numElements;
 while(i >= 1){
 this.circles.removeElementAt(0);
 i--;
 }
 }
 
 /**RESET button handler**/
 private function reset_clickHandler(event:MouseEvent):void
 {
 mainModel.successCreated = false;
 mainModel.enable = true;
 mainModel.password = "";
 line.clear();
 linetmp.clear();
 removeCircle();
 displayCircle();
 }
 
 /**GO buton handler**/
 private function go_clickHandler(event:MouseEvent):void
 {
 // Alert.show("Your Password : " + mainModel.password);
 trace("Your Password : " + mainModel.password);
 }
 
 //PasswordCreateEevent.EVT_PASSWORD_CREATED call back handler
 private function onCreated(event:PasswordCreateEevent):void
 {
 var pw:String = event.password;
 if(pw.length < 4){
 mainModel.notice = Config.ERROR;
 mainModel.successCreated = false;
 trace("Your Password's lenth can not less than 4 !");
 }else{
 mainModel.notice = Config.SUCCESS;
 mainModel.successCreated = true;
 }
 }
 
 ]]>
 </fx:Script>
 <fx:Declarations>
 </fx:Declarations>
 <s:VGroup width="100%" height="100%" horizontalAlign="center" verticalAlign="middle" paddingBottom="5" paddingTop="5" paddingLeft="5" paddingRight="5">
 <s:Label id="noticelbl" text="{mainModel.notice}"/>
 <s:Line xFrom="0" xTo="260">
 <s:stroke>
 <s:SolidColorStroke color="{COLOR}" weight="2" caps="square"/>
 </s:stroke>
 </s:Line>
 <s:Group id="circles" width="100%" height="100%" enabled="{mainModel.enable}">
 <s:layout>
 <s:TileLayout horizontalGap="90" verticalGap="90" requestedColumnCount="3" requestedRowCount="3"
 paddingLeft="10" paddingTop="10"/>
 </s:layout>
 </s:Group>
 <s:Line xFrom="0" xTo="260">
 <s:stroke>
 <s:SolidColorStroke color="{COLOR}" weight="2" caps="square"/>
 </s:stroke>
 </s:Line>
 <s:HGroup height="35">
 <s:Button id="reset" label="Reset" width="70" height="35" click="reset_clickHandler(event)"/>
 <s:Button id="go" label="Go" width="70" height="35" click="go_clickHandler(event)" enabled="{mainModel.successCreated}"/>
 </s:HGroup>
 </s:VGroup>
 </s:BorderContainer>

下面是效果图：

![2012042409555666.jpg][]

![2012042409560852.jpg][]

![2012042409561864.jpg][]

废话少说，本人一贯作风——崇尚开源，附源码下载地址:

[http://files.cnblogs.com/loveFlex/Sample\_Locked2.rar][http_files.cnblogs.com_loveFlex_Sample_Locked2.rar]

欢迎大家留言~

转载于:https://www.cnblogs.com/loveFlex/archive/2012/04/24/2467564.html

[2012042409392520.jpg]: /images/20211207/8f400b393e2e4853a7ad81be9ceb47a4.png
[ContractedBlock.gif]: https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif
[ExpandedBlockStart.gif]: /images/20211207/2c64aeec36f148558c542f0e52c4b85c.png
[2012042409555666.jpg]: /images/20211207/a715707a263d432db06a581452cc7f37.png
[2012042409560852.jpg]: /images/20211207/c8fc161f35074082ba2f0fb7a1e621db.png
[2012042409561864.jpg]: /images/20211207/7f75fdcacd2445f09c0075a6ca1d965f.png
[http_files.cnblogs.com_loveFlex_Sample_Locked2.rar]: http://files.cnblogs.com/loveFlex/Sample_Locked2.rar