DojoX GFX Session Eugene Lazutkin SVG Open 2007

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

? ? ? ? ? ? ? ? ? ? ? ?