"LibCanvas" - framework for working with Javascript Canvas

Hello, Habr! I think people who follow my work, noticed that I was very interested in drawing on Canvas in JavaScript. Perhaps this is a bit unnecessary, but I can’t do anything with myself, I really like this technology. I like it so much that I will speak at the conference with a report about it (Pavel Ponomarenko).

But this is not important now, because I want to present the framework, which, although it was only born and not yet overgrown with functionality, but already looks quite complete, interesting and, most importantly, convenient.


')

Tools

I am madly in love with JQuery, I consider it an ideal framework for working with DOM even now, when I refused it for this framework - I was once again convinced of this. But outside of DOM, IMHO, jQuery becomes too cumbersome and its philosophy is just annoying. Because initially I decided to write my own framework. extending prototypes of embedded objects and creating basic functions for working with the DOM. At a certain moment of Google, looking for interesting solutions with inheritance in JavaScript, I realized one truth: I write MooTools. That's why I made a decision, this framework was studied for a couple of hours sufficiently enough for work and I rewrote the whole, almost finished project (at the same time refactoring) on ​​a new framework, but I don’t regret it (Nevertheless, I’m still nicer jquery). I didn’t have enough of something in MooTools, so I had to expand the built-in objects by adding a couple of methods to their prototypes)

The framework itself

All framework classes are in the namespace LibCanvas. *. I tried to make it as elegant as possible, correcting the flaws that I was able to notice. The description may seem a bit chaotic (due to the whole night of programming and the fact that right now is 7 am, but with a living example it will become clearer at the end)

Shell

I propose to work with the canvas through some kind of universal shell, in which the ImagePreloader, ProgressBar , fps-meter and other baubles are already embedded.

new LibCanvas . Canvas2D ($( 'canvas' ))
. setFps ( 50 ) // ,
. fpsMeter ( 20 ) // . N , fps
. setConfig ({
background : '#EFEBE7' , //
images : App . imagesList , // -
progressBar : App . progressBarStyle // -
})
. addElement (new App . MyFirstElement ()) //
. addElement (new App . SecondElement ()) // .draw()
. start (); // -,

Context Change

I always didn’t like two things in the embedded context: that functions return undefined instead of this because you cannot make call chains and sometimes functions with a huge number of identical arguments, for example:

ctx . drawImage ( image , 15 , 16 , 12 , 34 , 56 , 12 , 32 , 45 );


I created my context with a ble with return this, named parameters and some more buns. I note that it is backward compatible with the usual context, although it is not recommended to use it. It's very easy to get it:

$( 'canvas' ). getContext ( '2d-libcanvas' )


I note that now it is very easy to create your contexts (if you need them), for an example, see ./js/Libs/LibCanvas/Core/Context2D.js :

LibCanvas . addCanvasContext ( '2d-libcanvas' , LibCanvas . Context2D );


In case you have redefined one of the built-in contexts, you can always call the original one:

$( 'canvas' ). getOriginalContext ( '2d' );


But the context has endured some changes and is now more convenient. For example, now when you draw a picture - there is no need to guess where the parameter is which means (you can use any pair of from-to, from-size, to-size):

ctx . drawImage ({
image : images [ 'ufo' ],
crop : {
from : [ 40 , 80 ],
to : [ 120 , 160 ]
},
draw : {
from : [ 80 , 80 ]
size : [ 160 , 160 ]
}
})


And a few more cosmetic changes:

ctx . fillAll ( 'green' ) //
. set ( 'strokeStyle' , 'red' )
. stroke (new CanvasLib . Shapes . Polygon ([
[ 231 , 67 ],
[ 281 , 67 ],
[ 317 , 103 ],
[ 317 , 153 ],
[ 281 , 189 ],
[ 231 , 189 ],
[ 195 , 153 ],
[ 195 , 103 ]
])) //
. arc ({
circle : [ 100 , 60 , 40 ], // 100:60, 40
angle : [( 5 ). degree (), ( 35 ). degree ()] // c 5 35
})

Note that Number . degree () Number . degree () returns the sane number of degrees that was in Number, but in radians that the technique likes more.

Figures

Based on CanvasLib . Shapes .* CanvasLib . Shapes .* Builds almost half the capabilities of the framework. At the moment there are only three figures - Polygon, Circle, Rectangle, but over time the number will increase, for example, a RoundedRectangle will be added, maybe something else. Naturally, you can create your own figures. But the important thing here is the implementation of the correct algorithm for determining whether a certain point is within this figure or not. CanvasLib . Shapes .* 26 .


. - , html. , , mouseover , html-. . :
this . canvas . mouse . subscribe ( this );
event c . : [click, mouseover, mousemove, mouseout, mouseup, mousedown], [away:mouseover, away:mousemove, away:mouseout, away:mouseup, away:mousedown] , . , , ( getShape ) hasDot . , , Circle "" .
, LibCanvas . InterfaceElement , , , :
elem . drawStandart (); //
elem . drawHover (); //
elem . drawActive (); // , bind' unbind' ( ), GUI.


, - ./js/App/* ./js/Start.js. - . , , !
- EventsTester. . - . , , .
- LibCanvas . InterfaceElement , . elem . bind ( 'click' , fn );
, . , , , JQueryUI. - )


1. ( , setTransform). ,
2.
3. . , -


greedykid , nutochka , (, , Miss IT ) . .



- LGPL, , : code.google.com/p/libcanvas Search CanvasLib . Shapes .* 26 .


. - , html. , , mouseover , html-. . :
this . canvas . mouse . subscribe ( this );
event c . : [click, mouseover, mousemove, mouseout, mouseup, mousedown], [away:mouseover, away:mousemove, away:mouseout, away:mouseup, away:mousedown] , . , , ( getShape ) hasDot . , , Circle "" .
, LibCanvas . InterfaceElement , , , :
elem . drawStandart (); //
elem . drawHover (); //
elem . drawActive (); // , bind' unbind' ( ), GUI.


, - ./js/App/* ./js/Start.js. - . , , !
- EventsTester. . - . , , .
- LibCanvas . InterfaceElement , . elem . bind ( 'click' , fn );
, . , , , JQueryUI. - )


1. ( , setTransform). ,
2.
3. . , -


greedykid , nutochka , (, , Miss IT ) . .



- LGPL, , : code.google.com/p/libcanvas CanvasLib . Shapes .* 26 .


. - , html. , , mouseover , html-. . :
this . canvas . mouse . subscribe ( this );
event c . : [click, mouseover, mousemove, mouseout, mouseup, mousedown], [away:mouseover, away:mousemove, away:mouseout, away:mouseup, away:mousedown] , . , , ( getShape ) hasDot . , , Circle "" .
, LibCanvas . InterfaceElement , , , :
elem . drawStandart (); //
elem . drawHover (); //
elem . drawActive (); // , bind' unbind' ( ), GUI.


, - ./js/App/* ./js/Start.js. - . , , !
- EventsTester. . - . , , .
- LibCanvas . InterfaceElement , . elem . bind ( 'click' , fn );
, . , , , JQueryUI. - )


1. ( , setTransform). ,
2.
3. . , -


greedykid , nutochka , (, , Miss IT ) . .



- LGPL, , : code.google.com/p/libcanvas

CanvasLib . Shapes .* 26 .


. - , html. , , mouseover , html-. . :
this . canvas . mouse . subscribe ( this );
event c . : [click, mouseover, mousemove, mouseout, mouseup, mousedown], [away:mouseover, away:mousemove, away:mouseout, away:mouseup, away:mousedown] , . , , ( getShape ) hasDot . , , Circle "" .
, LibCanvas . InterfaceElement , , , :
elem . drawStandart (); //
elem . drawHover (); //
elem . drawActive (); // , bind' unbind' ( ), GUI.


, - ./js/App/* ./js/Start.js. - . , , !
- EventsTester. . - . , , .
- LibCanvas . InterfaceElement , . elem . bind ( 'click' , fn );
, . , , , JQueryUI. - )


1. ( , setTransform). ,
2.
3. . , -


greedykid , nutochka , (, , Miss IT ) . .



- LGPL, , : code.google.com/p/libcanvas

CanvasLib . Shapes .* 26 .


. - , html. , , mouseover , html-. . :
this . canvas . mouse . subscribe ( this );
event c . : [click, mouseover, mousemove, mouseout, mouseup, mousedown], [away:mouseover, away:mousemove, away:mouseout, away:mouseup, away:mousedown] , . , , ( getShape ) hasDot . , , Circle "" .
, LibCanvas . InterfaceElement , , , :
elem . drawStandart (); //
elem . drawHover (); //
elem . drawActive (); // , bind' unbind' ( ), GUI.


, - ./js/App/* ./js/Start.js. - . , , !
- EventsTester. . - . , , .
- LibCanvas . InterfaceElement , . elem . bind ( 'click' , fn );
, . , , , JQueryUI. - )


1. ( , setTransform). ,
2.
3. . , -


greedykid , nutochka , (, , Miss IT ) . .



- LGPL, , : code.google.com/p/libcanvas

CanvasLib . Shapes .* 26 .


. - , html. , , mouseover , html-. . :
this . canvas . mouse . subscribe ( this );
event c . : [click, mouseover, mousemove, mouseout, mouseup, mousedown], [away:mouseover, away:mousemove, away:mouseout, away:mouseup, away:mousedown] , . , , ( getShape ) hasDot . , , Circle "" .
, LibCanvas . InterfaceElement , , , :
elem . drawStandart (); //
elem . drawHover (); //
elem . drawActive (); // , bind' unbind' ( ), GUI.


, - ./js/App/* ./js/Start.js. - . , , !
- EventsTester. . - . , , .
- LibCanvas . InterfaceElement , . elem . bind ( 'click' , fn );
, . , , , JQueryUI. - )


1. ( , setTransform). ,
2.
3. . , -


greedykid , nutochka , (, , Miss IT ) . .



- LGPL, , : code.google.com/p/libcanvas

CanvasLib . Shapes .* 26 .


. - , html. , , mouseover , html-. . :
this . canvas . mouse . subscribe ( this );
event c . : [click, mouseover, mousemove, mouseout, mouseup, mousedown], [away:mouseover, away:mousemove, away:mouseout, away:mouseup, away:mousedown] , . , , ( getShape ) hasDot . , , Circle "" .
, LibCanvas . InterfaceElement , , , :
elem . drawStandart (); //
elem . drawHover (); //
elem . drawActive (); // , bind' unbind' ( ), GUI.


, - ./js/App/* ./js/Start.js. - . , , !
- EventsTester. . - . , , .
- LibCanvas . InterfaceElement , . elem . bind ( 'click' , fn );
, . , , , JQueryUI. - )


1. ( , setTransform). ,
2.
3. . , -


greedykid , nutochka , (, , Miss IT ) . .



- LGPL, , : code.google.com/p/libcanvas

CanvasLib . Shapes .* 26 .


. - , html. , , mouseover , html-. . :
this . canvas . mouse . subscribe ( this );
event c . : [click, mouseover, mousemove, mouseout, mouseup, mousedown], [away:mouseover, away:mousemove, away:mouseout, away:mouseup, away:mousedown] , . , , ( getShape ) hasDot . , , Circle "" .
, LibCanvas . InterfaceElement , , , :
elem . drawStandart (); //
elem . drawHover (); //
elem . drawActive (); // , bind' unbind' ( ), GUI.


, - ./js/App/* ./js/Start.js. - . , , !
- EventsTester. . - . , , .
- LibCanvas . InterfaceElement , . elem . bind ( 'click' , fn );
, . , , , JQueryUI. - )


1. ( , setTransform). ,
2.
3. . , -


greedykid , nutochka , (, , Miss IT ) . .



- LGPL, , : code.google.com/p/libcanvas

CanvasLib . Shapes .* 26 .


. - , html. , , mouseover , html-. . :
this . canvas . mouse . subscribe ( this );
event c . : [click, mouseover, mousemove, mouseout, mouseup, mousedown], [away:mouseover, away:mousemove, away:mouseout, away:mouseup, away:mousedown] , . , , ( getShape ) hasDot . , , Circle "" .
, LibCanvas . InterfaceElement , , , :
elem . drawStandart (); //
elem . drawHover (); //
elem . drawActive (); // , bind' unbind' ( ), GUI.


, - ./js/App/* ./js/Start.js. - . , , !
- EventsTester. . - . , , .
- LibCanvas . InterfaceElement , . elem . bind ( 'click' , fn );
, . , , , JQueryUI. - )


1. ( , setTransform). ,
2.
3. . , -


greedykid , nutochka , (, , Miss IT ) . .



- LGPL, , : code.google.com/p/libcanvas

CanvasLib . Shapes .* 26 .


. - , html. , , mouseover , html-. . :
this . canvas . mouse . subscribe ( this );
event c . : [click, mouseover, mousemove, mouseout, mouseup, mousedown], [away:mouseover, away:mousemove, away:mouseout, away:mouseup, away:mousedown] , . , , ( getShape ) hasDot . , , Circle "" .
, LibCanvas . InterfaceElement , , , :
elem . drawStandart (); //
elem . drawHover (); //
elem . drawActive (); // , bind' unbind' ( ), GUI.


, - ./js/App/* ./js/Start.js. - . , , !
- EventsTester. . - . , , .
- LibCanvas . InterfaceElement , . elem . bind ( 'click' , fn );
, . , , , JQueryUI. - )


1. ( , setTransform). ,
2.
3. . , -


greedykid , nutochka , (, , Miss IT ) . .



- LGPL, , : code.google.com/p/libcanvas

CanvasLib . Shapes .* 26 .


. - , html. , , mouseover , html-. . :
this . canvas . mouse . subscribe ( this );
event c . : [click, mouseover, mousemove, mouseout, mouseup, mousedown], [away:mouseover, away:mousemove, away:mouseout, away:mouseup, away:mousedown] , . , , ( getShape ) hasDot . , , Circle "" .
, LibCanvas . InterfaceElement , , , :
elem . drawStandart (); //
elem . drawHover (); //
elem . drawActive (); // , bind' unbind' ( ), GUI.


, - ./js/App/* ./js/Start.js. - . , , !
- EventsTester. . - . , , .
- LibCanvas . InterfaceElement , . elem . bind ( 'click' , fn );
, . , , , JQueryUI. - )


1. ( , setTransform). ,
2.
3. . , -


greedykid , nutochka , (, , Miss IT ) . .



- LGPL, , : code.google.com/p/libcanvas

CanvasLib . Shapes .* 26 .


. - , html. , , mouseover , html-. . :
this . canvas . mouse . subscribe ( this );
event c . : [click, mouseover, mousemove, mouseout, mouseup, mousedown], [away:mouseover, away:mousemove, away:mouseout, away:mouseup, away:mousedown] , . , , ( getShape ) hasDot . , , Circle "" .
, LibCanvas . InterfaceElement , , , :
elem . drawStandart (); //
elem . drawHover (); //
elem . drawActive (); // , bind' unbind' ( ), GUI.


, - ./js/App/* ./js/Start.js. - . , , !
- EventsTester. . - . , , .
- LibCanvas . InterfaceElement , . elem . bind ( 'click' , fn );
, . , , , JQueryUI. - )


1. ( , setTransform). ,
2.
3. . , -


greedykid , nutochka , (, , Miss IT ) . .



- LGPL, , : code.google.com/p/libcanvas

CanvasLib . Shapes .* 26 .


. - , html. , , mouseover , html-. . :
this . canvas . mouse . subscribe ( this );
event c . : [click, mouseover, mousemove, mouseout, mouseup, mousedown], [away:mouseover, away:mousemove, away:mouseout, away:mouseup, away:mousedown] , . , , ( getShape ) hasDot . , , Circle "" .
, LibCanvas . InterfaceElement , , , :
elem . drawStandart (); //
elem . drawHover (); //
elem . drawActive (); // , bind' unbind' ( ), GUI.


, - ./js/App/* ./js/Start.js. - . , , !
- EventsTester. . - . , , .
- LibCanvas . InterfaceElement , . elem . bind ( 'click' , fn );
, . , , , JQueryUI. - )


1. ( , setTransform). ,
2.
3. . , -


greedykid , nutochka , (, , Miss IT ) . .



- LGPL, , : code.google.com/p/libcanvas

CanvasLib . Shapes .* 26 .


. - , html. , , mouseover , html-. . :
this . canvas . mouse . subscribe ( this );
event c . : [click, mouseover, mousemove, mouseout, mouseup, mousedown], [away:mouseover, away:mousemove, away:mouseout, away:mouseup, away:mousedown] , . , , ( getShape ) hasDot . , , Circle "" .
, LibCanvas . InterfaceElement , , , :
elem . drawStandart (); //
elem . drawHover (); //
elem . drawActive (); // , bind' unbind' ( ), GUI.


, - ./js/App/* ./js/Start.js. - . , , !
- EventsTester. . - . , , .
- LibCanvas . InterfaceElement , . elem . bind ( 'click' , fn );
, . , , , JQueryUI. - )


1. ( , setTransform). ,
2.
3. . , -


greedykid , nutochka , (, , Miss IT ) . .



- LGPL, , : code.google.com/p/libcanvas

CanvasLib . Shapes .* 26 .


. - , html. , , mouseover , html-. . :
this . canvas . mouse . subscribe ( this );
event c . : [click, mouseover, mousemove, mouseout, mouseup, mousedown], [away:mouseover, away:mousemove, away:mouseout, away:mouseup, away:mousedown] , . , , ( getShape ) hasDot . , , Circle "" .
, LibCanvas . InterfaceElement , , , :
elem . drawStandart (); //
elem . drawHover (); //
elem . drawActive (); // , bind' unbind' ( ), GUI.


, - ./js/App/* ./js/Start.js. - . , , !
- EventsTester. . - . , , .
- LibCanvas . InterfaceElement , . elem . bind ( 'click' , fn );
, . , , , JQueryUI. - )


1. ( , setTransform). ,
2.
3. . , -


greedykid , nutochka , (, , Miss IT ) . .



- LGPL, , : code.google.com/p/libcanvas

CanvasLib . Shapes .* 26 .


. - , html. , , mouseover , html-. . :
this . canvas . mouse . subscribe ( this );
event c . : [click, mouseover, mousemove, mouseout, mouseup, mousedown], [away:mouseover, away:mousemove, away:mouseout, away:mouseup, away:mousedown] , . , , ( getShape ) hasDot . , , Circle "" .
, LibCanvas . InterfaceElement , , , :
elem . drawStandart (); //
elem . drawHover (); //
elem . drawActive (); // , bind' unbind' ( ), GUI.


, - ./js/App/* ./js/Start.js. - . , , !
- EventsTester. . - . , , .
- LibCanvas . InterfaceElement , . elem . bind ( 'click' , fn );
, . , , , JQueryUI. - )


1. ( , setTransform). ,
2.
3. . , -


greedykid , nutochka , (, , Miss IT ) . .



- LGPL, , : code.google.com/p/libcanvas

CanvasLib . Shapes .* 26 .


. - , html. , , mouseover , html-. . :
this . canvas . mouse . subscribe ( this );
event c . : [click, mouseover, mousemove, mouseout, mouseup, mousedown], [away:mouseover, away:mousemove, away:mouseout, away:mouseup, away:mousedown] , . , , ( getShape ) hasDot . , , Circle "" .
, LibCanvas . InterfaceElement , , , :
elem . drawStandart (); //
elem . drawHover (); //
elem . drawActive (); // , bind' unbind' ( ), GUI.


, - ./js/App/* ./js/Start.js. - . , , !
- EventsTester. . - . , , .
- LibCanvas . InterfaceElement , . elem . bind ( 'click' , fn );
, . , , , JQueryUI. - )


1. ( , setTransform). ,
2.
3. . , -


greedykid , nutochka , (, , Miss IT ) . .



- LGPL, , : code.google.com/p/libcanvas