Вынужден признать - я незнаю, как повернуть точку..
Поворачивать нужно относительно другой точки, что логично, с другой точкой можно определиться несколько позже.
Вот что я делаю:
Code:
N = 1 ; число на которое поврачиваем
x = 375 ; x точки
y = 121 ; y точки
x0 = 350 ; x точки поворота
y0 = 120 ; y точки поворота
; переводим в сферическую систему координат
r = sqrt( ( x - x0 ) * ( y - y0 ) )
aplha = arctan( ( x - x0 ) / ( y - y0 ) )
aplha = aplha + N ; делаем своё темное дело
; переводим обратно в декатовую систему координат
x = x0 + r * cos( aplha )
y = y0 + r * sin( aplha )
Вот так всё просто, но не работает, других вариантов повернуть я незнаю..
Кроме того смущает ситуация, когда y == y0, тогда выходит деление на нуль..
Непосредственно JavaScript'ик, которым я это всё дело тестил на вшивость:
Code:
<script type="text/javascript">
var x0 = 350, y0 = 120;
function gen(){
var i, el, data = [
[ 375, 121 ],
[ 383, 125 ],
[ 392, 133 ],
[ 387, 143 ],
[ 364, 138 ],
[ 371, 144 ],
[ 381, 151 ],
[ 356, 146 ],
[ 351, 154 ],
[ 360, 161 ],
[ 368, 167 ]
];
for( i = 0; i < 11; i++ ){
el = document.createElement( "DIV" );
document.body.appendChild( el );
el.id = "point_" + i;
el.style.position = "absolute";
el.style.left = data[ i ][ 0 ];
el.style.top = data[ i ][ 1 ];
el.innerHTML = "°";
el = document.createElement( "DIV" );
document.getElementById( "dat" ).appendChild( el );
el.innerHTML = "Point " + ( i + 1 ) + ": " + data[ i ][ 0 ] + ", " + data[ i ][ 1 ];
el.id = "info_" + i;
}
}
function getX( obj ){
var ret = obj.style.left;
return Number( ret.substring( 0, ret.length -2 ) );
}
function getY( obj ){
var ret = obj.style.top;
return Number( ret.substring( 0, ret.length -2 ) );
}
function rotate( aplhaN ){
var i, r, el, x, y, aplha;
for( i = 0; i < 11; i++ ){
el = document.getElementById( "point_" + i );
x = getX( el );
y = getY( el );
r = Math.sqrt( ( x - x0 ) * ( y - y0 ) );
aplha = Math.atan( ( x - x0 ) / ( y - y0 ) );
aplha += aplhaN ; // do rotate
x = Math.round( x0 + r * Math.cos( aplha ) );
y = Math.round( y0 + r * Math.sin( aplha ) );
el.style.left = x;
el.style.top = y;
document.getElementById( "info_" + i ).innerHTML = "Point " + ( i + 1 ) + ": " + x + ", " + y;
}
}
</script>
<button onclick="rotate( +1 )"><<< Rotate Left --</button>
<button onclick="rotate( -1 )">-- Rotate Right >>></button>
<br />
<div id="dat">
</div>
<script type="text/javascript">
gen();
</script>
Простое втыкание в .html-файл даёт быстренько понять - что-то тут не так.
Есть идеи?)