画像の回転（ボタンで制御）

解決済

質問者：uder1
質問日時：2008/03/01 22:02
回答数：1件

何も解っていなくてすいません。画像を回転したいのですが、STOPしてからSTARTボタンを押すと画像の位置がカクンと下のほうにずれてしまいます。下のコードもサンプルから引用したものにボタンで制御できないものかと付け足しただけで今ひとつ理解できていないかも知れません。こんな初心者ですが宜しくお願いします。
<link rel=stylesheet type="text/css" href="../css/style.css">
<script language="JavaScript"></script>
</head>
<body>
<object id=sample
style="position:absolute; width:200px; height:200px;"
classid="clsid:b6ffc24c-7e13-11d0-9b47-00c04fc2f51d">
</object>
<img src="image/img.jpg" id=img1 style="filter:Redirect();">
<script language="JavaScript">

</script>
<form><input type="button" value="START" onclick="myStart()"></form>
<form><input type="button" value="Stop" onclick="myStop()"></form>

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (1件)

ベストアンサー優先
最新から表示
回答順に表示

No.1ベストアンサー

回答者： taloo
回答日時：2008/03/02 04:27

このフィルターで回転させたことがないので推測ですが、

（使ったのはprogid:DXImageTransform.Microsoft.Matrix()）
回転の中心点が画像の左上とかになってませんか？
（テーブルの上にコピー用紙を置いて、左上を手で抑えて（その点を基準にして）回転させてみてください。
そんな感じに移動していたら、回転の中心点が原因です。）

もしそうなら、
フィルターで回転の中心点を変更できるなら、それを画像の(幅/2、高さ/2)の位置を中心点にしてください。

回転の中心点を変更できなければ、
回転させた角度の分だけx方向、y方向に移動させなければなりません。
回転後の矩形の最左端から矩形の中心までの距離を移動、、、なんですが、、、すみません。説明ヘタです。
三角関数とか、その辺の高校数学を思い出してください。
style="position:absolute"にしてtop、leftを変更するか、margin-top、margin-leftで調整してください。

先のコピー用紙の例で言うと、左上を抑えながら回転させた後、
コピー用紙の最左端から中心までの距離の分だけ移動させると、コピー用紙の中心で回転した時と同じになります。