살아 숨 쉬는 웹 - 블루비 :: Prototype Graphic Framework(PGF)

http://prototype-graphic.xilinus.com/

시간이 되면 찬찬히 둘러봐야겠지만 prototype 기반의 그래픽을 지원하는 framework 인거 같다. SVG, VML, Canvas 를 모두 지원하는것으로 보이는 요놈 참.. 분석할 만하다. ㅋㅋ
틈틈히 봐야겠군...

Prototype Graphic Framework (PGF) is a framework based on prototype to display vectorial shapes inside a web browser.
This library is licensed under a MIT-style license, so feel free to use it :).

Introduction

This open-source framework is developed for my new project NeoMeeting. I have already done a lot of work but sometimes quick-and-dirty. I will add them soon and frequently in this framework to have a great open-source project.

The main features are:

OO Framework of course!
Pluggable renderer. I am working mainly on SVG, VML (only for IE support of course!). I try to create a canvas renderer, even if it's not my main goal to support canvas, just to validate it's doable. I like canvas but there are some
Tools to interact with graphic (like a move tool)
And more (I am sure, but I will found out later :))

As it's still under heavy development, I will post a ticket on my blog on every main commit.

Download

As it's not yet ready for a zip distrib, download are available by using subvesrion trunk.
Just do:

svn co http://svn.itseb.com/public/prototype-graphic/trunk prototype-graphic

It includes source files, unit test files based on unittest.js, documentation and sample files.
For any technical questions, patches, requests or bugs use this google group.

Documentation

Documentation is generated by natural docs and is included in svn trunk (doc directory).
You can also have an direct access here

Supported shape (Revision #31)

Shape	SVG	VML	Canvas
Rectangle	YES	YES	YES
Ellipse	YES	YES	YES
Circle	YES	YES	YES
Polygon	YES	YES	YES

Sample code

Here is the big picture how it works


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

You can try a sample, same code using SVG (Firefox, WebKit, Opera), VML (IE) or canvas (Firefox, Safari, WebKit, Opera) renderer. Canvas could not be up-to-date as it's not my priority.