(sorry my english...)
Hi,
You are right about your explain. But you can see at
isabeladraw.sourceforge.net what I've been developing. In this implements
the app build 1px div per div. This is very slow!! But for the next version
(you can see at
http://calango.barquettenet.net/~dirceu/isabela/jquery.isabela_draw) on
mouseover the canvas builds div with dimensions choiced are draw in absolute
position. When you want to make a line the app uses bresenham algorithm.
In fact, canvas is the best way, but jQuery makes easy DOM manipulation and
you can make a valid "html image" for your websites. And the code is very
simple!!!! You can make funcionalities
like modules and merge it to the code. My wish is sharing this code with
all.
Thank you very much. Your opinion is very important!
Dirceu Barquette
2008/12/7 Richard D. Worth <[EMAIL PROTECTED]>
> 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');
>> }
>> })
>> })
>> }
>>
>
>
