Esboza - vector editor online & framework (Part One)

Having played enough with the previous hand-made article http://babarun.ru/content/canvas/ , {shiz + obsession} did not let me stop there.



Immediately see the demo http://esboza.ru/demo/ , all the explanations later.
')


Drawing on canvas using standard functions is probably not very interesting. We need some kind of intermediate link to go to the next level of abstraction, in order to draw using not primitives, but objects to attach events, animation, manage their properties and so on ... At first I wanted to write a vector editor for teamwork, but in the process of work, the idea of ​​the framework for canvas captured me and still stirs my mind.

A little code from the demo:

function draw ( ) {

var canvas = document. getElementById ( 'canvas_dom' ) ; // canvas in which the rendering process will take place

if ( canvas. getContext )
{

var all_objects = new esboza ( canvas ) ; // create container
var Bezier_real = new Bezier ; // create - Bezier curve

// Add points
Bezier_real. add_point ( 348 , 342 ) ;
Bezier_real. add_point ( 328.5 , 331 ) ;
Bezier_real. add_point ( 307.5 , 323 ) ;
Bezier_real. add_point ( 294 , 308 ) ;
Bezier_real. add_point ( 280.5 , 293 ) ;
Bezier_real. add_point ( 243 , 243.5 ) ;
Bezier_real. add_point ( 293 , 175.5 ) ;
/* and so on... */


// set properties
Bezier_real. set_fillStyle ( 'RGB (191,213,221)' ) ;
Bezier_real. set_fill ( ) ;

// add the bezier curve to the container and start the rendering process
all_objects. add ( Bezier_real ) . render ( ) ;
}
}

and hang up the call to this function on onload:

< body onload = "draw" >

I did not think that I would ever say this phrase - “the fastest is working in the Internet Explorer” - but there is no way out ..., it is necessary ... it is so! For many years, I was sure that the words “faster”, “works” and “Internet Explorer” cannot stand in one sentence and especially next to it, probably something changed in the kingdom.

This is all for now, this is only the beginning, in the second part I will show how you can animate objects and how the event model is organized.

Ps1. In open access, the framework will be available immediately after a small closed testing and preparation of documentation.
PS2. About bug with negative scaling in the course.
PS3. On http://esboza.ru do not pay attention, while there is a stub there. She mutates into a cool site, as soon as the designer is free from her worries and begins to hurt the design.