Wednesday, April 11th, 2007

Prototype Graphic Framework

Category: JavaScript, Library

Sebastien Gruhier has created useful libraries such as the Prototype Window component.

Now, he has created the Prototype Graphic Framework (PGF) – a framework based on prototype to display vectorial shapes inside a web browser.

The framework has various renderers that sit on top of SVG, Canvas, and VML, so you can plug and play (although canvas support is limited right now).

javascript

  1. // Create an SVG renderer
  2. var renderer = new SVGRenderer("whiteboard");
  3.  
  4. // Create a rectangle with some attributes like color and bounds
  5. var rect = new Graphic.Rectangle(renderer);
  6. rect.setFill({r: 255, g: 0, b: 0, a: 128});
  7. rect.setStroke({r: 255, g: 255, b: 0, a: 128, w: 5});
  8. rect.setBounds(10, 20, 200, 300);
  9. rect.setRoundCorner(10, 10);
  10. rect.translate(10, 20);
  11. rect.rotate(30);
  12.  
  13. renderer.add(rect);

Posted by Dion Almaer at 8:44 am
8 Comments

+++--
3.6 rating from 46 votes

8 Comments »

Comments feed TrackBack URI

Great job!

Comment by efattal — April 11, 2007

Very cool!

Comment by Rey Bango — April 11, 2007

I will definitely include this in my future projects.

Comment by Dragan — April 11, 2007

Great. I think this framework could be a milestone of web application’s developing

Comment by Daniel — April 11, 2007

It is great! Thanks for your working.

Comment by Avenger Bevis — April 12, 2007

Isn’t this done already several time?
dojo.gfx
http://www.dojotoolkit.org
cumulate draw:
http://www.cumulatelabs.com

Comment by sartre — April 13, 2007

Very cool! The SVG version works great, but the Canvas one is broken (as author says, it’s not his priority). I love the select demo. Mmm!

Comment by Leland Scott — April 14, 2007

Very cool! The SVG version works great, but the Canvas one is broken (as author says, it’s not his priority). I love the select demo. Mmm!

Comment by Leland Scott — April 14, 2007

Leave a comment

You must be logged in to post a comment.