html5 - перетащите холст - PullRequest
Новая
       10

html5 - перетащите холст

6 голосов
/ 16 апреля 2011

У меня огромный HTML5 Canvas, и я хочу, чтобы он работал как карты Google: пользователь может перетаскивать его и видеть только небольшую его часть (размер экрана) все время.он отображает только ту часть, которую вы видите на экране.как мне это сделать?у тебя есть идея?

Ответы [ 2 ]

5 голосов
/ 16 апреля 2011

2 простых шага:

  • поместите холст внутри div контейнера с overflow:hidden
  • используйте любой метод, чтобы сделать ваш холст перетаскиваемым (я буду использовать jQuery UI)

Чтобы следовать моему методу, вам нужно перейти на веб-сайт jQuery UI и загрузить любую версию пользовательского интерфейса jQuery (вы можете создать пользовательскую версию, состоящую только из UI Core и Draggable Interaction для этого примера. )

Распакуйте файл .zip и переместите папку 'js' в каталог вашей страницы.

Включите файлы .js, содержащиеся в папке, на вашу страницу.

Поместите следующий код между <head></head> -tags, чтобы сделать ваш холст перетаскиваемым: 

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

Вот пример: 

<!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>

Надеюсь, ты пойдешь.

примечание: это просто базовый пример. Это все еще нуждается в некотором редактировании. Например, пользователь может полностью перетащить холст из области просмотра (возможно, ограничение Canvas элементом div может помочь?). Но это должно быть хорошей отправной точкой.

1 голос
/ 05 декабря 2012

Я бы использовал два холста. Держите ваш огромный исходный холст скрытым и копируйте его части на второй меньший видимый холст. Вот мое быстро взломанное доказательство концепции: 

<!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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...