html5 - drag a canvas_问答_开发者_运维开发者技术经验分享

I have a huge HTML5 Canvas, and I want it to work like google maps: the user can drag it and see only a sma开发者_如何学Cll part of it (the screen's size) all the time. it renders only the part you can see on the screen. how can I do it? do you have an idea?

2 simple steps:

place the canvas inside a div container with overflow:hidden
use any method to make your canvas draggable (I will use jQuery UI)

To follow my method you need to go to the jQuery UI website and download any version of the jQuery UI (you can create a custom version only consisting of the UI Core and Draggable Interaction for this example.)

Unpack the .zip file and move the 'js' folder to your page directory.

Inlcude the .js files contained in the folder into your page.

Place the following code between your <head></head>-tags to get your canvas draggable:

<script type="text/javacript">
$(function() {
    $("#CanvasID").draggable();
});
</script>

Here's an example:

<!DOCTYPE>
<html>
<head>
<title>canvas test</title>

<script type="text/javascript" src="js/jquery-1.5.1.min.js"></script> <!-- include the jQuery framework -->
<script type="text/javascript" src="js/jquery-ui-1.8.11.custom.min.js"></script> <!-- include JQuery UI -->

<style type="text/css">
#box{
width: 400px;
height: 400px;
border:5px solid black;
overflow:hidden;
position:relative;
} /* Just some basic styling for demonstration purpose */
</style>

<script type="text/javascript">
window.onload = function() {
    var drawingCanvas = document.getElementById('myDrawing');
    // Check the element is in the DOM and the browser supports canvas
    if(drawingCanvas.getContext) {
        // Initaliase a 2-dimensional drawing context
        var context = drawingCanvas.getContext('2d');
        context.strokeStyle = "#000000";
        context.fillStyle = "#FFFF00";
        context.beginPath();
        context.arc(200,200,200,0,Math.PI*2,true);
        context.closePath();
        context.stroke();
        context.fill();
    } 
        // just a simple canvas
    $(function() {
        $( "#myDrawing" ).draggable();
    });
        // make the canvas draggable
}
</script> 

</head>
<body>

<div id="box">
<canvas id="myDrawing" width="800" height="800">
<p>Your browser doesn't support canvas.</p>
</canvas>
</div>

</body>
</html>

Hope this get's you going.

note: This is just a basic example. This will still need some editing. For example the user can drag the canvas totally out of the viewport (perhaps constraining the Canvas to the div may do the trick?). But this should be a good starting point.

I would use two canvases. Keep your huge source canvas hidden and copy portions of it to a second smaller visible canvas. Here's my quickly hacked-up proof of concept:

<!DOCTYPE HTML>
<html>
<head>
    <title>canvas scroll</title>

    <style type="text/css">
        body {
            margin: 0;
            padding: 0;
            overflow: hidden;
        }

        #source {
            display: none;
        }

        #coords{
            position: absolute;
            top: 10px;
            left: 10px;
            z-index: 2;             
        }
        #coords p{
            background: #fff;
        }

    </style>

    <script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>

    <script type="text/javascript">
        var $window; 
        var img;
        var $source; var source; var sourceContext;
        var $target; var target; var targetContext;
        var scroll = {
            x : 0,
            y : 0
        };
        var scrollMax;


        function init() {
            // Get DOM elements
            $window = $(window);
            $source = $('canvas#source');
            source = $source[0];
            sourceContext = source.getContext("2d");
            $target = $('canvas#target');
            target = $target[0];
            targetContext = target.getContext("2d");

            // Draw something in source canvas
            sourceContext.rect(0, 0, source.width, source.height);
            var grd = sourceContext.createLinearGradient(0, 0, source.width, source.height);
            grd.addColorStop(0, '#800080');
            grd.addColorStop(0.125, '#4B0082');
            grd.addColorStop(0.25, '#0000FF');
            grd.addColorStop(0.325, '#008000');
            grd.addColorStop(0.5, '#FFFF00');
            grd.addColorStop(0.625, '#FFA500');
            grd.addColorStop(0.75, '#FF0000');
            grd.addColorStop(0.825, '#800080');                

            sourceContext.fillStyle = grd;
            sourceContext.fill();

            /*
             * Setup drag listening for target canvas to scroll over source canvas
             */                 
            function onDragging(event){
                var delta = {
                    left : (event.clientX - event.data.lastCoord.left),
                    top : (event.clientY - event.data.lastCoord.top)
                };

                var dx = scroll.x - delta.left;
                if (dx < 0) {
                    scroll.x = 0;
                } else if (dx > scrollMax.x) {
                    scroll.x = scrollMax.x;
                } else {
                    scroll.x = dx;
                }

                var dy = scroll.y - delta.top;
                if (dy < 0) {
                    scroll.y = 0;
                } else if (dy > scrollMax.y) {
                    scroll.y = scrollMax.y;
                } else {
                    scroll.y = dy;
                }

                event.data.lastCoord = {
                    left : event.clientX,
                    top : event.clientY
                }

                draw();
            }

            function onDragEnd(){
                $(document).unbind("mousemove", onDragging);
                $(document).unbind("mouseup", onDragEnd);
            }

            function onDragStart(event){
                event.data = {
                    lastCoord:{
                        left : event.clientX,
                        top : event.clientY
                    }
                };
                $(document).bind("mouseup", event.data, onDragEnd);
                $(document).bind("mousemove", event.data, onDragging);
            }               
            $target.bind('mousedown', onDragStart);

            /*
             * Draw initial view of source canvas onto target canvas
             */ 
            $window.resize(draw);
            $window.trigger("resize");
        }

        function draw() {
            target.width = $window.width();
            target.height = $window.height();

            if(!scrollMax){
                scrollMax = {
                    x: source.width - target.width,
                    y: source.height - target.height
                }
            }

            targetContext.drawImage(source, scroll.x, scroll.y, target.width, target.height, 0, 0, target.width, target.height);
            $('#x').html(scroll.x);
            $('#y').html(scroll.y);
        }


        $(document).ready(init);
    </script>

</head>
<body>
    <div id="coords">
        <p>Drag the gradient with the mouse</p>
        <p>x: <span id="x"></span></p>
        <p>y: <span id="y"></span></p>
    </div>
    <canvas id="source" width="4000" height="4000"></canvas>

    <canvas id="target"></canvas>

</body>
</html>