mehrere img im canvas bewegen

rernanded

Erfahrenes Mitglied
Hi
brauche eine Lösung um das img im canvas (2. Skript unten) bewegen zu können.
So wie ich das img im 1. Skript oben (ohne canvas) bewegen kann.

Moni

HTML:
<html>
<head>

<script type="text/javascript" language="JavaScript">

var ie=document.all;
var xxx=document.getElementById && !document.all;
var verschieben=false;
var x,y;
var dobj;

function movemouse(e)
{
  if (verschieben)
  {
  dobj.style.left = xxx ? tx + e.clientX - x : tx + event.clientX - x;
  dobj.style.top  = xxx ? ty + e.clientY - y : ty + event.clientY - y;
  return false;
  }
}

function selectmouse(e)
{
  var fobj  = xxx ? e.target : event.srcElement;
  var topelement = xxx ? "HTML" : "BODY";
  while (fobj.tagName != topelement && fobj.className != "dragme")
  {
  fobj = xxx ? fobj.parentNode : fobj.parentElement;
  }
  if (fobj.className=="dragme")
  {
  verschieben = true;
  dobj = fobj;
  tx = parseInt(dobj.style.left+0);
  ty = parseInt(dobj.style.top+0);
  x = xxx ? e.clientX : event.clientX;
  y = xxx ? e.clientY : event.clientY;
  document.onmousemove=movemouse;
  return false;
  }
}

document.onmousedown=selectmouse;
document.onmouseup=new Function("verschieben=false");

</script>

<style type="text/css">
<!--
.dragme{
position:relative;
cursor:pointer;
}
-->
</style>

</head>
<body>

<div>
<img class="dragme" src="drag.jpg" width="auto" height="300" border="0">
</div>



</body>
</html>
HTML:
<script>
window.onload = function() {
var canvas = document.getElementById("123canvas");
var context = canvas.getContext("2d");
var img = new Image();
img.src= "drag.jpg";
context.drawImage(img,10,10);
}
</script>

<canvas id="123canvas" width="1230" height="789">no canvas</canvas>
 
Zuletzt bearbeitet:
Hi
habe Lösung gefunden, brauche jetzt nur noch einen Tipp wie ich mehrere img in das canvas bekomme und bewegen kann.

HTML:
<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>

<style>
  body{ background-color: ivory; padding:10px;}
  #canvas{border:1px solid red;}
</style>

<script>
$(function(){

  var canvas=document.getElementById("canvas");
  var ctx=canvas.getContext("2d");

  var canvasOffset=$("#canvas").offset();
  var offsetX=canvasOffset.left;
  var offsetY=canvasOffset.top;

  var startX;
  var startY;
  var isDown=false;


  var pi2=Math.PI*2;
  var resizerRadius=8;
  var rr=resizerRadius*resizerRadius;
  var draggingResizer={x:0,y:0};
  var imageX=50;
  var imageY=50;
  var imageWidth,imageHeight,imageRight,imageBottom;
  var draggingImage=false;
  var startX;
  var startY;



  var img=new Image();
  img.onload=function(){
  imageWidth=img.width;
  imageHeight=img.height;
  imageRight=imageX+imageWidth;
  imageBottom=imageY+imageHeight
  draw(true,false);
  }
                           img.src="move-img.jpg";
                       

  function draw(withAnchors,withBorders){

  // clear the canvas
  ctx.clearRect(0,0,canvas.width,canvas.height);

  // draw the image
  ctx.drawImage(img,0,0,img.width,img.height,imageX,imageY,imageWidth,imageHeight);

  // optionally draw the draggable anchors
  if(withAnchors){
  drawDragAnchor(imageX,imageY);
  drawDragAnchor(imageRight,imageY);
  drawDragAnchor(imageRight,imageBottom);
  drawDragAnchor(imageX,imageBottom);
  }

  // optionally draw the connecting anchor lines
  if(withBorders){
  ctx.beginPath();
  ctx.moveTo(imageX,imageY);
  ctx.lineTo(imageRight,imageY);
  ctx.lineTo(imageRight,imageBottom);
  ctx.lineTo(imageX,imageBottom);
  ctx.closePath();
  ctx.stroke();
  }

  }

  function drawDragAnchor(x,y){
  ctx.beginPath();
  ctx.arc(x,y,resizerRadius,0,pi2,false);
  ctx.closePath();
  ctx.fill();
  }

  function anchorHitTest(x,y){

  var dx,dy;

  // top-left
  dx=x-imageX;
  dy=y-imageY;
  if(dx*dx+dy*dy<=rr){ return(0); }
  // top-right
  dx=x-imageRight;
  dy=y-imageY;
  if(dx*dx+dy*dy<=rr){ return(1); }
  // bottom-right
  dx=x-imageRight;
  dy=y-imageBottom;
  if(dx*dx+dy*dy<=rr){ return(2); }
  // bottom-left
  dx=x-imageX;
  dy=y-imageBottom;
  if(dx*dx+dy*dy<=rr){ return(3); }
  return(-1);

  }


  function hitImage(x,y){
  return(x>imageX && x<imageX+imageWidth && y>imageY && y<imageY+imageHeight);
  }


  function handleMouseDown(e){
  startX=parseInt(e.clientX-offsetX);
  startY=parseInt(e.clientY-offsetY);
  draggingResizer=anchorHitTest(startX,startY);
  draggingImage= draggingResizer<0 && hitImage(startX,startY);
  }

  function handleMouseUp(e){
  draggingResizer=-1;
  draggingImage=false;
  draw(true,false);
  }

  function handleMouseOut(e){
  handleMouseUp(e);
  }

  function handleMouseMove(e){

  if(draggingResizer>-1){

  mouseX=parseInt(e.clientX-offsetX);
  mouseY=parseInt(e.clientY-offsetY);

  // resize the image
  switch(draggingResizer){
  case 0: //top-left
  imageX=mouseX;
  imageWidth=imageRight-mouseX;
  imageY=mouseY;
  imageHeight=imageBottom-mouseY;
  break;
  case 1: //top-right
  imageY=mouseY;
  imageWidth=mouseX-imageX;
  imageHeight=imageBottom-mouseY;
  break;
  case 2: //bottom-right
  imageWidth=mouseX-imageX;
  imageHeight=mouseY-imageY;
  break;
  case 3: //bottom-left
  imageX=mouseX;
  imageWidth=imageRight-mouseX;
  imageHeight=mouseY-imageY;
  break;
  }

  // enforce minimum dimensions of 25x25
  if(imageWidth<25){imageWidth=25;}
  if(imageHeight<25){imageHeight=25;}

  // set the image right and bottom
  imageRight=imageX+imageWidth;
  imageBottom=imageY+imageHeight;

  // redraw the image with resizing anchors
  draw(true,true);

  }else if(draggingImage){

  imageClick=false;

  mouseX=parseInt(e.clientX-offsetX);
  mouseY=parseInt(e.clientY-offsetY);

  // move the image by the amount of the latest drag
  var dx=mouseX-startX;
  var dy=mouseY-startY;
  imageX+=dx;
  imageY+=dy;
  imageRight+=dx;
  imageBottom+=dy;
  // reset the startXY for next time
  startX=mouseX;
  startY=mouseY;

  // redraw the image with border
  draw(false,true);

  }


  }


  $("#canvas").mousedown(function(e){handleMouseDown(e);});
  $("#canvas").mousemove(function(e){handleMouseMove(e);});
  $("#canvas").mouseup(function(e){handleMouseUp(e);});
  $("#canvas").mouseout(function(e){handleMouseOut(e);});


}); // end $(function(){});
</script>

</head>

<body>
  <canvas id="canvas" width="1230" height="789">no canvas</canvas>
</body>
</html>
 
Zuletzt bearbeitet:
Hi,

das ist nicht so trivial wie das Verschieben von HTML-Elementen. Du musst dir die Positionen, sowie die Dimensionen der Bilder merken. Bei einem Klick in den Canvas musst du prüfen, ob der Event innerhalb eines Bildes stattgefunden hat. Anschliessend kannst du den mousemove-Event überwachen. Ein Beispiel siehst du hier: http://canvas.quaese.de/index.php?nav=13,79&doc_id=77

Vielleicht ist es einfacher, ein Framework einzusetzen, dass die erforderlichen Funktionalitäten bereits bietet: http://fabricjs.com/

Ciao
Quaese
 
Hallo Quaese,
beide Beispiele kenne ich, danke trotzdem. Mein Script mit nur einem image funktioniert ja bereits. Meine Frage ging also mehr dahin ob ich mit meinem Script statt einem Bild mehrere nutzen kann und wie kriege ich die "in den Code" hinein, zB mit einem array.
Moni
 
Hi,

da habe ich dich wohl missverstanden. Ich dachte, du möchtest Bilder innerhalb des Canvas verschieben.

Beim kurzen Überfliegen des Drag'n'Drop Scripts könnte es reichen, wenn du dem Canvas-Element die Klasse drageme gibst:
HTML:
<canvas class="dragme" id="123canvas" width="1230" height="789">no canvas</canvas>

Ciao
Quaese
 

Neue Beiträge

Zurück