DojoX GFX Keynote Eugene Lazutkin SVG Open 2007
-
Upload
eugene-lazutkin -
Category
Technology
-
view
6.150 -
download
0
description
Transcript of DojoX GFX Keynote Eugene Lazutkin SVG Open 2007
What is DojoX GFX?
● It's a cross-platform vector graphics package written in JavaScript.
● Frequently referenced as dojox.gfx or dojo.gfx.● Supported backends:
– SVG (Firefox, Opera, Webkit/Safari 3 beta).
– VML (IE6, IE7).
– Silverlight (IE6, IE7, Firefox, Safari).
● Design decisions were driven by pragmatic considerations.
● Let's review what's available.
Web gfx: VML
● Microsoft submitted VML to W3C in 1998.– Since then it was augmented several times.
● Pros:– Available on IE6 and IE7:
● 60-85% of all browsers (source: Wikipedia).● No need to install anything.
● Cons:– Antiquated, incomplete, bug-ridden, slow.
– Documentation is misleading, lack of examples.
– Persistent rumors that Microsoft will drop it in IE8.
Web gfx: SVG
● You know SVG, right?● Pros:
– Mature, feature rich, well-documented.
– There are several high-quality native implementations.
● Cons:– The market leader (IE) doesn't support it.
Web gfx: Canvas
● Part of HTML5 by WHATWG.● Implements a procedural interface.● Pros:
– Implemented by Safari, Firefox, Opera.
– Fast for drawing static images.
● Cons:– No support for picture regeneration.
– Limited support for mouse selection.
– Usually available along with SVG, which makes its use questionable in some cases.
Web gfx: Silverlight
● Microsoft's answer to SVG and Flash.● Pros:
– Finally something better than VML on IE!
– Multi-platform:● «All major browsers on both Mac OS X and on Windows».● Silverlight for Linux: Moonlight by Mono team.
– Rumored to replace VML in upcoming IE8.
● Cons:– Built on SVG blueprints, yet incompatible.
– Not integrated with HTML DOM.
– Requires a download.
Web gfx: Flash
● The king of web graphics.● Pros:
– Adobe: installed on ~98.7% browsers (Wikipedia).
– Mature, well-known technology.
– Multi-platform (including IE!).
● Cons:– Multiple problems with interfacing to external
JavaScript.● Forces to move everything to the Flash.● No integration with HTML DOM and other browser facilities.
Web gfx: Plug-ins
● All plug-ins may require a download!● Major players: Java applet, ActiveX.● Pros:
– Well-documented, mature, multi-platform.
– Employs «real» languages.
● Cons:– Java applet:
● No integration with HTML DOM...
– ActiveX:● Security issues, Windows IE-only technology...
Web gfx: HTML
● Simulation of vector graphics with absolutely positioned <div>s, or variations of this technique.
● Pros:– Multi-platform, doesn't need plug-ins.
– Keeps everything in the familiar HTML/CSS domain.
● Cons:– Restricts expressiveness.
– Consumes a lot of memory, slow.
DojoX GFX
● Loosely based on SVG concepts.● Separation of concerns:
– Shape describes a geometry.● Group is a special shape, which is used to combine other
shapes.
– Fill describes how to fill a shape.
– Stroke describes how to draw an outline.
– Font defines how to render text shapes.
– Matrix describes a transformation.
– Surface defines a drawing area.
Shape
● Available shapes:– Path (using the SVG path language).
– Rectangle (with rounded corners).
– Polyline/polygon.
– Ellipse.
– Convenient shapes:● Circle.● Line.
– Image.
– Text.
– TextPath (highly experimental).
Fill
● Solid fill.– Any color object would do:
● «red», «0xF00», «0xFF0000»● «rgb(255, 0, 0)», «rgba(255, 0, 0 ,1)»● {r: 255, g: 0, b: 0, a: 1}, [255, 0, 0, 1]
● Linear gradient– Supports multiple color steps + line.
● Radial gradient– Supports multiple color steps + center + radius.
● Tiled pattern.
Stroke
● Supports color, thickness, caps, and joins.● Styles:
– Solid, ShortDash, ShortDot, ShortDashDot, ShortDashDotDot, Dot, Dash, LongDash, DashDot, LongDashDot, LongDashDotDot.
● Caps:– Butt, Round, Square.
● Joins:– Round, Bevel, Miter (specified by a number).
Font
● Supports family, style, variant, weight, and size.● Styles:
– Normal, Italic, Oblique.
● Variants:– Normal, Small-caps.
● Weights:– Normal, Bold, 100-900.
Matrix
● Traditional 2D matrix.● Numerous helpers:
– Constants: identity, flipX, flipY, flipXY.
– Translation: translate().
– Rotation: rotate(), rotateg(), rotateAt(), rotategAt().
– Scaling: scale(), scaleAt().
– Skewing:● skewX(), skewXg(), skewXAt(), skewXgAt().● skewY(), skewYg(), skewYAt(), skewYgAt().
– Normalization, combination, inversion, and so on.
Group & Surface
● Group:– Used to combine several shapes together.
● It is possible to have embedded groups.
– Supported operations:● Matrix transformations.● Event processing.● Propagation of default fills and strokes is planned.
● Surface:– Hosts a drawing area.
– Serves as a top-level group for all shapes.
Notes
● DojoX GFX takes advantage of JavaScript:– All descriptor objects are JSON-compatible.
● Opens a possibility of network streaming.
– Almost all setters are chained.● Example: surface.createRect(r).setFill(f).setStroke(s);
– Duck-typing is used almost everywhere.● Example: shape.setTransform({dx: 10, dy: 10});
– Supports a wide variety of color representations.
– Separates geometry from visual parameters.
– Keeps all relevant information together.● Easy to define a palette or theme (used in charting).
Demo
Upcoming
● More backends.– We need to support IE better.
● Animation.– Native animation APIs (SVG, Silverlight).
– Fall back to Dojo animation facilities (VML).
● DojoX GFX 3D– Restricted subset of 3D graphics.
– Geared towards charting.
● DojoX Charting– New and improved.
DojoX GFX 3D
● Google Summer of Code 2007 project.
● Student: Kun Xi.– Graduate student of the George
Washington University.
– Majored in Computer Engineering.
– Previous project: Dojo Summer of Code 2006 — Dojo GFX.
DojoX GFX 3D pics
● Demonstration of some techniques.
DojoX Charting
● Google SoC 2007 project.● Student: Neil Joshi.
– Graduate student of Ryerson University in Toronto, ON, Canada.
– Majored in Electrical Engineering.
● Supervisor: Tom Trenka.– Veteran developer with SitePen.
– Owner of DojoX Charting module.
Charting demo
● Demonstration of technical prototypes.
Questions
? ? ? ? ? ? ? ? ? ? ? ?