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.

Thats Not Flash?

1 985 vues

Publié le

An overview of DojoX GFX and DojoX Drawing, and the underlying technology that uses SVG and VML to provide vector-based graphics cross-browser without the use of Flash.

Publié dans : Technologie
  • Soyez le premier à commenter

  • Soyez le premier à aimer ceci

Thats Not Flash?

  1. 1. That’s Not Flash? Native Browser Vector Graphics Mike Wilcox mwilcox@sitepen.com Twitter: #clubajax http://clubajax.org
  2. 2. Welcome
  3. 3. Mike
  4. 4. http://www.dojotoolkit.org
  5. 5. Vector Graphics
  6. 6. Vector vs. Raster • Raster: Rectangular grid of pixels - Pre-rendered before runtime • Vector: Mathematical representation of a shape - Rendered at runtime
  7. 7. SVG Scalar Vector Graphics XML-based format for escribing lines and shapes <?xml version="1.0"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg xmlns="http://www.w3.org/2000/svg" width="100" height="50"> <ellipse cx="50" cy="25" rx="50" ry="25" fill="blue" stroke="none" /> </svg>
  8. 8. SVG vs Flash • Open Source - Free, no IDE, no proprietary player • W3C standard to work with CSS, DOM and SMIL - Can be used inline with HTML - Fires events - Clear Text - View Source, SEO - XSL Transforms • Familiar Language
  9. 9. Browser Support
  10. 10. VML Vector Markup Language Microsoft’s competing XML-based vector standard Used in Internet Explorer and MS Office <?xml version="1.0"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg xmlns="http://www.w3.org/2000/svg" width="100" height="50"> <ellipse cx="50" cy="25" rx="50" ry="25" fill="blue" stroke="none" /> </svg>
  11. 11. DojoX GFX DojoX Drawing dojox.gfx Normalized API SVG VML Render Canvas Silverlight
  12. 12. A Brief History • In the beginning, there was ASCII art • <img /> • Microsoft and VML • Adobe, the W3C and SVG • Firefox and Opera get native SVG • Firefox, Opera and Safari get canvas
  13. 13. Approaches • Emulate canvas with ExplorerCanvas • Macromedia Flash • Java applets / Processing
  14. 14. dojox.gfx: procedural subset of SVG • Procedural in nature, similar to canvas commands • Based on a subset of SVG • Implements VML shims for Internet Explorer • Now includes Silverlight rendering!
  15. 15. GFX Example // add a text label var textShape0 = group.createTextPath({text: "introduction"}) .moveTo(125, 70) .lineTo(285,20) .setFont({family: "Verdana", size: "1em"}) .setFill("black"); // create a rectangle var rect= { x: 360, y: 180, width: 200, height: 100, r: 15 };
  16. 16. Demo: a Clock http://test.local/dojotoolkit/dojox/gfx/demos/clock.html
  17. 17. DojoX Drawing
  18. 18. Q&A
  19. 19. Thanks!

×