当前位置： 文江博客话题详情

html5 - 拖动画布

发布于 2024-11-01 21:44:01 字数 100 浏览 0 评论 0原文

我有一个巨大的 HTML5 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 small 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?

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（2）

孤君无依 2024-11-08 21:44:01

2 个简单步骤：

  • 将画布放入 div 容器中，并使用 overflow:hidden
  • 使用任何方法使画布可拖动（我将使用 jQuery UI ）

要遵循我的方法，您需要转到 jQuery UI 网站并下载任何版本的 jQuery UI（您可以创建一个自定义版本仅包含 UI 核心和可拖动交互对于本例。）

解压 .zip 文件并将“js”文件夹移动到页面目录。

将文件夹中包含的 .js 文件包含到您的页面中。

将以下代码放在 标签之间，以使画布可拖动：

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

希望这能让您继续前进。

注意：这只是一个基本示例。这仍然需要一些编辑。例如，用户可以将画布完全拖出视口（也许将画布限制在 div 上可以解决问题？）。但这应该是一个很好的起点。

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.

回复 原文
酒中人 2024-11-08 21:44:01

我会用两块画布。将巨大的源画布隐藏起来，并将其部分复制到第二个较小的可见画布上。这是我快速破解的概念证明：

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

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>
回复 原文
~没有更多了~

关于作者

筱果果

暂无简介

0 文章
0 评论
390 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

lorenzathorton8

文章 0 评论 0

Zero

文章 0 评论 0

萧瑟寒风

文章 0 评论 0

mylayout

文章 0 评论 0

tkewei

文章 0 评论 0

17818769742

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文