LuGo bietet eine Abstraktionsschicht über die derzeitigen, nativ unterstützten Vektorgrafik-Technologien SVG / VML. Ziel dabei ist Transparenz: Der Entwickler soll, unabhängig von der Browserplattform, Vektorgrafiken mittels JavaScript erstellen und in die Webseite einbinden können.
Lugo vs. Canvas
| Kriterium | LuGo | Canvas |
| EventHandling | einfach | schwierig |
| Basiskonzept | geom. Objekte – Shapes | Pixels |
| Scenegraph | über DOM implizit verfügbar | kein Graph, da scriptable <img> |
| Browserunterstützung | A-Grade, inkl. IE | A-Grade, jedoch IE nur über Workaround (ExplorerCanvas) |
| Text | volle Unterstützung | kein direktes Rendering von Text |
| Animation | Animieren der Shapes | Rerendering des Inhaltes |
Code Beispiel
Canvas canvas = new Canvas(500, 500);
//Create a rectangle at point {10, 10} with dimension {200, 100}
Rectangle myRect = new Rectangle(10, 10, 200, 100);
canvas.add(myRect);
//set blue fillingcolor
myRect.setFill( new SolidFill( Color.BLUE ) );
//set Transparency
myRect.setOpacity(80);
//Transformations e.g. rotation at a specific point
myRect.rotateAt(90, new Point(250, 250) );
//Enabling zoom and pan support
CanvasZoomPanWrapper zoomPan = new CanvasZoomPanWrapper(canvas, true, true);
//add event listener (zb: zoom Event)
zoomPan.addZoomEventHandler( new ZoomEventHandler(){
public void onZoom(int zoomLevel){
//change opacity
myRect.setOpacity( zoomLevel * 100 );
}
});
Testcase
Ressources
Source via SVN:
svn checkout http://lugo.googlecode.com/svn/trunk/ lugo-read-only