Google Groups no longer supports new Usenet posts or subscriptions. Historical content remains viewable.
Dismiss

Jeg kan flytte men ikke rotere et billede med javascript. Er det muligt at rotere billedet?

4 views
Skip to first unread message

Michael

unread,
Feb 5, 2012, 6:48:03 AM2/5/12
to
Jeg kan flytte et billede rundt på min webside, men vil også gerne
kunne rotere det. Har nogen en idé?
Eks. http://www.opgavekassen.dk/testafvinkelmaaler.asp
Det skal lige siges, at jeg ikke kender meget til javascript.

<script type="text/javascript">

/***********************************************
* Drag and Drop Script: © Dynamic Drive (http://www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit http://www.dynamicdrive.com/ for this script and 100s more.
***********************************************/

var dragobject={
z: 0, x: 0, y: 0, offsetx : null, offsety : null, targetobj : null,
dragapproved : 0,
initialize:function(){
document.onmousedown=this.drag
document.onmouseup=function(){this.dragapproved=0}
},
drag:function(e){
var evtobj=window.event? window.event : e
this.targetobj=window.event? event.srcElement : e.target
if (this.targetobj.className=="drag"){
this.dragapproved=1
if (isNaN(parseInt(this.targetobj.style.left)))
{this.targetobj.style.left=0}
if (isNaN(parseInt(this.targetobj.style.top)))
{this.targetobj.style.top=0}
this.offsetx=parseInt(this.targetobj.style.left)
this.offsety=parseInt(this.targetobj.style.top)
this.x=evtobj.clientX
this.y=evtobj.clientY
if (evtobj.preventDefault)
evtobj.preventDefault()
document.onmousemove=dragobject.moveit
}
},
moveit:function(e){
var evtobj=window.event? window.event : e
if (this.dragapproved==1){
this.targetobj.style.left=this.offsetx+evtobj.clientX-this.x+"px"
this.targetobj.style.top=this.offsety+evtobj.clientY-this.y+"px"
return false
}
}
}

dragobject.initialize()

</script>

Michael

unread,
Feb 7, 2012, 1:04:16 PM2/7/12
to
On 5 Feb., 12:48, Michael <bogkas...@gmail.com> wrote:
> Jeg kan flytte et billede rundt på min webside, men vil også gerne
> kunne rotere det. Har nogen en idé?
> Eks.http://www.opgavekassen.dk/testafvinkelmaaler.asp
> Det skal lige siges, at jeg ikke kender meget til javascript.
>
Et lidt hjælpeløst forsøg
http://www.opgavekassen.dk/testvinkelmaaler4.asp

Birger Sørensen

unread,
Feb 7, 2012, 2:26:41 PM2/7/12
to
Michael udtrykte præcist:
HTML og XHTML er bygget af firkantede kasser, og der er derfor ikke
mulighed for at rotere billeder, eller lægge dem på skrå.
Muligvis kan det lade sig gøre i HTML 5 - om det så er implementeret,
og i hvilke browsere, er en anden sag.
Jeg syntes ikke dit forsøg er så hjælpeløst endda.. (Firkanten til at
måle på, behøver vel kun være der een gang, og den skal måske flytte
ind på siden - og så mangler alle billeder angivelse af en alt tekst).
Eneste løsning jeg lige kan se, er at have flere billeder, med
vinkelmåleren roteret - mulighed for at vælge at rotere den (kan evt
gøres ved at vælge retning for grundlinien ud fra centrum af
vinkelmåleren, eller indtastning af vinkel) - valget kan så bruges til
at vælge et alternativt billede.

Birger

--
http://varmeretter.dk - billig, sund og hurtig mad
http://skippersevent.dk


Michael

unread,
Feb 8, 2012, 1:13:41 AM2/8/12
to
Tak for din respons.

Jeg prøvede at kombinere java med lidt css
Her er kun brugt et billede.

http://www.opgavekassen.dk/vinkelmaalertest5.asp

Birger Sørensen

unread,
Feb 8, 2012, 3:41:06 AM2/8/12
to
Michael skrev:
Vinkelmåleren roterer så eller ikke i FF..
Der findes forkellige billedbehandling i forskellige scriptsprog, som
sikkert giver forskellig kvalitet.
Måske kan det lade sig gøre med SVG? (Kender det ikke - men der er
personer her der gør).

Michael

unread,
Feb 8, 2012, 8:45:12 AM2/8/12
to

> Vinkelmåleren roterer så eller ikke i FF..
> Der findes forkellige billedbehandling i forskellige scriptsprog, som
> sikkert giver forskellig kvalitet.
> Måske kan det lade sig gøre med SVG? (Kender det ikke - men der er
> personer her der gør).
>
> Birger
ØV, virker åbenbart kun i Chrome.
Rotere heller ikke i IE.

Jeg har brugt følgende:

<style type="text/css">
.drag{
display: block;
-webkit-transform:rotate(<%= Request.QueryString("inputbox") %>deg);
position:relative;
cursor:hand;
z-index: 100;
}
</style>
function MM_callJS(jsStr) { //v2.0
return eval(jsStr)
}
</script>
</head>

<body>

<table width="100%">
<tr>
<td>&nbsp;</td>
<td align="center"><img src="vinkelmaaler360grader.png"
width="483" height="470" class="drag" /><img
src="firkant1paropgave.png" width="190" height="135" /></td>
<td>&nbsp;</td>
</tr>
</table>

<form name="myForm" action="?grader=" method="get">
<input name="inputbox" type="hidden" value="<%=
Request.QueryString("inputbox") %>">
<input type="submit" onclick="MM_callJS('takeTen()')" value="Drej
vinkelmåleren 10 grad mod uret" />

<input type="submit" onclick="MM_callJS('takeOne()')" value="Drej
vinkelmåleren 1 grad mod uret" />

<input type="submit" onclick="MM_callJS('addOne()')" value="Drej
vinkelmåleren 1 grad med uret" />

<input type="submit" onclick="MM_callJS('addTen()')" value="Drej
vinkelmåleren 10 grad med uret" />

</form>

<script type="text/javascript">
addOne = function(){ document.myForm.inputbox.value =
document.myForm.inputbox.value*1 + 1 ; }
addTen = function(){ document.myForm.inputbox.value =
document.myForm.inputbox.value*1 + 10 ; }
takeTen = function(){ document.myForm.inputbox.value =
document.myForm.inputbox.value*1 - 10 ; }
takeOne = function(){ document.myForm.inputbox.value =
document.myForm.inputbox.value*1 - 1 ; }
</script>

Martin Larsen

unread,
Feb 8, 2012, 8:47:03 AM2/8/12
to
Birger Sørensen wrote:

> Måske kan det lade sig gøre med SVG? (Kender det ikke - men der er
> personer her der gør).

Ja, det kan gøres i SVG. Der findes et fantastisk javascript-bibliotek
der hedder Raphaël som giver fantastiske muligheder, se denne demo:

http://raphaeljs.com/image-rotation.html

Der findes også et jQuery-plugin til SVG, men umiddelbart tror jeg at
Raphaël er lettere at gå til.

Martin
0 new messages