• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
DojoX GFX Session Eugene Lazutkin SVG Open 2007
 

DojoX GFX Session Eugene Lazutkin SVG Open 2007

on

  • 7,936 views

Eugene Lazutkin's course session on DojoX GFX at SVG Open 2007.

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/)

Statistics

Views

Total Views
7,936
Views on SlideShare
7,046
Embed Views
890

Actions

Likes
2
Downloads
123
Comments
0

8 Embeds 890

http://dojotoolkit.org 696
http://www.dojotoolkit.org 138
http://dojo.xnet.org 16
http://www.slideshare.net 16
http://www.dojotoolkit.com 14
http://dojotoolkit.com 8
http://www.zhuaxia.com 1
http://examples.dojotoolkit.org 1
More...

Accessibility

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    DojoX GFX Session Eugene Lazutkin SVG Open 2007 DojoX GFX Session Eugene Lazutkin SVG Open 2007 Presentation Transcript

    • 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 Definition with defaults: ● {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 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.
    • 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 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(). ●
    • 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: 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 Definition with defaults: ● {type: quot;ellipsequot;, cx: 0, cy: 0, rx: 200, ry: 100} – Creator method: ● createEllipse(ellipse). –
    • 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) –
    • 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) –
    • 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: 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 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. ●
    • 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: 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. – 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. –
    • 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 ? ? ? ? ? ? ? ? ? ? ? ?