The best way is using canvas. It works in all modern browsers. Other than
that, if you really must do it with dom elements, the biggest single
improvement you can make to your code is to do DOM manipulation once, up
front. Add a bunch of divs (enough for the longest line you would draw) and
keep references to them in an array. Creating, appending, then removing so
many elements (as well as setting css classnames that are identical for all)
while the mouse is moving is going to be really really slow. Then after that
the next fastest improvement is to not use jQuery to modify their style
properties to reposition/resize them, but just the straight element style
property.
- Richard
On Sat, Dec 6, 2008 at 4:59 PM, Dirceu Barquette <[EMAIL PROTECTED]
> wrote:
> Hi!
>
> this function draw a line using bresenham algorithm.
> I created a selected line to draw. when the user movemouse, the oldest line
> is erased and a new selected line is created.
> but the process spent a lot of time. I think the problem is in outstanding
> line.
> Is there best way?
>
> thanks,
>
> Dirceu Barquette
>
> isabela_draw_line = function (s) {
> $.fn.isabela_draw.new_set({in_action:true});
> $('.isabela_draw_board')
> .bind('mousemove',function(e){
> relX = e.clientX - s.position.clientX;
> relY = e.clientY - s.position.clientY;
> absX = relX + s.position.clientX;
> absY = relY + s.position.clientY;
> Id = 'cel-'+relX+'-'+relY;
> var unit = s.brush.length+s.brush.unit;
>
> * $('.selected_to_draw').removeClass();**<- empty oldest
> positions*
>
> var coords =
> line(settings.click_position.clientX,settings.click_position.clientY,absX,absY);
> *<-Bresenham algorithm*
> var str = '';
> console.log(coords)
> jQuery.each(coords,function(k,v){
> str = 'cel-'+v.X+'-'+v.Y;
> console.log(str);
> if (!$('#'+str).hasClass('layer-1')) {
> obj= map({id:str,X:v.X,Y:v.Y});
> $('<div></div>')
> .attr({id:str})
>
> .css({position:'absolute',left:v.X,top:v.Y,width:unit,height:unit})
> .addClass('layer-1 selected_to_draw')
> .appendTo('.isabela_draw_board');
> }
> })
> })
> }
>
