Fondamentalement ce que j'ai codé, c'est la possibilité de taper un mot dans une zone de texte. Lorsqu'un bouton est enfoncé pour le soumettre, ce mot est ensuite affiché sur la toile HTML5 afin que les gens puissent le voir. Ce que je veux faire maintenant, c'est avoir la possibilité de faire glisser ce mot autour du canevas HTML5. J'ai une légère difficulté à atteindre cela et je me demandais si quelqu'un pouvait m'aider avec ça s'il vous plaît? Voici mon code ce que j'ai fait jusqu'à présent:
4 Réponses :
Créer un div sur Toile et la positionner de manière à ce qu'il ne couvre que la zone que vous avez remplie de texte. Faites ce div draggetable . Sur la position DIV change de toile claire et redessinez le texte sur toile en fonction de la nouvelle position de div .
Vous devez répéter tous les éléments de remplissage lorsque la souris est en panne, effacez également l'écran avant chaque tirage au sort voici un jsfiddle
Oui, le clic et glisser fonctionne, mais la zone de texte n'est-elle pas là pour une raison. Comme je l'ai expliqué dans la principale question, vous tapez une pièce de texte dans la zone de texte, vous appuyez sur la touche et il doit soumettre le texte saisi et l'afficher sur la toile.
Texte de glisser répond en grande partie aux événements de la souris. strong> une démonstration: http : //jsfiddle.net/m1erickson/9xaga/ p> Créez d'abord des objets texte pour faire référence à p> à MouseDown strong> p> Itéréter par chaque objet texte et voir si la souris est à l'intérieur. P > en mouseMove strong> p> Modifier le texte sélectionné X, Y par la distance, la souris a été glissée: p> In mouseup The drag is over: Annotated Code : strong> p> 
p> <!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<style>
body{ background-color: ivory; }
#canvas{border:1px solid red;}
#theText{width:10em;}
</style>
<script>
$(function(){
// canvas related variables
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
// variables used to get mouse position on the canvas
var $canvas=$("#canvas");
var canvasOffset=$canvas.offset();
var offsetX=canvasOffset.left;
var offsetY=canvasOffset.top;
var scrollX=$canvas.scrollLeft();
var scrollY=$canvas.scrollTop();
// variables to save last mouse position
// used to see how far the user dragged the mouse
// and then move the text by that distance
var startX;
var startY;
// an array to hold text objects
var texts=[];
// this var will hold the index of the hit-selected text
var selectedText=-1;
// clear the canvas & redraw all texts
function draw(){
ctx.clearRect(0,0,canvas.width,canvas.height);
for(var i=0;i<texts.length;i++){
var text=texts[i];
ctx.fillText(text.text,text.x,text.y);
}
}
// test if x,y is inside the bounding box of texts[textIndex]
function textHittest(x,y,textIndex){
var text=texts[textIndex];
return(x>=text.x &&
x<=text.x+text.width &&
y>=text.y-text.height &&
y<=text.y);
}
// handle mousedown events
// iterate through texts[] and see if the user
// mousedown'ed on one of them
// If yes, set the selectedText to the index of that text
function handleMouseDown(e){
e.preventDefault();
startX=parseInt(e.clientX-offsetX);
startY=parseInt(e.clientY-offsetY);
// Put your mousedown stuff here
for(var i=0;i<texts.length;i++){
if(textHittest(startX,startY,i)){
selectedText=i;
}
}
}
// done dragging
function handleMouseUp(e){
e.preventDefault();
selectedText=-1;
}
// also done dragging
function handleMouseOut(e){
e.preventDefault();
selectedText=-1;
}
// handle mousemove events
// calc how far the mouse has been dragged since
// the last mousemove event and move the selected text
// by that distance
function handleMouseMove(e){
if(selectedText<0){return;}
e.preventDefault();
mouseX=parseInt(e.clientX-offsetX);
mouseY=parseInt(e.clientY-offsetY);
// Put your mousemove stuff here
var dx=mouseX-startX;
var dy=mouseY-startY;
startX=mouseX;
startY=mouseY;
var text=texts[selectedText];
text.x+=dx;
text.y+=dy;
draw();
}
// listen for mouse events
$("#canvas").mousedown(function(e){handleMouseDown(e);});
$("#canvas").mousemove(function(e){handleMouseMove(e);});
$("#canvas").mouseup(function(e){handleMouseUp(e);});
$("#canvas").mouseout(function(e){handleMouseOut(e);});
$("#submit").click(function(){
// calc the y coordinate for this text on the canvas
var y=texts.length*20+20;
// get the text from the input element
var text={text:$("#theText").val(),x:20,y:y};
// calc the size of this text for hit-testing purposes
ctx.font="16px verdana";
text.width=ctx.measureText(text.text).width;
text.height=16;
// put this new text in the texts array
texts.push(text);
// redraw everything
draw();
});
}); // end $(function(){});
</script>
</head>
<body>
<input id="theText" type="text">
<button id="submit">Draw text on canvas</button><br>
<canvas id="canvas" width=300 height=300></canvas>
</body>
</html>
// done dragging
function handleMouseUp(e){
e.preventDefault();
selectedText=-1;
}
S'il vous plaît voir ma réponse modifiée qui inclut maintenant le code pour récupérer du texte à partir d'un élément d'entrée et l'ajouter à Toile.
Je sais que ça fait 5 ans, mais votre violon ne fonctionne plus :)
Bien, je veux simplement souligner un problème dans la solution JSfiddle suivante par marke Le problème est que si votre page ne correspond pas à la fenêtre et est défilable si vous avez défilé. Votre page et maintenant vous faites glisser le texte, cela ne fonctionnera pas car l'événement de la souris renvoie la clienty qui ne pouvait pas calculer les coordonnées sauvegardées. reproduit en donnant une hauteur comme et faites glisser le texte après défilement.
Le lien Il n'y a pas de travail, vérifiez votre aperçu de la réponse et les pls corrigez-le
S'il vous plaît ajouter jfiddle ou show html
Le code exemple est annoté dans ce qui précède.