javascript - Add a dynamic vertical and horizontal scrollbar when the contents of the canvas increases in size -
i trying add together vertical , horizontal scroll bar in canvas. image within canvas zoom in , out microsoft powerpoint slides or google maps , need button original size of image back. view hidden area after zoom, need scroll bars ( not drag mouse downwards ) . how can this.
i tried canvas scrollbar not working not working need.
here's illustration adds scrollbars accommodate oversized content.
the thought simple:
size container div smaller desired size
put oversized canvas in container div
set overflow:scroll on container div dynamic scrollbars
example code , demo: http://jsfiddle.net/m1erickson/a8u6p/
<!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{ background-color: ivory; padding:50px; } canvas{border:1px solid red;} div{ overflow:scroll; width:300px; height:300px; border:2px solid blue; } </style> <script> $(function(){ var canvas=document.getelementbyid("canvas"); var ctx=canvas.getcontext("2d"); var img=new image(); img.onload=function(){ ctx.drawimage(img,0,0,img.width,img.height,0,0,canvas.width,canvas.height); } img.src="https://dl.dropboxusercontent.com/u/139992952/stackoverflow/canvas%20compositing.png"; }); // end $(function(){}); </script> </head> <body> <div> <canvas id="canvas" width=800 height=500></canvas> </div> </body> </html> javascript html canvas
No comments:
Post a Comment