kordinat crop
Jeg har fundet det her:---
<script type="text/javascript">
var startPos = {x:0,y:0}
var endPos = {x:0,y:0}
var cropElmId = "cropDiv";
var cropActive = false;
function getPos(elm) {
for(var zx=zy=0;elm!=null;zx+=elm.offsetLeft,zy+=elm.offsetTop,elm=elm.offsetParent);
return {x:zx,y:zy}
}
function startCrop(e,elmId) {
e = (!e) ? event : e;
startPos.x = endPos.x = (typeof e.clientX == "number") ? e.clientX : e.pageX;
startPos.y = endPos.y = (typeof e.clientY == "number") ? e.clientY : e.pageY;
placeCropElm();
cropActive = true;
writePosition(elmId);
}
function moveCrop(e,elmId) {
if (cropActive) {
e = (!e) ? event : e;
endPos.x = (typeof e.clientX == "number") ? e.clientX : e.pageX;
endPos.y = (typeof e.clientY == "number") ? e.clientY : e.pageY;
placeCropElm();
writePosition(elmId);
}
}
function placeCropElm() {
cropElm = document.getElementById(cropElmId).style;
cropElm.left = Math.min(startPos.x,endPos.x)+"px";
cropElm.top = Math.min(startPos.y,endPos.y)+"px";
cropElm.width = Math.max(endPos.x-startPos.x,startPos.x-endPos.x)+"px";
cropElm.height = Math.max(endPos.y-startPos.y,startPos.y-endPos.y)+"px";
}
function endCrop(elmId) {
cropActive = false;
writePosition(elmId);
}
function writePosition(ID) {
frm = document.form1;
elmPos = getPos(document.getElementById(ID));
frm.x1.value = Math.min(startPos.x,endPos.x)-elmPos.x;
frm.y1.value = Math.min(startPos.y,endPos.y)-elmPos.x;
frm.x2.value = Math.max(startPos.x,endPos.x)-elmPos.y;
frm.y2.value = Math.max(startPos.y,endPos.y)-elmPos.y;
}
</script>
</head>
<body>
<div id="cropDiv" style="border:1px solid #000;background-color:#ddf;opacity:0.5;filter:alpha(opacity=50);;position:absolute;left:0px;top:0px" onclick="if (cropActive) {endCrop(this.id);} else {startCrop(event,'billede');}" onmousemove="moveCrop(event,'billede');"></div>
<img src="billede.png" id="billede" style="width:200px;height:300px;" onclick="if (cropActive) {endCrop(this.id);} else {startCrop(event,this.id);}" onmousemove="moveCrop(event,this.id);">
<form name="form1">
x1: <input type="text" name="x1"> - y1: <input type="text" name="y1"><br>
x2: <input type="text" name="x2"> - y2: <input type="text" name="y2">
</form>
</body>
</html>
---
Jeg ville gerne have lavet lidt ekstra ting på den...
Det div man tegner skal man kunne rykke rundt på.... Altså hvis jeg tegner en firkandt men ønsker at den skal lige til højre så kan jeg holde musseknappen inde og så flytte rundt på det tegnede divv...
