P.S: at w3schools.com: *"Note:* The <canvas> tag is only a container for graphics, you must use a script to actually paint graphics."
Thanks!!!! 2008/12/7 Dirceu Barquette <[EMAIL PROTECTED]> > (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<http://calango.barquettenet.net/%7Edirceu/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'); >>> } >>> }) >>> }) >>> } >>> >> >> >
