dojox gfx session eugene lazutkin svg open 2007
DESCRIPTION
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/)TRANSCRIPT
DojoX GFX
Eugene LazutkinDojo 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
? ? ? ? ? ? ? ? ? ? ? ?