Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
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...
Intro I

    GFX loosely follows the SVG model.
●



    The length unit is pixel.
●



    Point definition:
●


        ...
Intro II

    At present time following backends are
●


    supported:
        SVG.
    –

        VML.
    –

        Si...
Intro III

    GFX defines six classes of objects:
●


        Shape.
    –

             Important shape: group.
        ...
Colors I

    GFX includes dojo.Color() by default.
●



    dojo.Color (part of Dojo Base):
●


        Defines common co...
Colors II

    Examples of color “red”:
●


        Strings:
    –

             “red”, “#F00”, “#FF0000”, “rgb(255, 0, 0)...
Shapes I

    Following shapes are defined:
●


        Basic shapes: rectangle, ellipse,
    –
        polyline/polygon, ...
Shapes II

    Each shape is made up of two objects:
●


        Shape definition.
    –

             Describes a geometr...
Shapes III

    Every shape supports following methods:
●


        getShape/setShape.
    –

             Access to the u...
Shapes IV

    Every shape supports following methods:
●


        moveToFront/moveToBack.
    –

             Z-order man...
Events

    Supported events:
●


        onclick
    –

        onmousedown
    –

        onmouseup
    –

        onmou...
Surface I

    Defines a drawing area.
●



    Serves as a top-level group object.
●



    Defines shape creators:
●


 ...
Surface II

    Surface is a renderer-specific object.
●



    It supports the same event interface as
●


    shapes.
  ...
Rectangle

    Definition with defaults:
●


        {type: quot;rectquot;, x: 0, y: 0, width: 100, height:
    –
        ...
Stroke I

    Definition with defaults:
●


        {type: quot;strokequot;, color: quot;blackquot;, style: quot;solidquot...
Stroke II

    Definition with defaults:
●


        {type: quot;strokequot;, color: quot;blackquot;, style: quot;solidquo...
Fill I

    There are four types of fill:
●


        Solid fill (specified by a color object).
    –

             Shortc...
Fill II

    Linear gradient definition with defaults:
●


        {type: quot;linearquot;, x1: 0, y1: 0, x2: 100, y2: 100...
Fill III

    Radial gradient definition with defaults:
●


        {type: quot;radialquot;, cx: 0, cy: 0, r: 100, colors:...
Fill IV

    Pattern definition with defaults:
●


        {type: quot;patternquot;, x: 0, y: 0, width: 0, height:
    –
 ...
Line

    Definition with defaults:
●


        {type: quot;linequot;, x1: 0, y1: 0, x2: 100, y2: 100}
    –

    Creator ...
Group I

    Defines all creators just like Surface.
●



    Used to group other shapes.
●


        Can have other group...
Group II

    Group-specific API:
●


        add(shape)
    –

             Adds a shape to the group removing it from th...
Circle

    Definition with defaults:
●


        {type: quot;circlequot;, cx: 0, cy: 0, r: 100}
    –

    Creator method...
Ellipse

    Definition with defaults:
●


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

    Cr...
Polyline

    Definition with defaults:
●


        {type: quot;polylinequot;, points: []}
    –

        points is an arr...
Path I

    Definition with defaults:
●


        {type: quot;pathquot;, path: quot;quot;}
    –

        path uses the SV...
Path II

    Path-specific API:
●


        getAbsoluteMode/setAbsoluteMode
    –

             true for absolute mode, an...
Path III

    Shortcut:
●


        If you specify a string, creator assumes it is a
    –
        path definition.
    Be...
Image I

    Definition with defaults:
●


        {type: quot;imagequot;, x: 0, y: 0, width: 0, height: 0,
    –
        ...
Image II

    Be careful:
●


        VML has problems displaying PNG files with
    –
        opacity.
        Silverligh...
Text I

    Definition with defaults:
●


        {type: quot;textquot;, x: 0, y: 0, text: quot;quot;, align: quot;startqu...
Text II

    Text-specific methods:
●


        getFont/setFont
    –
               Assigns a font definition to the shap...
Font I

    Definition with defaults:
●


        {type: quot;fontquot;, style: quot;normalquot;, variant:
    –
        q...
Font II

    family is a font name.
●


        Predefined names: “serif”, “sans-serif”,
    –
        “times”, “helvetica...
TextPath

    Be careful:
●


        Highly experimental.
    –

        Inconsistent support.
    –

        API is unfi...
Matrix I

    Standard 2D matrix:
●


        {xx: 1, xy: 0, yx: 0, yy: 1, dx: 0, dy: 0}
    –

        You can use duck-t...
Matrix II

    Supports all common operations:
●


        Predefined constants:
    –

             identity, flipX, flip...
Matrix III

    Supports all common operations:
●


        Skewing:
    –

             skewX(rad)
         ●


         ...
Matrix IV

    Supports all common operations:
●


        General transformations:
    –

             invert(matrix)
   ...
Matrix V

    Provides “at” versions for some
●


    transformations.
        “At” implements the “transform at the point...
Matrix VI

    Shortcuts:
●


        Array of matrices is normalized by
    –
        multiplying its elements sequential...
Questions


?   ?   ?   ?
 ?   ?   ?   ?
  ?   ?   ?   ?
Upcoming SlideShare
Loading in …5
×

DojoX GFX Session Eugene Lazutkin SVG Open 2007

4,797 views

Published on

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

Published in: Technology, Business
  • Be the first to comment

DojoX GFX Session Eugene Lazutkin SVG Open 2007

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

×