2 Replies Latest reply on Mar 16, 2010 12:54 PM by Flex harUI

    Using graphics in flex 4

    pratiktanna

      Hello Everyone,

       

      I am stuck and confused while using Graphics object in Flex 4. My application is including a Signature Capturing component in its window.

       

      The files look as,

       

      This is the component which basically uses the Graphics object.

       

      <?xml version="1.0" encoding="utf-8"?>
      <s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/halo">
          <fx:Metadata>
             
              <![CDATA[
             
              [HostComponent("spark.components.SkinnableContainer")]
             
              ]]>
          </fx:Metadata>
         
          <fx:Script>
              <![CDATA[
                  import mx.collections.ArrayCollection;
                  private var bMouseDown:Boolean = false;
                 
                  private function onInitialize():void {
                      grid.graphics.lineStyle(2, 0x0000FF);
                      grid.addEventListener(MouseEvent.MOUSE_DOWN, OnMouseDown);
                      grid.addEventListener(MouseEvent.MOUSE_MOVE, OnMouseMove);
                      grid.addEventListener(MouseEvent.MOUSE_UP, OnMouseUp);
                  }
                  private function OnMouseDown(event:MouseEvent):void {
                      //trace("mouseDown");
                      bMouseDown = true;
                     
                      grid.graphics.moveTo(event.localX, event.localY);
                      //            var sprite:Sprite = Sprite(event.target);
                      //            sprite.removeEventListener(MouseEvent.MOUSE_MOVE, mouseMoveHandler);
                      //            sprite.stopDrag();
                  }
                  private function OnMouseMove(event:MouseEvent):void {
                     
                      if(bMouseDown)
                      {
                          grid.graphics.lineTo(event.localX, event.localY);
                          trace(event.localX + ","+event.localY);
                         
                         
                      }
                      //            var sprite:Sprite = Sprite(event.target);
                      //            sprite.removeEventListener(MouseEvent.MOUSE_MOVE, mouseMoveHandler);
                      //            sprite.stopDrag();
                  }
                 
                  private function OnMouseUp(event:MouseEvent):void {
                      //trace("mouseUp");
                      bMouseDown = false;
                      //            var sprite:Sprite = Sprite(event.target);
                      //            sprite.removeEventListener(MouseEvent.MOUSE_MOVE, mouseMoveHandler);
                      //            sprite.stopDrag();
                  }
                 
              ]]>
          </fx:Script>
             

          <s:Graphic id="grid" left="0" right="0" top="0" bottom="0" />
         
         
         
          <s:Group id="contentGroup"
                   width="400" height="400" contentBackgroundColor="#FFFFFF"
                   initialize = "onInitialize()">
             
              <s:layout>
                 
                  <s:BasicLayout/>
                 
              </s:layout>
             
          </s:Group>
         
      </s:Skin>

      Then, I am trying to include this as a component in my Window,

       

      <?xml version="1.0" encoding="utf-8"?>
      <s:Window
           xmlns:fx="http://ns.adobe.com/mxml/2009"
           xmlns:s="library://ns.adobe.com/flex/spark"
           xmlns:mx="library://ns.adobe.com/flex/halo"
           xmlns:stratus="com.salesforce.stratus.*"
           xmlns:ns1="*"
           showStatusBar="false"
           backgroundColor="#e7e7e7"
           width="1200"
           height="800"
           windowComplete="onWindowComplete()"
           title="My signature Capturing window"
           >
           <s:layout>
               <s:VerticalLayout/>
           </s:layout>
          
           <ns1:SignatureBlock2 id="idSignature"/>
          
                   <mx:Form >
                  
                   <s:Button label="Save" click="onSaveButtonClick()"/>
                  
                   </mx:Form>

      <s:Window>

       

       

      But however, it finds some problem while including the component into the window or while renedering graphics. I am not sure. Can anyone shed light on my problem?

       

      Any help will be appreciated.