html5 - 拖動畫布

我有一個巨大的HTML5畫布，我希望它能像谷歌地圖一樣工作：用戶可以一直拖動它並只看到它的一小部分（屏幕大小）。它只呈現你可以在屏幕上看到的部分。我該怎麼辦？你有好主意嗎？html5 - 拖動畫布

來源

2011-04-16 Amit

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可能會有訣竅？）。但這應該是一個很好的起點。

來源

2011-04-16 13:26:12 fruitbooter

對不起，我弄錯了。你的問題不是如何讓它在屏幕內，而是如何渲染當前在屏幕內的畫布部分。那麼，我不知道該怎麼做。抱歉。 – 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>

來源

2012-12-05 11:13:24 DaveAlden

html5 - 拖動畫布

回答

相關問題