CODEWITHSUNDEEP
htmlscrollhtml5-canvasfabricjs
coulix
coulix

Reputation: 3368

Fake scroll bar on overflow: hidden

I have a large canvas wrapped inside a smaller div container with overflow hidden.

I would like to create a (fake div/css or even canvas ?) scrollbar to move the canvas position inside the wrapper as if it was a real (overflow: auto) scrollbar.

First, is what I am trying ot achieve is feasible ?

Can I 'move' my canvas position inside the wrapper with javascript ?

Why a fake scrollbar ?

I saw plenty of Jquery libs doing similar things but they make the content draggable whereas I only want the scrollbar "bar" to be draggable.

Here is a demo of my attempt:

http://jsbin.com/otinuy/1/edit

Upvotes: 3

Views: 5012

Answers (2)

jing3142
jing3142

Reputation: 1871

Yes you just need to make the left position of the canvas relate to the left position of the horizontal scrollbar "bar" as follows

Let W be the width of the canvas, let D be the width of the containing div and the scrollbar and B the width of the scrollbar "bar". W>D

Initiall relative to the containing div the left of canvas is 0 and the "bar" has left=0 for the scrollbar.

The fraction of the canvas viewable is D/W and so B=D*D/W

The range of left hand edge of the "bar" is 0 to D-B and as the "bar" moves right the canvas moves left in proportion.

let L be the current position of the "bar" from the left hand edge of the scrollbar, the fraction moved is L/D and so the canvas moves L*W/D to the left

ie when (bar).style.left= L (canvas).style.left=-L*W/D

Here is a fiddle using JQuery that hopefully does what you require.

http://jsfiddle.net/GdsEa/

Javascript code shown below

var W=2000;
var D=500;
var B=D*D/W;
document.getElementById("wrap1").style.width=D+"px";
document.getElementById("hbar").style.width=B+"px";
var canv=document.getElementById("mycanvas");
canv.width=W;
var ctx=canv.getContext("2d");
ctx.beginPath();
ctx.moveTo(100,100);
ctx.lineTo(200,100);
ctx.lineTo(200,200);
ctx.lineTo(100,200);
ctx.closePath();
ctx.fillStyle="rgb(255,0,0)";
ctx.fill();

ctx.beginPath();
ctx.moveTo(W-100,100);
ctx.lineTo(W,100);
ctx.lineTo(W,200);
ctx.lineTo(W-100,200);
ctx.closePath();
ctx.fillStyle="rgb(0,0,255)";
ctx.fill();

$( ".bar" ).draggable({ containment:"parent" });
$( ".bar" ).on( "drag", function( event, ui ) {var L=ui.position.left;
                                               canv.style.left=(-L*W/D)+"px"} );

Note that widths of containing div, canvas, scrollbar and bar are overwritten in the code by setting W and D so that it is easy to change these values.

Upvotes: 5

markE
markE

Reputation: 105025

For navigation over a larger-than-screen canvas, you can have your large canvas offscreen and then have a second smaller canvas onscreen.

The second canvas acts like a viewport into the larger canvas by displaying a portion of the larger canvas.

You can create navigation system to allow the user to scroll through the larger canvas via the viewport.

Here's code and a Fiddle: http://jsfiddle.net/m1erickson/BBwW8/

<!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; }
    canvas{border:1px solid red;}
</style>

<script>
    $(function(){

        var canvas=document.getElementById("canvas");
        var ctxCanvas=canvas.getContext("2d");
        var view=document.getElementById("view");
        var ctxView=view.getContext("2d");

        var col=0;
        var row=0;

        var img=new Image();
        img.onload=function(){
            ctxCanvas.drawImage(this,0,0,canvas.width,canvas.height);
            drawToViewport();
        }
        img.src="http://www.gospelgifs.com/art_pages_15/imgs/house2.gif";

        $("#left").click(left);
        $("#right").click(right);
        $("#up").click(up);
        $("#down").click(down);

        function drawToViewport(){
            ctxView.clearRect(0,0,view.width,view.height);
            ctxView.drawImage(canvas,
                col*canvas.width/4,row*canvas.height/4,view.width,view.height,
                0,0,view.width,view.height);   
        }
        function right(){
            if(col+1<=3){ col++; drawToViewport(); }
        }
        function left(){
            if(col-1>=0){ col--; drawToViewport(); }
        }
        function down(){
            if(row+1<=3){ row++; drawToViewport(); }
        }
        function up(){
            if(row-1>=0){ row--; drawToViewport(); }
}

    }); // end $(function(){});
</script>

</head>

<body>

<canvas id="canvas" width=300 height=300></canvas><br/>
<canvas id="view" width=97 height=67></canvas>
<button id="left">Left</button>
<button id="right">Right</button>
<button id="up">Up</button>
<button id="down">Down</button>


</body>
</html>

Upvotes: 2

Related Questions