VMLShape Class
VML implementation of the Shape class.
VMLShape is not intended to be used directly. Instead, use the Shape class.
If the browser lacks SVG and Canvas
capabilities, the Shape class will point to the VMLShape class.
Item Index
Methods
- _addTransform
- _appendStrokeAndFill
- _createGraphicNode
- _draw
- _fillChangeHandler
- _getContentRect
- _getDefaultFill
- _getDefaultStroke
- _getFillProps
- _getGradientFill
- _getSkewOffsetValue
- _getStrokeProps
- _initialize
- _parsePathData
- _setGraphic
- _strokeChangeHandler
- _updateHandler
- _updateTransform
- addClass
- compareTo
- contains
- createNode
- destroy
- destroy
- getBounds
- getXY
- init
- on
- removeClass
- rotate
- scale
- set
- setXY
- skew
- skewX
- skewY
- test
- toFront
- toFront
- translate
- translateX
- translateY
Properties
Methods
_addTransform
-
type -
args
Adds a transform to the shape.
_appendStrokeAndFill
()
private
Appends fill and stroke nodes to the shape.
_createGraphicNode
-
type
Creates a graphic node
Parameters:
-
typeStringnode type to create
Returns:
_draw
()
private
Draws the shape.
_fillChangeHandler
()
private
Adds a fill to the shape node.
_getContentRect
-
w -
h -
x -
y
Calculates the bounding box for the shape.
_getDefaultFill
()
private
Value function for fill attribute
Returns:
_getDefaultStroke
()
private
Value function for stroke attribute
Returns:
_getFillProps
()
private
Calculates and returns properties for setting an initial fill.
Returns:
_getGradientFill
-
fill
Calculates and returns an object containing gradient properties for a fill node.
Parameters:
-
fillObjectObject containing fill properties.
Returns:
_getSkewOffsetValue
-
val
Normalizes the skew offset values between -32767 and 32767.
Parameters:
-
valNumberThe value to normalize
Returns:
_getStrokeProps
()
private
Calculates and returns properties for setting an initial stroke.
Returns:
_initialize
()
private
Initializes the shape
_parsePathData
-
val
Parses path data string and call mapped methods.
Parameters:
-
valStringThe path data
_setGraphic
-
render
Set the Graphic instance for the shape.
Parameters:
-
renderGraphic | Node | HTMLElement | StringThis param is used to determine the graphic instance. If it is a
Graphicinstance, it will be assigned to thegraphicattribute. Otherwise, a new Graphic instance will be created and rendered into the dom element that the render represents.
_strokeChangeHandler
()
private
Adds a stroke to the shape node.
_updateHandler
()
private
Updates Shape based on attribute changes.
_updateTransform
()
private
Applies all transforms.
addClass
-
className
Add a class name to each node.
Parameters:
-
classNameStringthe class name to add to the node's class attribute
compareTo
-
refNode
Compares nodes to determine if they match. Node instances can be compared to each other and/or HTMLElements.
Parameters:
-
refNodeHTMLElement | NodeThe reference node to compare to the node.
Returns:
contains
-
needle
Determines whether the node is an ancestor of another HTML element in the DOM hierarchy.
Parameters:
-
needleVMLShape | HTMLElementThe possible node or descendent
Returns:
createNode
()
private
Creates the dom node for the shape.
Returns:
destroy
()
Destroys shape
destroy
()
protected
Implementation for shape destruction
getBounds
()
Returns the bounds for a shape.
Calculates the a new bounding box from the original corner coordinates (base on size and position) and the transform matrix. The calculated bounding box is used by the graphic instance to calculate its viewBox.
Returns:
getXY
()
Gets the current position of the node in page coordinates.
Returns:
init
()
protected
Init method, invoked during construction.
Calls initializer method.
on
-
type -
callback
Overrides default on method. Checks to see if its a dom interaction event. If so,
return an event attached to the node element. If not, return the normal functionality.
removeClass
-
className
Removes a class name from each node.
Parameters:
-
classNameStringthe class name to remove from the node's class attribute
rotate
-
deg
Rotates the shape clockwise around it transformOrigin.
Parameters:
-
degNumberThe degree of the rotation.
set
-
name -
value
Sets the value of an attribute.
setXY
-
Contains
Set the position of the shape in page coordinates, regardless of how the node is positioned.
Parameters:
-
ContainsArrayx & y values for new position (coordinates are page-based)
skew
-
x -
y
Skews the shape around the x-axis and y-axis.
test
-
selector
Test if the supplied node matches the supplied selector.
Parameters:
-
selectorStringThe CSS selector to test against.
Returns:
toFront
()
Places the shape above all other shapes.
toFront
()
Places the shape underneath all other shapes.
translate
-
x -
y
Specifies a 2d translation.
translateX
-
x
Translates the shape along the x-axis. When translating x and y coordinates,
use the translate method.
Parameters:
-
xNumberThe value to translate.
translateY
-
y
Performs a translate on the y-coordinate. When translating x and y coordinates,
use the translate method.
Parameters:
-
yNumberThe value to translate.
Properties
Attributes
data
String
Represents an SVG Path string. This will be parsed and added to shape's API to represent the SVG data across all implementations. Note that when using VML or SVG implementations, part of this content will be added to the DOM using respective VML/SVG attributes. If your content comes from an untrusted source, you will need to ensure that no malicious code is included in that content.
fill
Object
Contains information about the fill of the shape.
- color
- The color of the fill.
- opacity
- Number between 0 and 1 that indicates the opacity of the fill. The default value is 1.
- type
- Type of fill.
- solid
- Solid single color fill. (default)
- linear
- Linear gradient fill.
- radial
- Radial gradient fill.
If a linear or radial is specified as the fill type. The following additional property is used:
- stops
- An array of objects containing the following properties:
- color
- The color of the stop.
- opacity
- Number between 0 and 1 that indicates the opacity of the stop. The default value is 1. Note: No effect for IE 6 - 8
- offset
- Number between 0 and 1 indicating where the color stop is positioned.
- rotation
- Linear gradients flow left to right by default. The rotation property allows you to change the flow by rotation. (e.g. A rotation of 180 would make the gradient pain from right to left.)
- r
- Radius of the gradient circle.
- fx
- Focal point x-coordinate of the gradient.
- fy
- Focal point y-coordinate of the gradient.
Linear gradients also have the following property:
Radial gradients have the following additional properties:
The corresponding SVGShape class implements the following additional properties.
- cx
-
The x-coordinate of the center of the gradient circle. Determines where the color stop begins. The default value 0.5.
Note: Currently, this property is not implemented for corresponding
CanvasShapeandVMLShapeclasses which are used on Android or IE 6 - 8. - cy
-
The y-coordinate of the center of the gradient circle. Determines where the color stop begins. The default value 0.5.
Note: Currently, this property is not implemented for corresponding
CanvasShapeandVMLShapeclasses which are used on Android or IE 6 - 8.
These properties are not currently implemented in CanvasShape or VMLShape.
stroke
Object
Contains information about the stroke of the shape.
- color
- The color of the stroke.
- weight
- Number that indicates the width of the stroke.
- opacity
- Number between 0 and 1 that indicates the opacity of the stroke. The default value is 1.
- dashstyle Indicates whether to draw a dashed stroke. When set to "none", a solid stroke is drawn. When set to an array, the first index indicates the length of the dash. The second index indicates the length of gap.
- linecap
- Specifies the linecap for the stroke. The following values can be specified:
- butt (default)
- Specifies a butt linecap.
- square
- Specifies a sqare linecap.
- round
- Specifies a round linecap.
- linejoin
- Specifies a linejoin for the stroke. The following values can be specified:
- round (default)
- Specifies that the linejoin will be round.
- bevel
- Specifies a bevel for the linejoin.
- miter limit
- An integer specifying the miter limit of a miter linejoin. If you want to specify a linejoin of miter, you simply specify the limit as opposed to having separate miter and miter limit values.
transform
String
A string containing, in order, transform operations applied to the shape instance. The transform string can contain the following values:
- rotate
- Rotates the shape clockwise around it transformOrigin.
- translate
- Specifies a 2d translation.
- skew
- Skews the shape around the x-axis and y-axis.
- scale
- Specifies a 2d scaling operation.
- translateX
- Translates the shape along the x-axis.
- translateY
- Translates the shape along the y-axis.
- skewX
- Skews the shape around the x-axis.
- skewY
- Skews the shape around the y-axis.
- matrix
- Specifies a 2D transformation matrix comprised of the specified six values.
Applying transforms through the transform attribute will reset the transform matrix and apply a new transform. The shape class also contains
corresponding methods for each transform that will apply the transform to the current matrix. The below code illustrates how you might use the
transform attribute to instantiate a recangle with a rotation of 45 degrees.
var myRect = new Y.Rect({
type:"rect",
width: 50,
height: 40,
transform: "rotate(45)"
};
The code below would apply translate and rotate to an existing shape.
myRect.set("transform", "translate(40, 50) rotate(45)");
transformOrigin
Array
An array of x, y values which indicates the transformOrigin in which to rotate the shape. Valid values range between 0 and 1 representing a fraction of the shape's corresponding bounding box dimension. The default value is [0.5, 0.5].