javascript - scrollfunction for canvas if canvas too big - Stack Overflow

admin管理员组

文章数量:1277398

I am using the visualisation arborjs and I am trying to implement the zoom-function. This isn't included in the visualisation itself so I had to try some different approches.

I can't use the html5 canvasfunction .scale because with this the positions given by the visualisation don't match the real positions anymore. For the moment I just increase the height and width of the canvas to zoom in. This doesn't give any problems with the positioningproblem, but I can't scroll in the canvas.

The only problem that I have to solve is the scrollfunction to make this work. So my question is: can I add scrollbars to the canvas when the canvas bees too big. Initially the canvas has width 100% and height 100%, so no scrollbars are needed, but when I enlarge this I need those scrollbars.

I tried the css-style overflow:scroll for both the canvas and the surrounding div, but no results.

Here is the relevant code:

HTML:

<div class="explore_area">
    <canvas class="explore_area" id="viewport">
    </canvas>   
</div>

javascript:

zoom: function(){
            var canvas = document.getElementById("viewport");
            var ctx = canvas.getContext('2d');
            sys.screenSize((canvas.width*1.5), (canvas.height*1.5));
        }

css:

div.explore_area {
    position:relative;
    width:100%;
    height:600px;
    overflow:hidden;
}

canvas.explore_area{
    float:left;
    height:550px;
    width:100%;
}

I am using the visualisation arborjs and I am trying to implement the zoom-function. This isn't included in the visualisation itself so I had to try some different approches.

I can't use the html5 canvasfunction .scale because with this the positions given by the visualisation don't match the real positions anymore. For the moment I just increase the height and width of the canvas to zoom in. This doesn't give any problems with the positioningproblem, but I can't scroll in the canvas.

The only problem that I have to solve is the scrollfunction to make this work. So my question is: can I add scrollbars to the canvas when the canvas bees too big. Initially the canvas has width 100% and height 100%, so no scrollbars are needed, but when I enlarge this I need those scrollbars.

I tried the css-style overflow:scroll for both the canvas and the surrounding div, but no results.

Here is the relevant code:

HTML:

<div class="explore_area">
    <canvas class="explore_area" id="viewport">
    </canvas>   
</div>

javascript:

zoom: function(){
            var canvas = document.getElementById("viewport");
            var ctx = canvas.getContext('2d');
            sys.screenSize((canvas.width*1.5), (canvas.height*1.5));
        }

css:

div.explore_area {
    position:relative;
    width:100%;
    height:600px;
    overflow:hidden;
}

canvas.explore_area{
    float:left;
    height:550px;
    width:100%;
}

• javascript
• jquery
• html
• css

Share Improve this question Follow asked Dec 20, 2011 at 18:08 JasperTackJasperTack 4,45755 gold badges3030 silver badges4343 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 5

Setting the width and height of canvas using css is not a good idea. To achieve what you required you should not give width and height of canvas in css. Even if you change the dimension css will reset it.

so first you need to give dimension like this

<canvas class="explore_area" id="viewport" width="400" height="300">

css for container

div.explore_area {
    position:relative;
    width:400px;
    height:300px;
    overflow:auto;
}

see the demo here : http://jsfiddle/diode/sHbKD/22/ ( not using arborjs)

I can't use the html5 canvasfunction .scale because with this the positions given by the visualisation don't match the real positions anymore.

What do you mean by that ?? If you want to draw an image same place, but zoomed, you can do :

ctx.save();
ctx.scale(ratio, ratio);
ctx.drawImage(myImage, x/ratio, y/ratio ) ;
ctx.restore();

Or if you want to zoom from the middle of the image :

ctx.save();
ctx.translate(x + myImage.width/2, y + myImage.height/2 );
ctx.scale(ratio, ratio);
ctx.drawImage(myImage, - myImage.width/(2*ratio), - myImage.width/(2*ratio) ) ;
ctx.restore();

Rq : For clarity, i did not use Math.floor() on drawImage coordinates, but do it to save draw time in case your ratio (or your coordinates) are not integer.

My solution is to append a <div>(position:absolute) covering the canvas. It's not good if canvas has interactive.

本文标签： javascriptscrollfunction for canvas if canvas too bigStack Overflow