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
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: