"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