jquery - How to use the HTML button inside the canvas page? -
hi i'm planning make drag , drop method using html5 canvas j query i'm stuck how use html button inside canvas page. has of i'm able image inside canvas page , capable of doing drag , drop. plan use button drag , drop.
here html page.
<!doctype html> <html> <head> <link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css --> <script src="http://code.jquery.com/jquery.min.js"></script> <style> body{ background-color: ivory; padding:20px; } canvas{ border: 1px solid #808080; } </style> <script> $(function(){ var canvas1 = document.getelementbyid("cvs1"); var canvas2 = document.getelementbyid("cvs2"); var contexts=[]; contexts.push(canvas1.getcontext('2d')); contexts.push(canvas2.getcontext('2d')); function clearall(){ //clear both canvas first canvas1.width = canvas1.width canvas2.width = canvas2.width } canvas1.onclick=function(e){ handleclick(e,1); }; canvas2.onclick=function(e){ handleclick(e,2); }; // function handleclick(e,contextindex){ e.stoppropagation(); var mousex=parseint(e.clientx-e.target.offsetleft); var mousey=parseint(e.clienty-e.target.offsettop); clearall(); for(var i=0;i<states.length;i++){ var state=states[i]; if(state.dragging){ state.dragging=false; state.draw(); continue; } if ( state.contextindex==contextindex && mousex>state.x && mousex<state.x+state.width && mousey>state.y && mousey<state.y+state.height) { state.dragging=true; state.offsetx=mousex-state.x; state.offsety=mousey-state.y; state.contextindex=contextindex; } state.draw(); } } canvas1.onmousemove = function(e){ handlemousemove(e,1); } canvas2.onmousemove = function(e){ handlemousemove(e,2); } // function handlemousemove(e,contextindex){ e.stoppropagation(); var mousex=parseint(e.clientx-e.target.offsetleft); var mousey=parseint(e.clienty-e.target.offsettop); clearall(); for(var i=0;i<states.length;i++){ var state=states[i]; if (state.dragging) { state.x = mousex-state.offsetx; state.y = mousey-state.offsety; state.contextindex=contextindex; } state.draw(); } } var states=[]; var img=new image(); img.onload=function(){ states.push(addstate(0,0,img)); } img.src="http://www.rgraph.net/images/logo.png"; function addstate(x,y,image){ state = {} state.dragging=false; state.contextindex=1; state.image=image; state.x=x; state.y=y; state.width=image.width; state.height=image.height; state.offsetx=0; state.offsety=0; state.draw=function(){ var context=contexts[this.contextindex-1]; if (this.dragging) { context.strokestyle = 'red'; context.strokerect(this.x,this.y,this.width+5,this.height+5) } context.drawimage(this.image,this.x,this.y); } state.draw(); return(state); } $("#more").click(function(){ states.push(addstate(states.length*100,0,img)); }); }); // end $(function(){}); </script> </head> <body> <button id="more">add image</button><br> <div> <canvas height="625" width="300" id="cvs1">[no canvas support]</canvas><br></div> <br><div><canvas height="125" width="700" id="cvs2">[no canvas support]</canvas></div> </body> </html> plunker: http://plnkr.co/edit/nebur4reqiimca4iunkm?p=preview
i have add style button , div. think want.
$(function() { var canvas1 = document.getelementbyid("cvs1"); var canvas2 = document.getelementbyid("cvs2"); var contexts = []; contexts.push(canvas1.getcontext('2d')); contexts.push(canvas2.getcontext('2d')); function clearall() { //clear both canvas first canvas1.width = canvas1.width canvas2.width = canvas2.width } canvas1.onclick = function(e) { handleclick(e, 1); }; canvas2.onclick = function(e) { handleclick(e, 2); }; // function handleclick(e, contextindex) { e.stoppropagation(); var mousex = parseint(e.clientx - e.target.offsetleft); var mousey = parseint(e.clienty - e.target.offsettop); clearall(); (var = 0; < states.length; i++) { var state = states[i]; if (state.dragging) { state.dragging = false; state.draw(); continue; } if (state.contextindex == contextindex && mousex > state.x && mousex < state.x + state.width && mousey > state.y && mousey < state.y + state.height) { state.dragging = true; state.offsetx = mousex - state.x; state.offsety = mousey - state.y; state.contextindex = contextindex; } state.draw(); } } canvas1.onmousemove = function(e) { handlemousemove(e, 1); } canvas2.onmousemove = function(e) { handlemousemove(e, 2); } // function handlemousemove(e, contextindex) { e.stoppropagation(); var mousex = parseint(e.clientx - e.target.offsetleft); var mousey = parseint(e.clienty - e.target.offsettop); clearall(); (var = 0; < states.length; i++) { var state = states[i]; if (state.dragging) { state.x = mousex - state.offsetx; state.y = mousey - state.offsety; state.contextindex = contextindex; } state.draw(); } } var states = []; var img = new image(); img.onload = function() { states.push(addstate(0, 0, img)); } img.src = "http://www.rgraph.net/images/logo.png"; function addstate(x, y, image) { state = {} state.dragging = false; state.contextindex = 1; state.image = image; state.x = x; state.y = y; state.width = image.width; state.height = image.height; state.offsetx = 0; state.offsety = 0; state.draw = function() { var context = contexts[this.contextindex - 1]; if (this.dragging) { context.strokestyle = 'red'; context.strokerect(this.x, this.y, this.width + 5, this.height + 5) } context.drawimage(this.image, this.x, this.y); } state.draw(); return (state); } $("#more").click(function() { states.push(addstate(states.length * 100, 0, img)); }); }); // end $(function(){});body { background-color: ivory; padding: 20px; } canvas { border: 1px solid #808080; }<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div style="position:relative;"> <button id="more" style="position:absolute;top:6px;left:6px;">add image</button> <canvas height="625" width="300" id="cvs1">[no canvas support]</canvas> <br> </div> <br> <div> <canvas height="125" width="700" id="cvs2">[no canvas support]</canvas> </div>
Comments
Post a Comment