javascript - How to put control inside a HTML5 canvas drawing? -
i have requirement want input control/dropdown inside canvas drawing. goes want take input user canvas. on canvas there boxes , each box can drag , drop, once drop @ place our user modify them (by providing input typing or choosing dropdown). far able draw boxes , make dragable , dropable, here js fiddle same -
http://jsfiddle.net/akki166786/wa52f9pm/
<script type="text/javascript"> window.onload = function(){ draw(); } </script> <body style="margin: 0;padding:0;clear:both; cursor: pointer"> <canvas id="canvas" tabindex="1" style="float:left" ></canvas> <div id="plainenglish" tabindex="2" style="float: left;"></div> </body> <script> var c = document.getelementbyid("canvas"); var ctx = c.getcontext("2d"); c.width = 600; c.height = 300; //my mouse coordinates var x,y; c.addeventlistener("mousedown",down); c.addeventlistener("mousemove",move); c.addeventlistener("mouseup",up); var r = 0; function counter() { r++; console.log(r); } //i'll save boxes in array var myboxes = new array(); // boxes have moved droppable area of canvas. var mydroppedboxes = new array(); //this function describes box is. //each created box gets own values function box(x,y,w,h,rgb,text) { this.x = x, this.y = y; this.xs = x; //saving x this.ys = y; //saving y this.w = w; this.h = h; this.rgb = rgb; this.text = text; //to determine if box being draged this.draging = false; this.isbeingdragged = false; } //let's make boxes!! myboxes[0] = new box(20,20,75,20,"#6aa121","first"); myboxes[1] = new box(20,50,75,20,"#6aa121", "second"); myboxes[2] = new box(20,80,75,20,"#6aa121","third"); //here draw function draw() { ctx.clearrect(0,0,c.width,c.height); //dropable area ctx.fillstyle="red"; ctx.fillrect(c.width/2,0,c.width,c.height); //boxes! (var = 0; i<myboxes.length; i++) { var b = myboxes[i]; if (b.draging) { //box on move //also draw on original spot ctx.fillstyle=b.rgb; ctx.fillrect(b.xs,b.ys,b.w,b.h); ctx.strokerect(b.xs,b.ys,b.w,b.h); ctx.font = "14px arial"; ctx.stroketext(b.text, b.xs + 5 , b.ys + 15); } ctx.fillstyle=b.rgb; ctx.fillrect(b.x,b.y,b.w,b.h); ctx.strokerect(b.x,b.y,b.w,b.h); ctx.font = "14px arial"; ctx.stroketext(b.text, b.x + 5 , b.y + 15); } for(var = 0; i< mydroppedboxes.length; i++) { var b = mydroppedboxes[i]; ctx.fillstyle=b.rgb; ctx.fillrect(b.x,b.y,b.w,b.h); ctx.strokerect(b.x,b.y,b.w,b.h); ctx.font = "14px arial"; ctx.stroketext(b.text, b.x + 5 , b.y + 15); } } function down(event) { event = event || window.event; x = event.pagex - c.offsetleft, y = event.pagey - c.offsettop; (var = 0; i<myboxes.length; i++) { var b = myboxes[i]; if (x>b.xs && x<b.xs+b.w && y>b.ys && y<b.ys+b.h) { myboxes[i].draging = true; myboxes[i].isbeingdragged = true; } } (var = 0; i<mydroppedboxes.length; i++) { var b = mydroppedboxes[i]; if (x>b.x && x<b.x + b.w && y>b.y && y<b.y + b.h) { b.draging = true; b.isbeingdragged = true; } } draw(); } function move(event) { event = event || window.event; x = event.pagex - c.offsetleft, y = event.pagey - c.offsettop; (var = 0; i<myboxes.length; i++) { var b = myboxes[i]; if (b.draging && b.isbeingdragged) { myboxes[i].x = x; myboxes[i].y = y; if (b.x>c.width/2) { var length = mydroppedboxes.length ; mydroppedboxes[length] = new box(x,y,b.w,b.h,b.rgb,b.text); mydroppedboxes[length].draging = true; mydroppedboxes[length].isbeingdragged = true; b.x = b.xs; b.y = b.ys; b.isbeingdragged = false; } } } (var = 0; i<mydroppedboxes.length; i++) { var b = mydroppedboxes[i]; if (b.draging && b.isbeingdragged) { b.x = x; b.y = y; } } draw(); } function up(event) { event = event || window.event; x = event.pagex - c.offsetleft, y = event.pagey - c.offsettop; (var = 0; i< myboxes.length; i++) { var b = myboxes[i]; if (b.draging && b.isbeingdragged) { //let's see if rectangle inside dropable area if (b.x < c.width/2) { myboxes[i].x = b.xs; myboxes[i].y = b.ys; myboxes[i].draging = false; b.isbeingdragged = false; } } } (var = 0; i< mydroppedboxes.length; i++) { var b = mydroppedboxes[i]; if ( b.isbeingdragged) { //let's see if rectangle inside dropable area if (b.x>c.width/2) { b.x = x; b.y = y; clublegos(b); plaintextmaker(); b.isbeingdragged = false; } else { //no it's not, sending original spot mydroppedboxes.splice(i,1); } } } draw(); } function clublegos(b) { // loop checking box lying near other box. for(var j = 0; j < mydroppedboxes.length; j++) { var z = mydroppedboxes[j]; if(!z.isbeingdragged) { if(((x > z.x) && (x < (z.x + z.w))) && ((y > (z.y - 15)) && (y < (z.y + z.h + 10)))) { b.x = z.x; if( (y - z.y) >= 0) { b.y = (z.y + z.h); console.log("inside if " + y + " " + z.y); } else { console.log("inside else " + y + " " + z.y); b.y = (z.y - z.h); } } } } } function plaintextmaker() { plainenglishdiv = document.getelementbyid("plainenglish"); plainenglishdiv.innerhtml = "<h3>here generating plain text based on each drag , drop</h3>"; } </script> </html> currently there 3 dragable boxes , want put controls inside them. , when dropped somewhere input controls should inside box.
i have no idea how put control inside canvas drawing, understand dom element can't come inside canvas. have create glimpse of input control or dropdown drawing them, how ?
thanks in advance.
simply said canvas editable image, create yourself. require write animation every element. when click on 1 of inputboxes (same drag) line starts blinking indicating can type, line should reposition when type/delete. if want drop down, should program collapse/open function, blue selected value, etc...
so if elements resemble basic form elements, go more dom-minded solution. example 2 div next eachother, 1 empty , 1 filled form elements. , when user drags element empty div add copy it's dom javascript. (you can re-use alot of code if put divs on current canvas)
Comments
Post a Comment