Graphic.Shape Class
The Shape class is an abstract object who provides tool to draw some primitive Shapes. You should not use this class cause it is an abstract class who have the purpose to be extended to implements basic shape drawing. Note that the Shape class extends the GraphicObject class.
color and Stroke Color
Both color and strokeColor support many format:
myShape.setAttr({ color: "black" });
myShape.setAttr({ color: "#FF0000" }); // hexadecimal notation
myShape.setAttr({ color: "rgb(0, 255, 0)" }); // decimal RGB notation
It's possible to get more complex effets using CanvasGradient or CanvasPattern objects. For more details, see the canvas 2D context specs.
Constructor
Graphic.Shape
-
[params]
Parameters:
-
[params]Object optionalset of parameters for configure this objects. params is given to GraphicObject constructor.
-
[color="black"]optionalcontent color (in filled mode)
-
[strokeColor="black"]optionalstroke color (in wired mode)
-
[mode="WIRED"]"WIRED" | "FILLED" optionaldisplay mode for shape.
-
Item Index
Methods
draw
-
context
This method is aimed to be overrides by the classes who extends GraphicObject class.
Parameters:
-
contextCanvasRenderingContext2Drepresent the context of the canvas to draw on.
notifyParentChange
()
protected
This method notify the parent that a change has been done, and that it should clear his cache.
rotate
-
angle
This method allow you to rotate the Graphical object around the center point of the GraphicalObject.
Parameters:
-
angleNumberrepresent the angle of rotation, it's expressed in degree.
scale
-
x -
y
this method allow you to do a scale on the GraphicObject.
Parameters:
-
xNumberthis is the x scale factor
-
yNumberthis is the y scale factor
setAttr
-
attrs
Setter availlable for updating attibuts and correctly clear the caches. You can set all attributes supported by this instance (see the GraphicObject constructor for common available properties)
Parameters:
-
attrsObjectGraphicObject attributs. See the constructor for more details.
Example:
object.setAttr({
width: 20,
height: 20
});
object.setAttr({
pos: {
x: 0,
y: 0
}
});
skew
-
a -
b
This method allow you to do a skew transform on the GraphicObject.
Parameters:
-
aNumberthe factor of skew on the y axis
-
bNumberthe factor of skew on the x axis
translate
-
x -
y
This method allow you to translate the GraphicalObject, Internally this method modify the GraphicObject's matrix.
Parameters:
-
xNumberthis is the translation scalar of the x axis.
-
yNumberthis is the translation scalar of the y axis.
Properties
alpha
Number
value of opacity, between 0.0 (fully transparent) and 1.0 (opaque)
centerPoint
Object
default center of all matrix transformations.
values are exprimed depending on the size of the object. 0;0 is the up-left corner.
Sub-properties:
-
xObject -
yObject
color
fill color to draw this object.
Note: should be modified with setAttr
height
Number
matrix
Matrix
matrix applied to this object before draw.
mode
"WIRED" | "FILLED"
the draw mode of the current shape. Two modes are available "WIRED" and "FILLED".
Note: should be modified with setAttr
parent
Layer
parent containing this object.
strokeColor
color to apply to the stroke mode
Note: should be modified with setAttr
width
Number
x
Number
position on X axis
y
Number
position on Y axis
zIndex
Number
zIndex, used to determine the drawing order. Hight zIndex are drawn first.