J'ai un énorme HTML5 Canvas, et je veux qu'il fonctionne comme google maps: l'utilisateur peut le faire glisser et ne voir qu'une petite partie de celui-ci (la taille de l'écran) tout le temps. il rend seulement la partie que vous pouvez voir sur l'écran. comment puis-je le faire? Avez-vous une idée?html5 - faites glisser une toile
Répondre
2 étapes simples:
- placer la toile dans un conteneur
div
avecoverflow:hidden
- utiliser toute méthode pour rendre votre toile draggable (je vais utiliser jQuery UI)
Pour suivez ma méthode, vous devez aller sur le site Web jQuery UI et télécharger une version de l'interface utilisateur jQuery (vous pouvez créer une version personnalisée composée uniquement de l'interface utilisateur Core and Drag gable Interaction pour cet exemple.)
Déballez le fichier .zip et déplacez le dossier 'js' vers le répertoire de votre page.
Inlcude les fichiers .js contenus dans le dossier dans votre page.
Placez le code suivant entre vos <head></head>
-tags pour obtenir votre toile draggable:
<script type="text/javacript">
$(function() {
$("#CanvasID").draggable();
});
</script>
Voici un exemple:
<!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 que vous allez.
note: Ceci est juste un exemple de base. Cela nécessitera encore quelques modifications. Par exemple, l'utilisateur peut faire glisser la toile totalement hors de la fenêtre (peut-être contraindre le canevas à la div peut faire l'affaire?). Mais cela devrait être un bon point de départ.
Je voudrais utiliser deux toiles. Gardez votre canevas source caché et copiez-en des parties sur un second canevas plus petit. Voici ma preuve de concept rapidement hacked-up:
<!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>
- 1. HTML5 faites glisser et copier?
- 2. Toile Glisser-Déposer en HTML5
- 3. HTML5 toile cliquer et faire glisser
- 4. comment utiliser html5 toile glisser sur android?
- 5. HTML5 Toile - glisser le texte sur la toile Problème
- 6. Changer le curseur sur HTML5 Toile lorsque vous faites glisser la souris
- 7. Faites glisser et déposez la fonctionnalité à l'intérieur de la toile en utilisant HTML5
- 8. HTML5 glisser et déposer plusieurs images d'une toile à une autre toile
- 9. html5 faites glisser et déposez le mauvais mime?
- 10. KineticJS et HTML5 - Faites glisser ne fonctionne pas
- 11. Plusieurs textes en toile HTML5 avec glisser-déposer
- 12. Dojo: faites glisser et déposez Arrêter Faites glisser
- 13. "googlemaps" glisser avec canvas html5
- 14. Ajout de texte Outil, faites glisser, déposez et redimensionnez sur le canevas Html5
- 15. Faites glisser dans jQuery
- 16. objet Faites glisser verticalement
- 17. Raphael faites glisser l'ensemble
- 18. HTML5 Toile, texte et JavaScript
- 19. Faites glisser plusieurs images dans une toile en appuyant sur android
- 20. Html5 Toile overlay
- 21. multiple toile HTML5 superposant
- 22. Faites glisser une ligne dynamique dans winform
- 23. Faites glisser une image dans XNA
- 24. Faites glisser une vue à partir écran
- 25. Faites glisser une vue par programmation
- 26. html5 question de toile
- 27. HTML5 Toile, GUI
- 28. Toile HTML5 drawImage()
- 29. HTML5 Toile animation clearRect
- 30. bords doux html5 toile
Je suis désolé j'ai eu tort. Votre question n'était pas de savoir comment l'obtenir à l'intérieur d'un écran mais comment rendre uniquement la partie de la toile qui se trouve actuellement à l'intérieur de l'écran. Eh bien, je ne sais pas comment faire ça. Pardon. – fruitbooter
+1 pour être honnête! –