Jag försöker mig på att skapa en sida där man kan ladda upp en bild samt sen beskära den mm.
Det jag tänkte att ni skulle fixa åt mig :e är just funktionen med beskärningen, eller rättare sagt markeringen av det område man vill ha ut.
jag tänkte att det skulle fungera som så att man har en bild på sidan samt tar ett genomskinligt lager och på så sätt markerar det område man vill ha ut.
Skulle väldigt gärna även vilja att om man typ kunde förminska det övre lagret genom att dra i nedre högra hörnet.. proportionelt.
[RED: Fixat]
Jag kan nu inte ens sätta in min bild på sidan, om jag gör det kan
jag inte dra mitt lager på andra ställen än där det just är text i lagret. Hur lösa det?
[/RED: Fixat]
Hur kan jag förminska lagret proportionellt genom att dra i högra nedre hörnet? (Eller motsvarande)
Har jag med mig kod som är överflödig?
Nuvarande kod:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Untitled</title>
</head>
<body>
<script language="JavaScript" src="layerlib.js" type="text/JavaScript"></script>
<script language="JavaScript" src="stdiolib.js" type="text/JavaScript"></script>
<script language="JavaScript" type="text/JavaScript">
function savepos(){
document.form2.x.value=(getLayerX('foo'));
document.form2.y.value=(getLayerY('foo'));
document.form2.xx.value=(getLayerWidth('foo'));
document.form2.yy.value=(getLayerHeight('foo'));
}
function glue(layer){
offsetX=getMouseX()-getLayerX(layer);
offsetY=getMouseY()-getLayerY(layer);
currentLayer=layer;
setOnMousemove("moveit();");
}
function rubber(){
setOnMousemove("");
}
function moveit(){
moveLayerAbs(currentLayer,Math.min(Math.max(getMouseX()-offsetX,0),getClientWidth()-getLayerWidth('foo')),Math.min(Math.max(getMouseY()-offsetY,0),getClientHeight()-getLayerHeight('foo')))
}
function getLayerWidth(Id){
if (document.all){
return parseInt(document.all[Id].style.width);
} else if (document.layers){
return parseInt(document.layers[Id].width);
} else if (document.getElementById){
return parseInt(document.getElementById(Id).style.width);
}
}
function getLayerHeight(Id){
if (document.all){
return parseInt(document.all[Id].style.height);
} else if (document.layers){
return parseInt(document.layers[Id].height);
} else if (document.getElementById){
return parseInt(document.getElementById(Id).style.height);
}
}
</script>
<div
id="foo"
style="position:absolute;top:150px;left:150px;width:300px;height:300px;border:1px solid black; padding:5px;"
onMousedown="glue('foo');"
onMouseup="rubber();">
Move me!
</div>
<form name="form2">
X<input type="text" name="x">
Y<input type="text" name="y">
<br>
Bredd<input type="text" name="xx">
Höjd<input type="text" name="yy">
<input type="button" value="Sätt värden" onClick="savepos();">
</form>
</body>
</html>
Löste dragandet av lagret genom att sätta in en transparent bild. -Verkar fungera. (Kanske ska ha en halvt genomskinlig... jaja, det är överkurs i nuläget.)
Innan jag såg din variant har jag slagit mig in på en annan variant baserad på att "clippa" ett lager.
Styrningen av detta har jag nu löst med länkar, inte alls så kul som ditt förslag.
Är det nu någon som kanske kan ge mig någon hjäl på vägen att implentera scriptet ovanfär i min kod alt. kanske har ideer om hur hela min kod bör föändras.
Tycker onekligen att koden bara växer o växer kanske mycket i onödan?
(Iofs kommer flera av formulärsfälten med dess uträkningar vara överflödiga i slutändan.)
Nuvarande kod:
<script language="JavaScript" src="dynlayer.js"></script>
<script language="JavaScript" src="mouseevents.js"></script>
<script language="JavaScript" src="drag.js"></script>
<script language="JavaScript" type="text/JavaScript">
function init() {
// initialize DynLayers
foolager = new DynLayer("foo")
// for IE 5.0 must manually set the clip values again
if (is.ie5) foolager.clipInit(0,600,600,0)
// for other browsers it's not necessary because the layer in this example
// is clipped to defaults so I don't have to pass clip values
else foolager.clipInit()
// add the draggable layers to the drag object
drag.add(foolager)
drag.onDragMove = dragMove
initMouseEvents()
}
function dragMove(x,y) {
document.myform.layerx.value = this.obj.x
document.myform.layery.value = this.obj.y
formula();
}
function formula() {
document.myform.clipx.value = foolager.clipValues('t')
document.myform.clipy.value = foolager.clipValues('r')
document.myform.clipxx.value = foolager.clipValues('b')
document.myform.clipyy.value = foolager.clipValues('l')
document.myform.bredden.value = foolager.clipValues('b') - foolager.clipValues('t')
document.myform.hojden.value = foolager.clipValues('r') - foolager.clipValues('l')
document.myform.x1.value = parseInt(document.myform.layerx.value) - 200 + parseInt(foolager.clipValues('l'))
document.myform.y1.value = parseInt(document.myform.layery.value) + parseInt(foolager.clipValues('t'))
document.myform.x2.value = parseInt(document.myform.layerx.value) - 200 + parseInt(foolager.clipValues('r'))
document.myform.y2.value = parseInt(document.myform.layery.value) + parseInt(foolager.clipValues('b'))
document.myform.imgname.value = "front.jpg"
}
function timerrace(a,b,c,d) {
X=setInterval("foolager.clipBy("+a+","+b+","+c+","+d+");formula()",100)
}
</script>
<body bgcolor="#ffffff" onLoad="init()">
<a href="javascript:formula()" onmousedown="timerrace(0,-10,-10,0)" onmouseup="clearInterval(X)">-Höger</a>
<div id="foo" style="position:absolute;top:0px;left:200px;width:1000px;height:1000px;clip:rect(0px 600px 600px 0px); z-index: 2 ;">
<img src="transp.gif" name="transa" height="1000" widht="1000" style="filter:alpha(opacity=20);"></div>
<div id="bilden" style="position:absolute;top:0px;left:200px;width:500px;height:500px;"><img src="front.jpg"></div>
Jag får inte till det. Denna kod jag har är ju helt ok med JoHnsens script att kunna förstora/förminska lagret. Men mitt önskemål är då alltså att man även skall kunna förflytta det översta lagret över det undre. (Eg. ej utanför.) Samt att eg. skall det översta lagret endast kunna förstoras/förminskas proportionellt (mao alltid en kvadrat.)
