javascript - how to remove one canvas element from displaying on top of another canvas element -
i have 2 canvases. one, main canvas. upon drawn, second, speech bubble canvas (balloon). displays information specific regions on main canvas upon client clicks.
i playing around canvas after introducing speech bubble , came across issue.
this simple code shows how speech bubble introduced:-
http://jsfiddle.net/m1erickson/ajvkn/
my canvas timeline, , scrollable; has historical events plotted on it. once user clicks on event speech bubble appears.
now don't want happen is, when client clicks on canvas, speech bubble appears , scrolls, speech bubble moves new position on scrolled image, still showing information previous location.
for have hideballoon () assigns css property left : -200. still causes inconsistencies. example if drag canvas left right, balloon doesn't disappear scroll, reappears in new position.
there .remove() function $("#balloon").remove()
this removes balloon however, issue is:- removes balloon completely, , no future clicks pop more speech bubbles. not want. want dynamic.
click on event >> speech bubble appears >> scroll canvas >> speech bubble disappears >> click on canvas >> speech bubble pertaining new click appears >> , on , forth.
[edited]
use .show() , .hide() keep balloon out of way when not needed
when user scrolls window hide balloon.
i assume you're scrolling window instead of canvas. if you're scrolling canvas, use $("#canvas").scroll( ... ) instead.
so when need balloon:
// move balloon canvas target $("#balloon").css({left:offsetx+x, top:offsety+y}); // , show $("#balloon").show(); and hide balloon when user clicks on or when window scrolls:
// listen clicks on balloon , hide balloon $("#balloon").click(function(e){ $("#balloon").hide(); }); // listen scrolls , hide balloon $(window).scroll(function(e){ $("#balloon").hide(); }); here’s working sample code , fiddle: http://jsfiddle.net/m1erickson/uwhkv/
<!doctype html> <html> <head> <link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css --> <script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script> <style> body{ width:2000px; background-color: ivory; padding:10px;padding-top:100px; } #canvas{border:1px solid red;} #balloon{ position:absolute; left:-200px; } </style> <script> $(function(){ // reference our drawing canvas var canvas=document.getelementbyid("canvas"); var ctx=canvas.getcontext("2d"); // reference our balloon canvas var balloon=document.getelementbyid("balloon"); var popctx=balloon.getcontext("2d"); // position of canvas relative window var canvasoffset=$("#canvas").offset(); var offsetx=canvasoffset.left; var offsety=canvasoffset.top; // define targets , basic info var count=1; var circles=[]; for(var x=50;x<1900;x+=50){ circles.push({ x:x, y:120, radius:20, color:"blue", info:"i'm #"+(count++)}); } // draw target circles on canvas ctx.fillstyle="yellow"; ctx.font="16px verdana"; for(var i=0;i<circles.length;i++){ drawcircle(circles[i]); ctx.beginpath(); ctx.filltext(i+1,circles[i].x-8,circles[i].y+5); } // listen clicks on canvas , show balloon $("#canvas").click(function(e){ // mouseclick position mousex=parseint(e.clientx-offsetx); mousey=parseint(e.clienty-offsety); // account window scrolling var scrollx=$(window).scrollleft(); var scrolly=$(window).scrolltop(); // see if clicked on targets for(var i=0;i<circles.length;i++){ var circle=circles[i]; var dx=(circle.x-scrollx)-mousex; var dy=(circle.y-scrolly)-mousey; var radius=circle.radius; // true if clicked in target circle if(dx*dx+dy*dy<=radius*radius){ drawballoon(circles[i].x+radius,circles[i].y-100,circles[i].info); } } }); // listen clicks on balloon , hide balloon $("#balloon").click(function(e){ $("#balloon").hide(); }); // listen scrolls , hide balloon $(window).scroll(function(e){ $("#balloon").hide(); }); function drawcircle(circle){ ctx.save(); ctx.beginpath(); ctx.fillstyle=circle.color; ctx.strokestyle="black"; ctx.linewidth=3; ctx.arc(circle.x,circle.y,circle.radius,0,math.pi*2,false); ctx.closepath(); ctx.fill(); ctx.stroke(); ctx.restore(); } function drawballoon(x,y,theinfo){ popctx.save(); popctx.fillstyle="#fd0"; popctx.strokestyle="#000"; // draw balloon popctx.beginpath(); popctx.moveto(52,02); popctx.quadraticcurveto(02,02,02,42); popctx.quadraticcurveto(02,77,27,77); popctx.quadraticcurveto(27,102,07,102); popctx.quadraticcurveto(37,102,42,77); popctx.quadraticcurveto(102,77,102,42); popctx.quadraticcurveto(102,02,52,02); popctx.linewidth=3; popctx.stroke(); popctx.fill(); // draw theinfo popctx.font="10pt arial"; popctx.fillstyle="black"; popctx.filltext(theinfo,10,50); popctx.restore(); // move balloon canvas target $("#balloon").css({left:offsetx+x, top:offsety+y}); $("#balloon").show(); } }); // end $(function(){}); </script> </head> <body> <canvas id="canvas" width=1950 height=300></canvas> <canvas id="balloon" width=105 height=105></canvas> </body> </html>
Comments
Post a Comment