DojoX GFX Session Eugene Lazutkin SVG Open 2007

Slideshow Transcript

1. Slide 1: DojoX GFX Eugene Lazutkin Dojo Toolkit/Sun Microsystems SVG Open 2007, Tokyo, Japan
2. Slide 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. Slide 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. Slide 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. Slide 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. Slide 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.
7. Slide 7: 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) –
8. Slide 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. Slide 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. Slide 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. Slide 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. ●
12. Slide 12: Events Supported events: ● onclick – onmousedown – onmouseup – onmousemove – onmouseenter – onmouseleave – onkeydown – onkeyup –
13. Slide 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. Slide 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. Slide 15: 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). –
16. Slide 16: 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”. ●
17. Slide 17: 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.
18. Slide 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. Slide 19: 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.
20. Slide 20: 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.
21. Slide 21: 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.
22. Slide 22: 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(). ●
23. Slide 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. Slide 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. Slide 25: 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.
26. Slide 26: Ellipse Definition with defaults: ● {type: \"ellipse\", cx: 0, cy: 0, rx: 200, ry: 100} – Creator method: ● createEllipse(ellipse). –
27. Slide 27: 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) –
28. Slide 28: 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) –
29. Slide 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. Slide 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. Slide 31: 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.
32. Slide 32: Image II Be careful: ● VML has problems displaying PNG files with – opacity. Silverlight doesn't support GIF. –
33. Slide 33: 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. ●
34. Slide 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. –
35. Slide 35: 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. ●
36. Slide 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. Slide 37: 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. –
38. Slide 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. –
39. Slide 39: 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. ●
40. Slide 40: Matrix III Supports all common operations: ● Skewing: – skewX(rad) ● skewXg(deg) ● skewY(rad) ● skewYg(deg) ●
41. Slide 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. Slide 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. Slide 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.
44. Slide 44: Questions ? ? ? ? ? ? ? ? ? ? ? ?