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

Popular posts from this blog

javascript - Using jquery append to add option values into a select element not working -

i'm looking dynamically populate select element names of items stored array. for reason it's not working , i'm not sure why. html: <div class="col-md-4 col-md-offset-4"> <select class="select1"> </select> , <select class="select2"> </select> </div> note i'm using bootstrap layout. here's jquery i'm using try , populate ".select1" jquery: select: function() { $.each(state.greens, function(index, value) { $(".select1").append("<option value =' " + index + " '>" + state.greens[index].name + "</option>"); }); } note function 'select' stored within object called 'display'. state.greens name of array i'm trying access. so @ end of html page call display.select(); call function. no error messages showing in console. also, saw question: appending
Read more

Android soft keyboard reverts to default keyboard on orientation change -

i'm building android soft keyboard , can't seem fix bug - have arabic , qwerty keyboard , when rotate device on qwerty keyboard (or arabic shift), it's if program has "restarted" , becomes arabic keyboard without shift. the onsaveinstancestate(bundle savedinstancestate) not work because application not extend activity inputmethodservice . i put following in android manifest android:configchanges="keyboard|keyboardhidden|orientation" android:windowsoftinputmode="stateunchanged|adjustresize"> i tried using @override public void onconfigurationchanged(configuration newconfig) { super.onconfigurationchanged(newconfig); log.i(mydebug, "config changed " + currentkeyboard.equals(qwerty)); } however, currentkeyboard.equals(qwerty)) results false , made sure true before orientation change. any appreciated. i think applications fault. if application restarting on orientation change
Read more

Rendering JButton to get the JCheckBox behavior in a JTable by using images does not update my table -

i rendering jbutton image on simulate jcheckbox behavior. why don't let jtable render jcheckbox? because need bigger checkboxes , there's no way can resize them (as far know). so, have own table cell renderer , editor. both renders jbutton , checkbox images on them. trying change image checked image unchecked image (or vice versa) , update cell value (boolean true or false). however, reason, getcelleditorvalue() not update table. so, release mouse, value goes original one. any appreciated! lot! public class tableexample extends jframe { jscrollpane pane; jpanel panel; jtable table; object[][] data; mytablemodel tm; renderer buttoncolumn; public tableexample(object[][] data) throws ioexception { string[] columns = {"column#1", "column#2", "column#3", "column#4", "column#5", "column#6"}; this.data = data; this.setpreferredsize(new dimension(700, 500));
Read more