3 Replies Latest reply on Jun 20, 2010 11:45 PM by Ianvn.za

    SVG path data assigned to Sprite

    Ianvn.za

      I'm trying to draw svg path data that gets passes to my flex file using XML.

       

      I have a path in the following format:

      "m 264 273 l 264 326 c 273 320 279 311 279 300 c 279 289 273 279 264 273 z"

       

      I have tried decoding the path and drawing it on the sprite by using the normal moveto, curveto and lineto functions of the sprite.graphics object.

      I am having problems drawing perfect curves.

       

      I came across spark.primitives.Path which accepts svg paths as stated above, but I'm struggling to find a way to assign that path to the sprite I'm trying to draw.

       

      Is there a way to assign this to a sprite?

        • 1. Re: SVG path data assigned to Sprite
          David_F57 Level 5

          hi,

           

          try this little application... it may help you

           

          David.

           

           

          <?xml version="1.0" encoding="utf-8"?>

          <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"

             xmlns:s="library://ns.adobe.com/flex/spark"

             xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600" creationComplete="application1_creationCompleteHandler(event)">

          <fx:Declarations>

          <s:SolidColorStroke id="defaultStroke" color="{NormColor}" weight="2" alpha="0.9"/>       

          <s:SolidColor id="defaultFill" color="{NormColor}" alpha="0.8"/>

          </fx:Declarations>

          <fx:Script>

          <![CDATA[

          import mx.core.IVisualElement;

          import mx.events.FlexEvent;

           

          import spark.components.Group;

          import spark.core.SpriteVisualElement;

          import spark.primitives.Path;

           

          [Bindable]private var NormColor: int = 0x00FF00;

          [Bindable]private var OverColor: int = 0x55FF55;

           

          private var mySprite:SpriteVisualElement = new SpriteVisualElement();

          private var myGroup:Group = new Group();

          private var myPath:Path = new Path();

           

          protected function application1_creationCompleteHandler(event:FlexEvent):void

          {

          myGroup.verticalCenter=0;

          myGroup.horizontalCenter=0;

          myGroup.width=40;

          myGroup.height=40;

          myPath.fill=defaultFill;

          myPath.stroke=defaultStroke;

          myGroup.addElement(myPath);

          this.addElement(mySprite as IVisualElement);

          mySprite.width = 40;

          mySprite.width = 40;

          mySprite.x=100;

          mySprite.y=100;

          mySprite.addChild(myGroup as DisplayObject);

          }

           

          protected function button1_clickHandler(event:MouseEvent):void

          {

          myPath.data="M6.115,27.036L0,18l6.115-8.98v5.972c5.896,0,8.856-2.986,8.856-9.109H9.051L18, 0l8.966,5.883"+

          "h-5.972c0,6.123,2.986,9.109,9.059,9.109V9.02L36,18l-5.947,9.036v-6.072c-6.072,0-9.059,3.0 36-9.059,9.159h5.972L18,36"+

          "l-9.152-5.877h6.124c0-6.123-3.062-9.159-8.856-9.159V27.036z";

          }

           

          ]]>

          </fx:Script>

          <s:Button x="10" y="10" label="Add Path" click="button1_clickHandler(event)"/>

           

          </s:Application>

          • 2. Re: SVG path data assigned to Sprite
            Flex harUI Adobe Employee

            Flash.display.graphics.drawPath

            • 3. Re: SVG path data assigned to Sprite
              Ianvn.za Level 1

              Thanks David.

              That is exactly what I was looking for.