DojoX GFX Session Eugene Lazutkin SVG Open 2007

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: 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).
–

Stroke I

●

{type: quot;strokequot;, color: quot;blackquot;, style: quot;solidquot;,
–
width: 1, cap: quot;buttquot;, join: 4}.
Styles:
–

“Solid”, “ShortDash”, “ShortDot”, “ShortDashDot”,
●

“ShortDashDotDot”, “Dot”, “Dash”, “LongDash”,
“DashDot”, “LongDashDot”, “LongDashDotDot”.
Caps:
–

“Butt”, “Round”, “Square”.
●

Stroke II

●

{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.

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: 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.

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.

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.

Line

●

{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().
●

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

●

{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.

Ellipse

●

{type: quot;ellipsequot;, cx: 0, cy: 0, rx: 200, ry: 100}
–

Creator method:
●

createEllipse(ellipse).
–

Polyline

●

{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)
–

Path I

●

{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)
–

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

●

{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.

Image II

Be careful:
●

VML has problems displaying PNG files with
–
opacity.
Silverlight doesn't support GIF.
–

Text I

●

{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.
●

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

●

{type: quot;fontquot;, style: quot;normalquot;, variant:
–
quot;normalquot;, weight: quot;normalquot;, size: quot;10ptquot;,
family: quot;serifquot;}
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.
–

●

{type: quot;textpathquot;, text: quot;quot;, align: quot;startquot;,
–
decoration: quot;nonequot;, 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

●

Skewing:
–

skewX(rad)
●

skewXg(deg)
●

skewY(rad)
●

skewYg(deg)
●

Matrix IV

●

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

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

DojoX GFX Session Eugene Lazutkin SVG Open 2007

Recommended

Recommended

More Related Content

What's hot

What's hot (7)

Viewers also liked

Viewers also liked (6)

Similar to DojoX GFX Session Eugene Lazutkin SVG Open 2007

Similar to DojoX GFX Session Eugene Lazutkin SVG Open 2007 (20)

More from Eugene Lazutkin

More from Eugene Lazutkin (19)

Recently uploaded

Recently uploaded (20)

DojoX GFX Session Eugene Lazutkin SVG Open 2007