Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.
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


?   ?   ?   ?
 ?   ?   ?   ?
  ?   ?   ?   ?
Prochain SlideShare
Chargement dans…5
×

DojoX GFX Session Eugene Lazutkin SVG Open 2007

4 829 vues

Publié le

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

Publié dans : Technologie, Business
  • Soyez le premier à commenter

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 ? ? ? ? ? ? ? ? ? ? ? ?

×