Apache Flex 4.16.1 API Reference | All Packages | All Classes | Index | Frames No Frames |
Path

Package | spark.primitives
Class | public class Path
Inheritance | Path FilledElement StrokedElement GraphicElement flash.events.EventDispatcher

Language Version : | ActionScript 3.0

Product Version : | Flex 4

Runtime Versions : | Flash Player 10, AIR 1.5

The Path class is a filled graphic element that draws a series of path segments. In vector graphics, a path is a series of points connected by straight or curved line segments. Together the lines form an image. In Flex, you use the Path class to define a complex vector shape constructed from a set of line segments.

Typically, the first element of a path definition is a Move segment to specify the starting pen position of the graphic. You then use the Line, CubicBezier and QuadraticBezier segments to draw the lines of the graphic. When using these classes, you only specify the x and y coordinates of the end point of the line; the x and y coordinate of the starting point is defined by the current pen position.

After drawing a line segment, the current pen position becomes the x and y coordinates of the end point of the line. You can use multiple Move segments in the path definition to reposition the pen.

The syntax used by the Path class to define the shape is the same as the SVG path syntax, which makes it easy to convert SVG paths to Flex paths.

View the examples

Public Properties
Hide Inherited Public Properties
Show Inherited Public Properties

| Property | Defined By
--- | --- | ---
|  | alpha : Number The level of transparency of the graphic element. | GraphicElement
|  | alwaysCreateDisplayObject : Boolean Specifies that this GraphicElement is to be associated with and be rendered to its own DisplayObject. | GraphicElement
|  | baseline : Object The vertical distance in pixels from the anchor target to the control's baseline position. | GraphicElement
|  | baselinePosition : Number [read-only] The y-coordinate of the baseline of the first line of text of the component. | GraphicElement
|  | blendMode : String A value from the BlendMode class that specifies which blend mode to use. | GraphicElement
|  | bottom : Object The vertical distance in pixels from the bottom edge of the component to the anchor target's bottom edge. | GraphicElement
|  | data : String A string containing a compact represention of the path segments. | Path
|  | depth : Number Determines the order in which items inside of containers are rendered. | GraphicElement
|  | designLayer : DesignLayer Specifies the optional DesignLayer instance associated with this visual element. | GraphicElement
|  | displayObject : DisplayObject [read-only] The shared DisplayObject where this IGraphicElement is drawn. | GraphicElement
|  | displayObjectSharingMode : String Indicates the association between this IGraphicElement and its display objects. | GraphicElement
|  | explicitHeight : Number Number that specifies the explicit height of the component, in pixels, in the component's coordinates. | GraphicElement
|  | explicitMaxHeight : Number The maximum recommended height of the component to be considered by the parent during layout. | GraphicElement
|  | explicitMaxWidth : Number The maximum recommended width of the component to be considered by the parent during layout. | GraphicElement
|  | explicitMinHeight : Number The minimum recommended height of the component to be considered by the parent during layout. | GraphicElement
|  | explicitMinWidth : Number The minimum recommended width of the component to be considered by the parent during layout. | GraphicElement
|  | explicitWidth : Number Number that specifies the explicit width of the component, in pixels, in the component's coordinates. | GraphicElement
|  | fill : IFill The object that defines the properties of the fill. | FilledElement
|  | filters : Array An indexed array that contains each filter object currently associated with the graphic element. | GraphicElement
|  | hasLayoutMatrix3D : Boolean [read-only] Contains true if the element has 3D Matrix. | GraphicElement
|  | height : Number The height of the graphic element. | GraphicElement
|  | horizontalCenter : Object The horizontal distance in pixels from the center of the component to the center of the anchor target's content area. | GraphicElement
|  | id : String The identity of the component. | GraphicElement
|  | includeInLayout : Boolean Specifies whether this element is included in the layout of the parent. | GraphicElement
|  | is3D : Boolean [read-only] Contains true when the element is in 3D. | GraphicElement
|  | layoutDirection : String Specifies the desired layout direction for an element: one of LayoutDirection.LTR (left to right), LayoutDirection.RTL (right to left), or null (inherit). | GraphicElement
|  | left : Object The horizontal distance in pixels from the left edge of the component to the anchor target's left edge. | GraphicElement
|  | luminosityClip : Boolean A property that controls whether the luminosity mask clips the masked content. | GraphicElement
|  | luminosityInvert : Boolean A property that controls the calculation of the RGB color value of a graphic element being masked by a luminosity mask. | GraphicElement
|  | mask : DisplayObject The calling display object is masked by the specified mask object. | GraphicElement
|  | maskType : String Defines how the mask is applied to the GraphicElement. The possible values are MaskType.CLIP, MaskType.ALPHA, and MaskType.LUMINOSITY. Clip Masking When masking in clip mode, a clipping masks is reduced to 1-bit. | GraphicElement
|  | maxHeight : Number The maximum recommended height of the component to be considered by the parent during layout. | GraphicElement
|  | maxWidth : Number The maximum recommended width of the component to be considered by the parent during layout. | GraphicElement
|  | measuredHeight : Number The default height of the component, in pixels. | GraphicElement
|  | measuredWidth : Number The default width of the component, in pixels. | GraphicElement
|  | measuredX : Number The default measured bounds top-left corner relative to the origin of the element. | GraphicElement
|  | measuredY : Number The default measured bounds top-left corner relative to the origin of the element. | GraphicElement
|  | minHeight : Number The minimum recommended height of the component to be considered by the parent during layout. | GraphicElement
|  | minWidth : Number The minimum recommended width of the component to be considered by the parent during layout. | GraphicElement
|  | MXMLDescriptor : Array [read-only] | GraphicElement
|  | MXMLProperties : Array [read-only] | GraphicElement
|  | owner : DisplayObjectContainer The owner of this IVisualElement object. | GraphicElement
|  | parent : DisplayObjectContainer [read-only] The parent container or component for this component. | GraphicElement
|  | percentHeight : Number Specifies the height of a component as a percentage of its parent's size. | GraphicElement
|  | percentWidth : Number Specifies the width of a component as a percentage of its parent's size. | GraphicElement
|  | postLayoutTransformOffsets : TransformOffsets Defines a set of adjustments that can be applied to the object's transform in a way that is invisible to its parent's layout. | GraphicElement
|  | right : Object The horizontal distance in pixels from the right edge of the component to the anchor target's right edge. | GraphicElement
|  | rotation : Number Indicates the rotation of the element, in degrees, from the transform point. | GraphicElement
|  | rotationX : Number Indicates the x-axis rotation of the element instance, in degrees, from its original orientation relative to the 3D parent container. | GraphicElement
|  | rotationY : Number Indicates the y-axis rotation of the DisplayObject instance, in degrees, from its original orientation relative to the 3D parent container. | GraphicElement
|  | rotationZ : Number Indicates the rotation of the element, in degrees, from the transform point. | GraphicElement
|  | scaleX : Number The horizontal scale (percentage) of the element as applied from the transform point. | GraphicElement
|  | scaleY : Number The vertical scale (percentage) of the element as applied from the transform point. | GraphicElement
|  | scaleZ : Number The z scale (percentage) of the element as applied from the transform point. | GraphicElement
|  | stroke : IStroke The stroke used by this element. | StrokedElement
|  | top : Object The vertical distance in pixels from the top edge of the component to the anchor target's top edge. | GraphicElement
|  | transform : Transform | GraphicElement
|  | transformX : Number The x position transform point of the element. | GraphicElement
|  | transformY : Number The y position transform point of the element. | GraphicElement
|  | transformZ : Number The z position transform point of the element. | GraphicElement
|  | verticalCenter : Object The vertical distance in pixels from the center of the component to the center of the anchor target's content area. | GraphicElement
|  | visible : Boolean Controls the visibility of this visual element. | GraphicElement
|  | width : Number The width of the graphic element. | GraphicElement
|  | winding : String Fill rule for intersecting or overlapping path segments. | Path
|  | x : Number The x position of the graphic element. | GraphicElement
|  | y : Number The y position of the graphic element. | GraphicElement
|  | z : Number The z position of the graphic element. | GraphicElement

Protected Properties
Hide Inherited Protected Properties
Show Inherited Protected Properties

| Property | Defined By
--- | --- | ---
|  | drawnDisplayObject : DisplayObject [read-only] The actual DisplayObject that is drawn into by the GraphicElement. | GraphicElement
|  | drawX : Number [read-only] The x position where the element should be drawn. | GraphicElement
|  | drawY : Number [read-only] The y position where the element should be drawn. | GraphicElement
|  | hasComplexLayoutMatrix : Boolean [read-only] Returns true if the GraphicElement has any non-translation (x,y) transform properties | GraphicElement
|  | layoutFeatures : AdvancedLayoutFeatures Contain all of the implementation details of how the GraphicElement implements transform and layering support. | GraphicElement
|  | needsDisplayObject : Boolean [read-only] True if the element requires an exclusive DisplayObject. | GraphicElement

Public Methods
Hide Inherited Public Methods
Show Inherited Public Methods

| Method | Defined By
--- | --- | ---
|  | Path() Constructor. | Path
|  | canShareWithNext(element:IGraphicElement):Boolean Returns true if this IGraphicElement is compatible and can share display objects with the next IGraphicElement in the sequence. | GraphicElement
|  | canShareWithPrevious(element:IGraphicElement):Boolean Returns true if this IGraphicElement is compatible and can share display objects with the previous IGraphicElement in the sequence. | GraphicElement
|  | createDisplayObject():DisplayObject Creates a new DisplayObject where this IGraphicElement is drawn. | GraphicElement
|  | generateMXMLArray(document:Object, data:Array, recursive:Boolean = true):Array | GraphicElement
|  | generateMXMLVector(document:Object, data:Array, recursive:Boolean = true):* | GraphicElement
|  | getBoundsXAtSize(width:Number, height:Number, postLayoutTransform:Boolean = true):Number [override] Returns the x coordinate of the element's bounds at the specified element size. | Path
|  | getBoundsYAtSize(width:Number, height:Number, postLayoutTransform:Boolean = true):Number [override] Returns the y coordinate of the element's bounds at the specified element size. | Path
|  | getLayoutBoundsHeight(postLayoutTransform:Boolean = true):Number Returns the element's layout height. | GraphicElement
|  | getLayoutBoundsWidth(postLayoutTransform:Boolean = true):Number Returns the element's layout width. | GraphicElement
|  | getLayoutBoundsX(postLayoutTransform:Boolean = true):Number Returns the x coordinate that the element uses to draw on screen. | GraphicElement
|  | getLayoutBoundsY(postLayoutTransform:Boolean = true):Number Returns the y coordinate that the element uses to draw on screen. | GraphicElement
|  | getLayoutMatrix():Matrix Returns the transform matrix that is used to calculate the component's layout relative to its siblings. | GraphicElement
|  | getLayoutMatrix3D():Matrix3D Returns the layout transform Matrix3D for this element. | GraphicElement
|  | getMaxBoundsHeight(postLayoutTransform:Boolean = true):Number Returns the element's maximum height. | GraphicElement
|  | getMaxBoundsWidth(postLayoutTransform:Boolean = true):Number Returns the element's maximum width. | GraphicElement
|  | getMinBoundsHeight(postLayoutTransform:Boolean = true):Number Returns the element's minimum height. | GraphicElement
|  | getMinBoundsWidth(postLayoutTransform:Boolean = true):Number Returns the element's minimum width. | GraphicElement
|  | getPreferredBoundsHeight(postLayoutTransform:Boolean = true):Number Returns the element's preferred height. | GraphicElement
|  | getPreferredBoundsWidth(postLayoutTransform:Boolean = true):Number Returns the element's preferred width. | GraphicElement
|  | initialized(document:Object, id:String):void Called automatically by the MXML compiler when the GraphicElement is created using an MXML tag. | GraphicElement
|  | invalidateDisplayList():void Calling this method results in a call to the elements's validateDisplayList() method before the display list is rendered. | GraphicElement
|  | invalidateLayoutDirection():void An element must call this method when its layoutDirection changes or when its parent's layoutDirection changes. | GraphicElement
|  | invalidateProperties():void Calling this method results in a call to the elements's validateProperties() method before the display list is rendered. | GraphicElement
|  | invalidateSize():void Calling this method results in a call to the elements's validateSize() method before the display list is rendered. | GraphicElement
|  | localToGlobal(point:Point):Point Converts the point object from the object's (local) coordinates to the Stage (global) coordinates. | GraphicElement
|  | parentChanged(value:IGraphicElementContainer):void Called by IGraphicElementContainer when an IGraphicElement is added to or removed from the host component. | GraphicElement
|  | setLayoutBoundsPosition(newBoundsX:Number, newBoundsY:Number, postLayoutTransform:Boolean = true):void Sets the coordinates that the element uses to draw on screen. | GraphicElement
|  | setLayoutBoundsSize(width:Number, height:Number, postLayoutTransform:Boolean = true):void Sets the layout size of the element. | GraphicElement
|  | setLayoutMatrix(value:Matrix, invalidateLayout:Boolean):void Sets the transform Matrix that is used to calculate the component's layout size and position relative to its siblings. | GraphicElement
|  | setLayoutMatrix3D(value:Matrix3D, invalidateLayout:Boolean):void Sets the transform Matrix3D that is used to calculate the component's layout size and position relative to its siblings. | GraphicElement
|  | setMXMLDescriptor(value:Array):void | GraphicElement
|  | setMXMLProperties(value:Array):void | GraphicElement
|  | setSharedDisplayObject(sharedDisplayObject:DisplayObject):Boolean Determines whether this element can draw itself to the sharedDisplayObject of the sequence. | GraphicElement
|  | transformAround(transformCenter:Vector3D, scale:Vector3D = null, rotation:Vector3D = null, translation:Vector3D = null, postLayoutScale:Vector3D = null, postLayoutRotation:Vector3D = null, postLayoutTranslation:Vector3D = null, invalidateLayout:Boolean = true):void A utility method to update the rotation, scale, and translation of the transform while keeping a particular point, specified in the component's own coordinate space, fixed in the parent's coordinate space. | GraphicElement
|  | transformPointToParent(localPosition:Vector3D, position:Vector3D, postLayoutPosition:Vector3D):void A utility method to transform a point specified in the local coordinates of this object to its location in the object's parent's coordinates. | GraphicElement
|  | validateDisplayList():void Called by the IGraphicElementContainer to redraw this element in its displayObject property. | GraphicElement
|  | validateNow():void Validates and updates the properties and layout of this object by immediately calling validateProperties(), validateSize(), and validateDisplayList(), if necessary. | GraphicElement
|  | validateProperties():void Used by layout logic to validate the properties of a component by calling the commitProperties() method. | GraphicElement
|  | validateSize():void Called by the IGraphicElementContainer to validate the size of this element. | GraphicElement

Protected Methods
Show Inherited Protected Methods
Show Inherited Protected Methods

| Method | Defined By
--- | --- | ---
|  | beginDraw(g:Graphics):void [override] Set up the drawing for this element. | FilledElement
|  | canSkipMeasurement():Boolean Determines if the call to the measure() method can be skipped. | GraphicElement
|  | commitProperties():void Processes the properties set on the element. | GraphicElement
|  | draw(g:Graphics):void [override] Draw the element. | Path
|  | endDraw(g:Graphics):void [override] Finalize drawing for this element. | Path
|  | generateMXMLAttributes(data:Array):void | GraphicElement
|  | generateMXMLInstances(document:Object, data:Array, recursive:Boolean = true):void | GraphicElement
|  | generateMXMLObject(document:Object, data:Array):Object | GraphicElement
|  | getStrokeExtents(postLayoutTransform:Boolean = true):Rectangle Returns the amount of pixels occupied by the stroke on each side of the element's bounds. | GraphicElement
|  | invalidateDisplayObjectSharing():void [override] Utility method that notifies the host that this element has changed and needs its layer to be updated. | Path
|  | invalidateParentSizeAndDisplayList():void Helper method to invalidate parent size and display list if this object affects its layout (includeInLayout is true). | GraphicElement
|  | measure():void [override] Calculates the default size of the element. | Path
|  | preferredHeightPreTransform():Number Used for the implementation of the ILayoutElement interface, returns the explicit measured height pre-transform. | GraphicElement
|  | preferredWidthPreTransform():Number Used for the implementation of the ILayoutElement interface, returns the explicit of measured width pre-transform. | GraphicElement
|  | transformHeightForLayout(width:Number, height:Number, postLayoutTransform:Boolean = true):Number Transform the element's size. | GraphicElement
|  | transformWidthForLayout(width:Number, height:Number, postLayoutTransform:Boolean = true):Number Transform the element's size. | GraphicElement
|  | updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void [override] Draws the element and/or sizes and positions its content. | StrokedElement

Property Detail

data | property

`data:String`

Language Version : | ActionScript 3.0

Product Version : | Flex 4

Runtime Versions : | Flash Player 10, AIR 1.5

A string containing a compact represention of the path segments. This is an alternate way of setting the segments property. Setting this property overrides any values stored in the segments array property.

The value is a space-delimited string describing each path segment. Each segment entry has a single character which denotes the segment type and two or more segment parameters.

If the segment command is upper-case, the parameters are absolute values. If the segment command is lower-case, the parameters are relative values.

The following table shows the syntax for the segments:

Segment Type | Command | Parameters | Example
--- | --- | --- | ---
Move | M/m | x y | `M 10 20` - Move line to 10, 20.
Line | L/l | x y | `L 50 30` - Line to 50, 30.
Horizontal line | H/h | x | `H 40` = Horizontal line to 40.
Vertical line | V/v | y | `V 100` - Vertical line to 100.
QuadraticBezier | Q/q | controlX controlY x y | `Q 110 45 90 30` - Curve to 90, 30 with the control point at 110, 45.
CubicBezier | C/c | control1X control1Y control2X control2Y x y | `C 45 50 20 30 10 20` - Curve to 10, 20 with the first control point at 45, 50 and the second control point at 20, 30.
Close path | Z/z | n/a | Closes off the path.

The default value is `null`.

Implementation
`public function get data():String`
`public function set data(value:String):void`

winding | property |

`winding:String`

Language Version : | ActionScript 3.0

Product Version : | Flex 4

Runtime Versions : | Flash Player 10, AIR 1.5

Fill rule for intersecting or overlapping path segments. Possible values are `GraphicsPathWinding.EVEN_ODD` or `GraphicsPathWinding.NON_ZERO`.

The default value is `evenOdd`.

Implementation
`public function get winding():String`
`public function set winding(value:String):void`

See also

flash.display.GraphicsPathWinding
Constructor Detail

Path | () | Constructor

`public function Path()`

Language Version : | ActionScript 3.0

Product Version : | Flex 4

Runtime Versions : | Flash Player 10, AIR 1.5

Constructor.

Method Detail

draw | () | method

`override protected function draw(g:Graphics):void`

Language Version : | ActionScript 3.0

Product Version : | Flex 4

Runtime Versions : | Flash Player 10, AIR 1.5

Draw the element. This is the second of three steps taken during the drawing process. Override this method to implement your drawing. The stroke (and fill, if applicable) have been set in the `beginDraw()` method. Your override should only contain calls to drawing methods such as `moveTo()`, `curveTo()`, and `drawRect()`.

Parameters

| `g:Graphics` — The graphic element to draw.

endDraw | () | method |

`override protected function endDraw(g:Graphics):void`

Language Version : | ActionScript 3.0

Product Version : | Flex 4

Runtime Versions : | Flash Player 10, AIR 1.5

Finalize drawing for this element. This is the final of the three steps taken during the drawing process. In this step, fills are closed.

Parameters

| `g:Graphics` — The graphics element to finish drawing.

getBoundsXAtSize | () | method |

`override public function getBoundsXAtSize(width:Number, height:Number, postLayoutTransform:Boolean = true):Number`

Language Version : | ActionScript 3.0

Product Version : | Flex 4

Runtime Versions : | Flash Player 10, AIR 1.5

Returns the x coordinate of the element's bounds at the specified element size.

This method is typically used by layouts during a call to the `measure()` method to predict what the element position will be, if the element is resized to particular dimensions.

Parameters

| `width:Number` — The element's bounds width, or NaN to use the preferred width.
| `height:Number` — The element's bounds height, or NaN to use the preferred height.
| `postLayoutTransform:Boolean` (default = `true`)`` — When `postLayoutTransform` is true, the method returns x coordinate of the element's bounding box top-left corner. The bounding box is in element's parent coordinate space and is calculated from the specified bounds size, layout position and layout transform matrix.

Returns

| `Number` — The x coordinate of the element's bounds at the specified element size.

getBoundsYAtSize | () | method |

`override public function getBoundsYAtSize(width:Number, height:Number, postLayoutTransform:Boolean = true):Number`

Language Version : | ActionScript 3.0

Product Version : | Flex 4

Runtime Versions : | Flash Player 10, AIR 1.5

Returns the y coordinate of the element's bounds at the specified element size. This method is typically used by layouts during a call to the `measure()` to predict what the element position will be, if the element is resized to particular dimensions.

Parameters

| `width:Number` — The element's bounds width, or NaN to use the preferred width.
| `height:Number` — The element's bounds height, or NaN to use the preferred height.
| `postLayoutTransform:Boolean` (default = `true`)`` — When `postLayoutTransform` is true, the method returns the y coordinate of the element's bounding box top-left corner. The bounding box is in element's parent coordinate space and is calculated from the specified bounds size, layout position and layout transform matrix.

Returns

| `Number` — The y coordinate of the element's bounds at the specified element size.

invalidateDisplayObjectSharing | () | method |

`override protected function invalidateDisplayObjectSharing():void`

Language Version : | ActionScript 3.0

Product Version : | Flex 4

Runtime Versions : | Flash Player 10, AIR 1.5

Utility method that notifies the host that this element has changed and needs its layer to be updated.

measure | () | method |

`override protected function measure():void`

Language Version : | ActionScript 3.0

Product Version : | Flex 4

Runtime Versions : | Flash Player 10, AIR 1.5

Calculates the default size of the element. This is an advanced method that you might override when creating a subclass of GraphicElement.

You do not call this method directly. Flex calls the `measure()` method when the element is added to an `IGraphicElementContainer` container such as Group using the `addElement()` method, and when the element's `invalidateSize()` method is called.

By default you set both explicit height and explicit width of an element, Flex does not call the `measure()` method, even if you explicitly call the `invalidateSize()` method. To override this behavior, override `skipMeasure()` method.

In your override of this method, you must set the `measuredWidth` and `measuredHeight` properties to define the default size. You can optionally set the `measuredX` and `measuredY` properties to define the default measured bounds top-left corner relative to the origin of the element.

The conceptual point of `measure()` is for the element to provide its own natural or intrinsic bounds as a default. Therefore, the `measuredWidth` and `measuredHeight` properties should be determined by factors such as:

- The amount of text the component needs to display.
- The size of a JPEG image that the component displays.

In some cases, there is no intrinsic way to determine default values. For example, a simple GreenCircle element might simply set measuredWidth = 100 and measuredHeight = 100 in its `measure()` method to provide a reasonable default size. In other cases, such as a TextArea, an appropriate computation (such as finding the right width and height that would just display all the text and have the aspect ratio of a Golden Rectangle) might be too time-consuming to be worthwhile.

The default implementation of `measure()` sets the values of the `measuredWidth`, `measuredHeight`, `measuredX`, and `measuredY` properties to `0`.

Examples
ArrowExample.mxml

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

      Licensed to the Apache Software Foundation (ASF) under one or more
      contributor license agreements.  See the NOTICE file distributed with
      this work for additional information regarding copyright ownership.
      The ASF licenses this file to You under the Apache License, Version 2.0
      (the "License"); you may not use this file except in compliance with
      the License.  You may obtain a copy of the License at

          http://www.apache.org/licenses/LICENSE-2.0

      Unless required by applicable law or agreed to in writing, software
      distributed under the License is distributed on an "AS IS" BASIS,
      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
      See the License for the specific language governing permissions and
      limitations under the License.

    -->
    <!-- ArrowExample.mxml -->
    <s:Application name="ArrowExample"
            xmlns:fx="http://ns.adobe.com/mxml/2009"
            xmlns:s="library://ns.adobe.com/flex/spark"
            xmlns:mx="library://ns.adobe.com/flex/mx">

        <s:Panel title="Arrow Graphic Example"
                width="75%" height="75%"
                horizontalCenter="0" verticalCenter="0">
            <s:Group left="10" right="10" top="10" bottom="10">

                <s:Graphic x="100" y="0">
                    <!-- Use Use compact syntax with absolute coordinates. -->
                    <s:Path data="M 20 0
                            C 50 0 50 35 20 35
                            L 15 35
                            L 15 45
                            L 0 32
                            L 15 19
                            L 15 29
                            L 20 29
                            C 44 29 44 6 20 6">
                        <!-- Define the border color of the arrow. -->
                        <s:stroke>
                            <s:SolidColorStroke color="0x888888"/>
                        </s:stroke>
                        <!-- Define the fill for the arrow. -->
                        <s:fill>
                            <s:LinearGradient rotation="90">
                                <s:GradientEntry color="0x000000" alpha="0.8"/>
                                <s:GradientEntry color="0xFFFFFF" alpha="0.8"/>
                            </s:LinearGradient>
                        </s:fill>
                    </s:Path>
                </s:Graphic>

                <s:Graphic x="200" y="0">
                    <!-- Use compact syntax with relative coordinates. -->
                    <s:Path data="m 20 0
                            c 30 0 30 35 0 35
                            l -5 0
                            l 0 10
                            l -15 -13
                            l 15 -13
                            l 0 10
                            l 5 0
                            c 24 0 24 -23 0 -23">
                        <!-- Define the border color of the arrow. -->
                        <s:stroke>
                            <s:SolidColorStroke color="0x888888"/>
                        </s:stroke>
                        <!-- Define the fill for the arrow. -->
                        <s:fill>
                            <s:LinearGradient rotation="90">
                                <s:GradientEntry color="0x000000" alpha="0.8"/>
                                <s:GradientEntry color="0xFFFFFF" alpha="0.8"/>
                            </s:LinearGradient>
                        </s:fill>
                    </s:Path>
                </s:Graphic>
            </s:Group>
        </s:Panel>

    </s:Application>

Wed Nov 15 2017, 09:50 AM +01:00