Eugene Lazutkin's course session on DojoX GFX at SVG Open 2007.
(The keynote is here: http://www.slideshare.net/elazutkin/dojox-gfx-keynote-eugene-lazutkin-svg-open-2007/)
[2024]Digital Global Overview Report 2024 Meltwater.pdf
DojoX GFX Session Eugene Lazutkin SVG Open 2007
1. DojoX GFX
Eugene Lazutkin
Dojo Toolkit/Sun Microsystems
SVG Open 2007, Tokyo, Japan
2. 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.
●
3. 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.
–
4. 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!
5. Intro III
GFX defines six classes of objects:
●
Shape.
–
Important shape: group.
●
Fill.
–
Stroke.
–
Font.
–
Matrix.
–
Surface.
–
Serves as a top-level group.
●
6. 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.
8. 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).
9. 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.
●
10. 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.
●
11. 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.
●
13. 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.
–
14. Surface II
Surface is a renderer-specific object.
●
It supports the same event interface as
●
shapes.
Surface creation:
●
dojox.gfx.createSurface(domNode, width,
–
height).
15. Rectangle
Definition with defaults:
●
{type: quot;rectquot;, 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).
–
17. Stroke II
Definition with defaults:
●
{type: quot;strokequot;, color: quot;blackquot;, style: quot;solidquot;,
–
width: 1, cap: quot;buttquot;, 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.
18. 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”).
–
19. Fill II
Linear gradient definition with defaults:
●
{type: quot;linearquot;, x1: 0, y1: 0, x2: 100, y2: 100,
–
colors: [{offset: 0, color: quot;blackquot;}, {offset: 1,
color: quot;whitequot;}]}
colors member defines an array of color
–
stops.
Be careful:
●
VML renderer doesn't support opacity for
–
color stops.
20. Fill III
Radial gradient definition with defaults:
●
{type: quot;radialquot;, cx: 0, cy: 0, r: 100, colors:
–
[{offset: 0, color: quot;blackquot;}, {offset: 1, color:
quot;whitequot;}]}
Very similar to the linear gradient.
–
Be careful:
●
VML uses very peculiar (and visually
–
incompatible) algorithm to render the radial
gradient.
21. Fill IV
Pattern definition with defaults:
●
{type: quot;patternquot;, x: 0, y: 0, width: 0, height:
–
0, src: quot;quot;}
Similar to the image shape definition.
–
Be careful:
●
Firefox SVG does not implement this fill style
–
yet.
22. Line
Definition with defaults:
●
{type: quot;linequot;, 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().
●
23. 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().
–
24. 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.
●
25. Circle
Definition with defaults:
●
{type: quot;circlequot;, 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.
27. Polyline
Definition with defaults:
●
{type: quot;polylinequot;, 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)
–
28. Path I
Definition with defaults:
●
{type: quot;pathquot;, path: quot;quot;}
–
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)
–
29. 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
–
30. Path III
Shortcut:
●
If you specify a string, creator assumes it is a
–
path definition.
Be careful:
●
VML doesn't support sub-pixel coordinates.
–
31. Image I
Definition with defaults:
●
{type: quot;imagequot;, x: 0, y: 0, width: 0, height: 0,
–
src: quot;quot;}
By specifying different width/height, you can
–
stretch the image.
Obviously setFill/setStroke are not
●
supported.
32. Image II
Be careful:
●
VML has problems displaying PNG files with
–
opacity.
Silverlight doesn't support GIF.
–
33. Text I
Definition with defaults:
●
{type: quot;textquot;, x: 0, y: 0, text: quot;quot;, align: quot;startquot;,
–
decoration: quot;nonequot;, 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.
●
34. 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.
–
36. 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.
–
37. TextPath
Be careful:
●
Highly experimental.
–
Inconsistent support.
–
API is unfinished.
–
Definition with defaults:
●
{type: quot;textpathquot;, text: quot;quot;, align: quot;startquot;,
–
decoration: quot;nonequot;, rotated: false, kerning:
true }
Supports a subset of the text definition.
–
38. 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.
–
40. Matrix III
Supports all common operations:
●
Skewing:
–
skewX(rad)
●
skewXg(deg)
●
skewY(rad)
●
skewYg(deg)
●
41. 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)
●
42. 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.
43. 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.