User Tools

Site Tools


graphic

Graphic

The graphic element can draw many types of graphics.

A graphic element with a white stroke and gradient fill.
Graphic element screenshot

Characteristic

Definition
Type Display Object
Category Element
Scope Local
Position *
Parents Container
Children none
Gestures none
Requirements none

Attribute

Type

Description
anchorX number sets the anchorX of curve
anchorY number sets the anchorY of curve
bottom number sets the bottom value
buttomLeftRadius number sets the bottom left radius of the graphic object
bottomRightRadius number sets the bottom right radius of the graphic object
class text sets the object's css class
className text specifies the class name of the object
color number sets fill color when fill type is color
controlX number sets controlX of curve
controlY number sets controlY of curve
cornerHeight number sets the height of the ellipse that is used to round the rectangle
cornerWidth number sets the width of the ellipse that is used to round the rectangle
debugStyle object reference sets the debug style
fill text sets fill type, choose: color or gradient
fillAlpha number sets fill alpha when fill type is color
fixedScale true/false set the fixed scaling of the object
gradientAlphas text sets gradient alphas when fill type is gradient; alpha values correspond to the colors in the gradientColors array ordered list, max 12 (e.g. 1, 1, 1)
gradientColors text sets gradient colors when fill type is gradient, max 12 (e.g. 0x000000, 0x555555, 0xFFFFFF)
gradientFocalPointRatio number a number that controls the location of the focal point of the gradient
gradientHeight number the height in pixels to which the gradient will spread
gradientInterpolation text specifies which interpolation value to use :RGB or linearRGB
gradientRatios text color distribution ratios; valid values are 0-255
gradientRotation number sets the rotation (in degrees) that will be applied to the gradient
gradientSpread text specifies which gradient spread method to use
gradientType text sets gradient type when fill type is gradient
gradientWidth number sets the width in pixels to which the gradient will spread
gradientX number sets how far in pixels the gradient is shifted horizontally
gradientY number sets how far in pixels the gradient is shifted vertically
heightPercent text sets the height percent of object
horizontalCenter number sets the horizontal center of object
left number sets the left value
line text sets line type, choose: color or gradient
lineAlpha number sets the alpha of the line
lineCaps text sets the type of cap on the line ends choose: none, round, or square
lineColor number sets the color of the line
lineGradientAlphas text sets line gradient alphas when line type is gradient; alpha value correspond to the colors in gradient color ordered list, max 12 (e.g. 1, 1, 1)
lineGradientColors text sets line gradient colors when line type is gradient ordered list, max 12 (e.g. 0x000000, 0x555555, 0xFFFFFF)
lineGradientFocalPointRatio number a number that controls the location of the focal point of the line gradient
lineGradientHeight number the height in pixels to which the gradient will spread
lineGradientInterpolation text specifies which interpolation value to use: RGB or linearRGB
lineGradientRatios text color distribution ratios, valid values are 0-255
lineGradientRotation number sets the rotation in degrees that will be applied to the gradient
lineGradientSpread text specifies which gradient spread method to used
lineGradientType text sets line gradient type when line type is gradient
lineGradientWidth number sets the width in pixels the gradient will spread
lineGradientX number sets how far in pixels the gradient is shifted horizontally
lineGradientY number sets how far in pixels the gradient is shifted vertically
lineJoints text specifies the type of joint on the line ends choose: miter, round, or bevel
lineMiterLimit number sets the limit at which a miter is cut off
linePixelHinting true/false specifies whether to hint strokes to full pixels
lineScaleMode text specifies how the line stroke size changes when graphic is scaled choose: normal, none, or vertical normal - Always scale the line thickness when the object is scaled (default)
lineStroke number sets the width of the line stroke in pixels
maxScale number sets maximum scale of the object in pixels
minScale number sets minimum scale of the object in pixels
pathCommands text sets the path moveTo and lineTo values
pathCoordinates text sets path coordinates
radius number sets radius in pixels of circle
right number sets the right value
shape text sets predefined shape type
scale number sets both x and y scale values
startX number sets starting x position for curve
startY number sets starting Y position for curve
top number sets top value
topLeftRadius number sets the top left radius of the graphic object
topRightRadius number sets the top right radius of the graphic object
verticalCenter number sets the vertical center of object
widthPercent text sets the percent width of object

See Also: Display Attributes

<Container scale=".7" x="200">
    <!-- Horizontal Line -->
    <Text text="Horizontal Line" x="500" y="50" color="0xFFFFFF" fontSize="25" width="200" />
    <Graphic x="500" y="120"shape="line" width="200" lineStroke="5" lineColor="0xFF0000" lineAlpha=".5" />

    <!-- Vertical Line -->
    <Text text="Vertical Line" x="750" y="50" color="0xFFFFFF" fontSize="25" width="200" />
    <Graphic x="800" y="100"shape="line" height="200" lineStroke="10" lineColor="0x00FF00" lineAlpha=".5" />

    <!-- Vector -->
    <Text text="Vector" x="950" y="50" color="0xFFFFFF" fontSize="25" width="200" />
    <Graphic x="1000" y="100"shape="vector" width="100" height="200" lineStroke="15" lineColor="0x0000FF" lineAlpha="1" />

    <!-- Rectangle -->
    <Text text="Rectangle" x="1150" y="50" color="0xFFFFFF" fontSize="25" width="200" />
    <Graphic x="1180" y="120"shape="rectangle" width="100" height="100" fill="color" color="0x448866" lineStroke="10" lineColor="0x448899" />

    <!-- Round Rectangle -->
    <Text text="Round Rectangle" x="500" y="350" color="0xFFFFFF" fontSize="25" width="200" />
    <Graphic x="530" y="400"shape="roundRectangle" width="100" height="200" cornerWidth="20" cornerHeight="20" fill="color" color="0xDDAA99" lineStroke="10" lineColor="0xAA7777" />

    <!-- Circle -->
    <Text text="Circle" x="820" y="350" color="0xFFFFFF" fontSize="25" width="200" />
    <Graphic x="750" y="400"shape="circle" radius="100" color="0x44CCAA" lineStroke="10" lineColor="0x449933" />

    <!-- Ellipse -->
    <Text text="Ellipse" x="1000" y="350" color="0xFFFFFF" fontSize="25" width="200" />
    <Graphic x="1000" y="400"shape="ellipse" width="100" height="200" color="0x44CCAA" lineStroke="0" />

    <!-- Gradient Rectangle -->
    <Text text="Gradient" x="1200" y="350" color="0xFFFFFF" fontSize="25" width="200" />
    <Graphic x="1200" y="400" shape="rectangle" width="200" height="100" lineStroke="2" fill="gradient" gradientAlphas=".5, 1, .5" gradientColors="0x229944, 0xFF5544, 0x3366AA" gradientRatios="0, 65, 255" gradientRotation="45"/>
	
    <!-- Triangle -->
    <Text text="Triangle" x="500" y="640" color="0xFFFFFF" fontSize="25" width="200" />
    <Graphic x="500" y="680" shape="triangle" color="0x00FF00" height="100"/> 

    <!-- Curve -->
    <Text text="Curve" x="750" y="640" color="0xFFFFFF" fontSize="25" width="200" />
    <Graphic x="530" y="660" shape="curve" color="0xFF0000" startX="150" startY="100" anchorX="400" anchorY="100" controlX="275" controlY="0"/> 	

    <!-- Path -->
    <Text text="Path" x="1000" y="640" color="0xFFFFFF" fontSize="25" width="200" />
    <Graphic x="800" y="680" shape="path" color="0x000000" pathCommands="1,2,1,2" pathCoordinates="200,10, 300,110, 300,10, 200,110"/> 

</Container>
graphic.txt · Last modified: 2015/09/18 13:04 by glass