Esboza - online vector editor & framework (Part one)

    Having played enough with the previous hack http://babarun.ru/content/canvas/ , {schiz + obsession} did not allow me to stop there.

    image

    Immediately look at the demo http://esboza.ru/demo/ , then all the explanations.



    Drawing on canvas using standard features is probably not very interesting. You need some kind of intermediate link to go to the next level of abstraction, so that you can draw using not primitives, but objects that you can hang events on, animation, manage their properties, and so on ... First I wanted to write a vector editor for teamwork, but in the process, the idea of ​​a canvas framework has captured me and still excites my consciousness.

    A bit of 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 a 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 the
                            Bezier_real.set_fillStyle ('RGB (191,213,221)') properties ;
                            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 of this function on onload:


    I didn’t think that I would ever say this phrase - “it works the fastest in the Internet Explorer” - but there is no way out ..., I have to ..., it is! For many years I was sure that the words “faster”, “works” and “Internet Explorer” cannot be in the same sentence, and even more so, probably in the kingdom something has changed.

    That's all for now, this is just the beginning, in the second part I will show how you can animate objects and how the model of events works.

    PS1 In the public domain, the framework will be available immediately after a little closed testing and preparation of documentation.
    PS2. About a bug with negative scaling in the course.
    PS3 On http://esboza.rudo not pay attention, while there is a stub. She mutates into a cool site, as soon as the designer frees herself from her worries and fouls the bruised design.

    Also popular now: