DojoX GFX
Eugene Lazutkin
Dojo Toolkit/Sun Microsystems
SVG Open 2007, Tokyo, Japan

Welcome to Dojo
Dojo consists of three sub-projects:
●
Dojo Core (a.k.a. Dojo)
–
Includes Dojo Base — always available basic
●
functionality.
Dijit
–
Set of core widgets aimed at simplification of UI
●
creation.
DojoX (a.k.a. Dojo eXtended/eXperimental)
–
Advanced functionality, experimental code.
●
DojoX GFX is part of DojoX.
●

Intro I
GFX loosely follows the SVG model.
●
The length unit is pixel.
●
Point definition:
●
{x: 0, y: 0}
–
JavaScript-specific features:
●
Duck-typing is used where possible.
–
All setters are chained.
–

Intro II
At present time following backends are
●
supported:
SVG.
–
VML.
–
Silverlight.
–
We strive to be as portable as possible,
●
but restricted (mostly by VML).
Always test your program in target
–
environments!

Intro III
GFX defines six classes of objects:
●
Shape.
–
Important shape: group.
●
Fill.
–
Stroke.
–
Font.
–
Matrix.
–
Surface.
–
Serves as a top-level group.
●

Colors I
GFX includes dojo.Color() by default.
●
dojo.Color (part of Dojo Base):
●
Defines common color names,
–
representations (hex, rgb/rgba, array).
dojo.colors module adds the CSS3 support
–
and extended set of color names.
GFX accepts a large set of color
●
definitions directly.

Colors II
Examples of color “red”:
●
Strings:
–
“red”, “#F00”, “#FF0000”, “rgb(255, 0, 0)”,
●
“rgba(255, 0, 0, 1)”.
Arrays:
–
[255, 0, 0], [255, 0, 0, 1]
●
CSS3 strings (needs dojo.colors):
–
“rgb(100%, 0%, 0%)”, “rgba(100%, 0%, 0%, 1)”,
●
“hsl(0, 100%, 50%)”, “hsla(0, 100%, 50%, 1)”
●
new dojo.Color(255, 0, 0)
–

Shapes I
Following shapes are defined:
●
Basic shapes: rectangle, ellipse,
–
polyline/polygon, path, image, text.
Convenient shapes: circle, line.
–
Experimental shapes: textpath.
–
Cheatsheet for all definition objects:
●
dojox/gfx/_base.js (right after utility
–
definitions).

Shapes II
Each shape is made up of two objects:
●
Shape definition.
–
Describes a geometry.
●
Simple JSON object.
●
Can be serialized, and streamed.
–
Full support for duck-typing.
●
No need to specify default values.
–
Shape object.
–
Represents an instantiated shape.
●
Provides an OO-based interface.
●
Keeps a shape definition object.
●

Shapes III
Every shape supports following methods:
●
getShape/setShape.
–
Access to the underlying shape definition.
●
Each shape accepts only shape-specific
●
definitions.
getFill/setFill, getStroke/setStroke.
–
Access to current fill and stroke definitions.
●
getTransform/setTransform,
–
applyRightTransform/applyLeftTransform.
Transformation manipulations.
●
applyTransform == applyRightTransform.
●

Shapes IV
Every shape supports following methods:
●
moveToFront/moveToBack.
–
Z-order manipulations.
●
getParent, remove.
–
Parent-related manipulations.
●
connect/disconnect.
–
Event processing.
●
Experimental introspection methods.
–
Shape objects are defined by renderers.
●

Events
Supported events:
●
onclick
–
onmousedown
–
onmouseup
–
onmousemove
–
onmouseenter
–
onmouseleave
–
onkeydown
–
onkeyup
–

Surface I
Defines a drawing area.
●
Serves as a top-level group object.
●
Defines shape creators:
●
createPath, createRect, createCircle,
–
createEllipse,createLine, createPolyline,
createImage, createText, createTextPath.
Shape's type is implied.
●
createShape.
–
You should specify a type.
●
createGroup.
–

Surface II
Surface is a renderer-specific object.
●
It supports the same event interface as
●
shapes.
Surface creation:
●
dojox.gfx.createSurface(domNode, width,
–
height).

Rectangle
Definition with defaults:
●
{type: \"rect\", x: 0, y: 0, width: 100, height:
–
100, r: 0}.
As always you can skip any default values.
–
What is “r”? It is a radius of rounded corners.
–
Creator method:
●
createRect(rect).
–

Stroke I
Definition with defaults:
●
{type: \"stroke\", color: \"black\", style: \"solid\",
–
width: 1, cap: \"butt\", join: 4}.
Styles:
–
“Solid”, “ShortDash”, “ShortDot”, “ShortDashDot”,
●
“ShortDashDotDot”, “Dot”, “Dash”, “LongDash”,
“DashDot”, “LongDashDot”, “LongDashDotDot”.
Caps:
–
“Butt”, “Round”, “Square”.
●

Stroke II
Definition with defaults:
●
{type: \"stroke\", color: \"black\", style: \"solid\",
–
width: 1, cap: \"butt\", join: 4}.
Joins:
–
“Round”, “Square”.
●
If number, miter-type join is used.
●
“null” means “use default”, which is “no
●
stroke” at the moment.
A string is interpreted as a solid color
●
stroke.

Fill I
There are four types of fill:
●
Solid fill (specified by a color object).
–
Shortcuts are okay.
●
Linear gradient.
–
Radial gradient.
–
Tiled pattern.
–
null — use default (“no fill”).
–

Fill II
Linear gradient definition with defaults:
●
{type: \"linear\", x1: 0, y1: 0, x2: 100, y2: 100,
–
colors: [{offset: 0, color: \"black\"}, {offset: 1,
color: \"white\"}]}
colors member defines an array of color
–
stops.
Be careful:
●
VML renderer doesn't support opacity for
–
color stops.

Fill III
Radial gradient definition with defaults:
●
{type: \"radial\", cx: 0, cy: 0, r: 100, colors:
–
[{offset: 0, color: \"black\"}, {offset: 1, color:
\"white\"}]}
Very similar to the linear gradient.
–
Be careful:
●
VML uses very peculiar (and visually
–
incompatible) algorithm to render the radial
gradient.

Fill IV
Pattern definition with defaults:
●
{type: \"pattern\", x: 0, y: 0, width: 0, height:
–
0, src: \"\"}
Similar to the image shape definition.
–
Be careful:
●
Firefox SVG does not implement this fill style
–
yet.

Line
Definition with defaults:
●
{type: \"line\", x1: 0, y1: 0, x2: 100, y2: 100}
–
Creator method:
●
createLine(line).
–
This is a redundant shape.
●
Can be easily simulated by polyline.
–
Yet frequently asked for especially by
–
novices.
Obviously it doesn't support setFill().
●

Group I
Defines all creators just like Surface.
●
Used to group other shapes.
●
Can have other groups as children.
–
Propagates events, and transformations.
–
Propagation for fill/stroke/font is planned.
–
No shape definition.
●
Creator method:
●
createGroup().
–

Group II
Group-specific API:
●
add(shape)
–
Adds a shape to the group removing it from the
●
previous parent.
remove(shape)
–
Removes a shape from the group making it stand-
●
alone.
clear()
–
Removes all shapes.
●

Circle
Definition with defaults:
●
{type: \"circle\", cx: 0, cy: 0, r: 100}
–
Creator method:
●
createCircle(circle).
–
This is a redundant shape.
●
Can be easily simulated by ellipse.
–
Yet frequently asked for especially by
–
novices.

Ellipse
Definition with defaults:
●
{type: \"ellipse\", cx: 0, cy: 0, rx: 200, ry: 100}
–
Creator method:
●
createEllipse(ellipse).
–

Polyline
Definition with defaults:
●
{type: \"polyline\", points: []}
–
points is an array of points.
–
Array of numbers is permitted.
●
In this case numbers should go in pairs in [x, y]
●
order.
Doubles for polygon.
●
If you want a closed polygon, do it explicitly.
–
Creator method:
●
createPolyline(polyline)
–

Path I
Definition with defaults:
●
{type: \"path\", path: \"\"}
–
path uses the SVG notation.
–
Path is a super-shape:
●
It can emulate all other geometric shapes.
–
Exceptions: image, text, textpath.
–
Creator method:
●
createPath(path)
–

Path II
Path-specific API:
●
getAbsoluteMode/setAbsoluteMode
–
true for absolute mode, and false for relative
●
mode.
getLastPosition
–
Returns a point in absolute coordinates.
●
moveTo, lineTo, hLineTo, vLineTo, closePath
–
curveTo, smoothCurveTo, qCurveTo,
–
qSmoothCurveTo
arcTo
–

Path III
Shortcut:
●
If you specify a string, creator assumes it is a
–
path definition.
Be careful:
●
VML doesn't support sub-pixel coordinates.
–

Image I
Definition with defaults:
●
{type: \"image\", x: 0, y: 0, width: 0, height: 0,
–
src: \"\"}
By specifying different width/height, you can
–
stretch the image.
Obviously setFill/setStroke are not
●
supported.

Image II
Be careful:
●
VML has problems displaying PNG files with
–
opacity.
Silverlight doesn't support GIF.
–

Text I
Definition with defaults:
●
{type: \"text\", x: 0, y: 0, text: \"\", align: \"start\",
–
decoration: \"none\", rotated: false, kerning:
true}
Alignment:
–
“start”, “end”, “middle” relative to the anchor
●
point.
Decoration:
–
“underline”, “none”.
●
Rotated:
–
If true, rotates each character 90 degrees CCW.
●

Text II
Text-specific methods:
●
getFont/setFont
–
Assigns a font definition to the shape.
–
Be careful:
●
Kerning is not supported by some renderers.
–
Safari 3 beta doesn't support rotation.
–

Font I
Definition with defaults:
●
{type: \"font\", style: \"normal\", variant:
–
\"normal\", weight: \"normal\", size: \"10pt\",
family: \"serif\"}
Styles:
–
“normal”, “italic”, “oblique”.
●
Variants:
–
“normal”, “small-caps”.
●
Weights:
–
“normal”, “bold”, numeric weight 100-900.
●

Font II
family is a font name.
●
Predefined names: “serif”, “sans-serif”,
–
“times”, “helvetica”, “monotone”.
This fonts are mapped to platform-specific
●
equivalents.
VML on IE7 ignores family and always uses
–
Arial.
SVG on Firefox ignores family in many cases.
–
Silverlight supports only predefined fonts.
–

TextPath
Be careful:
●
Highly experimental.
–
Inconsistent support.
–
API is unfinished.
–
Definition with defaults:
●
{type: \"textpath\", text: \"\", align: \"start\",
–
decoration: \"none\", rotated: false, kerning:
true }
Supports a subset of the text definition.
–

Matrix I
Standard 2D matrix:
●
{xx: 1, xy: 0, yx: 0, yy: 1, dx: 0, dy: 0}
–
You can use duck-typing skipping defaults.
–
Defined in dojox.gfx.matrix as Matrix2D.
–
Propagated up to dojo.gfx.Matrix2D.
–

Matrix II
Supports all common operations:
●
Predefined constants:
–
identity, flipX, flipY, flipXY.
●
Translation:
–
translate(x, y)
●
Scaling:
–
scale(sx, sy)
●
Rotation:
–
rotate(rad) — accepts radians.
●
rotateg(deg) — accepts degrees.
●

Matrix III
Supports all common operations:
●
Skewing:
–
skewX(rad)
●
skewXg(deg)
●
skewY(rad)
●
skewYg(deg)
●

Matrix IV
Supports all common operations:
●
General transformations:
–
invert(matrix)
●
reflect(a, b) — forms a reflection matrix.
●
project(a, b) — forms an orthogonal projection
●
matrix.
normalize(matrix) — produces Matrix2D, if
●
necessary.
clone(matrix) — creates a copy.
●
multiply(m1, m2, ...)
●
multiplyPoint(matrix, x, y)
●

Matrix V
Provides “at” versions for some
●
transformations.
“At” implements the “transform at the point”
–
operation:
xxxAt(arg, x, y) is equivalent to:
●
translate(x, y) * xxx(arg) * translate(-x, -y)
●
Provided methods:
–
scaleAt, rotateAt, rotategAt, skewXAt, skewXgAt,
●
skewYAt, skewYgAt.

Matrix VI
Shortcuts:
●
Array of matrices is normalized by
–
multiplying its elements sequentially left to
right.
By default all incoming matrices are
–
normalized in GFX.

Questions
? ? ? ?
? ? ? ?
? ? ? ?