We have answer of your question!

100% solved queries, no empty question

Question: How to draw something scrollable?


0

Advertisement


I have these 14 rows that are rectangle ; I want to show only 5 number of rows and let user to scroll to can see all 14 rows.

enter image description here

for(i=0;i<(canvas.height-200)/RECT_H;i++){
    drawRecord(Math.floor((Math.random()*10000)+1),x,y);
    y+=RECT_H;
}
function drawRecord(number,x,y){
    context.strokeRect(x, y, RECT_W, RECT_H);
    context.strokeRect(x+RECT_W, y, RECT_W*2, RECT_H);
    context.font = 15 + 'px Lucida Sans';
    context.fillText(number, x-10*number.toString().length,y+RECT_H/1.5);
}

How can I implement this?

Question author Majid-rahimi | Source

Answer


1


Advertisement


Example of how to make the scrollable rows within the canvas element.

This is a javascript example, i used the mootools framework, but it can be easily changed for use of another framework. Use your mouse wheel over the canvas to scroll the rows. It would be good to create the knob also, for that create the ratio between the size of the table and the size of the canvas, and use that ratio to draw a rectangle, position of rectangle depends on the current top value of the table.

<canvas id="canvas" width="400" height="300"></canvas>
<script>
    var canvas = $('canvas');
    var context = canvas.getContext('2d');

    var RECT_H = 30;
    var RECT_W = 100;
    var TEXT_X = 50;

    var count = 14;     // number of rows 
    var y = 0;          // current top value of the table
    var numbers = [];   // numbers to display

    for ( var i=0; i<count; i++ ) {     // create array of numbers
        numbers[i] = Math.floor((Math.random()*10000)+1);
    }
    drawRecords();  // draw initial records

    function drawRecords() {
        for ( var i=0; i<count; i++ ) {
            var top = (i*RECT_H) + y;       // top value of the current row
            context.strokeRect( TEXT_X, top, RECT_W, RECT_H );
            context.strokeRect( TEXT_X+RECT_W, top, RECT_W*2, RECT_H );
            context.font = '15px Lucida Sans';
            context.fillText( numbers[i], TEXT_X-10*numbers[i].toString().length, top+RECT_H/1.5 );
        }
    }

    $('canvas').addEvent( 'mousewheel', function(e) {
        // calculate the current top value of the table based on the mousewheel event
        y = onMouseWheel( e, y, canvas.height - (count*RECT_H), 0, 10 );
        context.clearRect( 0, 0, canvas.width, canvas.height ); // clear canvas
        drawRecords();  // redraw canvas
    });

    function onMouseWheel( e, current_top, max, min, step ) {
        if ( max < min ) {
            e.preventDefault();     // prevents window to move
            if ( e.wheel > 0 ) return current_top + step < min ? current_top + step : min;
            else if ( e.wheel < 0 ) return current_top - step > max ? current_top - step : max;
        }
        return 0;
    }
</script>
Answer author Danijel

Advertisement


Tickanswer.com is providing the only single recommended solution of the question How to draw something scrollable? under the categories i.e javascript , html5 , canvas , drawing , . Our team of experts filter the best solution for you.

Related Search Queries:

how to draw a scroll banner ,

You may also add your answer!