html5 - 拖动画布 - 源码之家

问题描述：

我有一个巨大的HTML5画布，我希望它能像谷歌地图一样工作：用户可以一直拖动它并只看到它的一小部分（屏幕大小）。它只呈现你可以在屏幕上看到的部分。我该怎么办？你有好主意吗？html5 - 拖动画布

答

2个简单的步骤：

地方div容器内的画布overflow:hidden
使用任何方法，使你的画布拖动（我将使用jQuery UI）

要请按照我的方法进入jQuery UI网站并下载任何版本的jQuery UI（您可以创建仅包含UI Core和Drag的自定义版本gable Interaction for this example。）

解包.zip文件并将'js'文件夹移动到您的页面目录。

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

将您<head></head>标签都有效的下面的代码获取你的画布拖动：

<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可能会有诀窍？）。但这应该是一个很好的起点。

对不起，我弄错了。你的问题不是如何让它在屏幕内，而是如何渲染当前在屏幕内的画布部分。那么，我不知道该怎么做。抱歉。 – fruitbooter 2011-04-16 13:37:16

+1诚实！ – 2011-04-17 14:29:11

答

我会使用两个画布。保持您的巨大源画布隐藏并将其部分复制到第二个较小的可见画布。这里是我的快速黑客验证概念：

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

html5 - 拖动画布

相关推荐