Here is my first post about a framework I am developing for NeoMeeting. It’s a JavaScript Framework to draw vectorial shapes inside a web page.

The idea comes from dojo.gfx. It gave me the idea to create my own framework, based on Prototype, that fits my needs.

What I need is:

• OO Framework of course!
• Pluggable renderer. I want to be able to use SVG or VML (only for IE support of course!) or even Canvas (or anything else that support 2D drawing) with the same code.
• Have a tools to interact with graphic (like a selection tool)
• and more (I am sure, but I will found out later :))

I have something running now and I will share with my ideas and code in this blog.

Basically, here is how it works:

Create a simple HTML File with a div that will support graphic rendering

   1  
   2  <div id="whiteboard">
   3  </div>

A simple CSS File to set width and height

   1  
   2  #whiteboard {
   3    width:  800px;
   4    height: 600px;
   5    float:  left;
   6  } 

Few lines of Javascript to create a renderer and a rectangle.

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

As Element functions in Prototype you can chain calls like this

   1  
   2  rect.setFill({r: 255, g: 0, b: 0}).setStroke({r: 255, g: 255, b: 0, a: 128, w: 5});

But for an cleaner HTML layout I will always do one call by line.

Here is what you will see in your page:

Next post, I will detail object graph I have done and share more code.

I think this framework will be open-source and I hope available soon.