【发布时间】：2011-04-16 09:54:51
【问题描述】：
我有一个巨大的 HTML5 画布，我希望它像谷歌地图一样工作：用户可以一直拖动它并只看到它的一小部分（屏幕大小）。它只渲染您在屏幕上可以看到的部分。 我该怎么做？你有想法吗？
【问题讨论】：
标签： html canvas drag-and-drop
【发布时间】：2011-04-16 09:54:51
【问题描述】：
两个简单的步骤：
- 将画布放在带有
overflow:hidden的div容器中 - 使用任何方法使您的画布可拖动（我将使用 jQuery UI）
要按照我的方法，您需要访问jQuery UI 网站并下载任何版本的 jQuery UI（对于此示例，您可以创建仅包含 UI 核心和可拖动交互的自定义版本。）
解压 .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 可能会奏效？）。但这应该是一个很好的起点。
【讨论】：
-
很抱歉我弄错了。你的问题不是如何让它在屏幕内，而是如何只渲染当前在屏幕内的画布部分。好吧，我不知道该怎么做。对不起。
我会使用两个画布。隐藏您巨大的源画布并将其部分复制到第二个较小的可见画布。这是我快速破解的概念证明：
<!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>
【讨论】：