HTML5 Canvas:

Question

Bir HTML5 Canvas App gelişmekte ve oklar, rectanges ve tuval üzerinde çizmek gereken diğer şekillerin konumunu tanımlayan bir xml dosyası okuma içerir döndürüldüğünde bir x y noktayı hesaplama. XML düzeni

Örnek:

nesne sol (başka bir nokta etrafında döndürülmektedir (P dönüşten sonra nesnenin yeni pozisyon olarak adlandırılır) nokta konumunun hesaplanması içerir döndürüldüğünde

<arrow left="10" top="20" width="100" height="200" rotation="-40" background-color="red"/> 
<rect left="10" top="20" width="100" height="200" rotation="300" background-color="red"/> 

, üst). Ben bu nokta P hesaplamak için kullanabileceğiniz bir genel fonksiyon/formülü ile gelip çalışılıyor ama benim Matematik kullandığım anlamına ben ne yay/tanjant formülü tespit edemez biraz zayıf & olduğunu.

Pozitif & negatif olabilecek rotasyonlar için P noktasını hesaplamak için kullanabileceğim bir formül geliştirmeme yardımcı olabilir misiniz?

Yukarıdaki örnekte

: alanına (14.446) bırakılmıştır, üst nokta & noktası (226.496) döndürüldüğünde değil nesnenin orta nokta noktası = (sol + genişlik/2 yüzden , üst + yükseklik/2) ve mavi nokta döndürüldüğünde orta noktadır. Bu hattın uzunluğu mavi noktası & arasındaki hattı ile aynı olur: btw - I (14.446) & (226.496) değil, mavi noktalı x, y konumu hesaplamak için nasıl noktaları arasındaki hattın uzunluğu calulate için nasıl (14, 446)

len = sqrt((496-446)^2 + (226-14)^2); 
    = 227.56; 

Answer 1

Bu oldukça basittir. Teta koordinatları açısı için koordinat sistemine (x, y) 'nin başlangıç ​​noktasında rotasyonda Yani

x' = x * cos(Theta) - y * sin(Theta); 
y' = x * sin(Theta) + y * cos(Theta); 

olarak değişiyor, gereken bütün sahip noktalarından birine dönme noktası çevirmektir. Daha basit bir şekilde yazalım: (x1, y1) = (14,446) ve (x2, y2) = (226,496). Etrafında "x2, y2" (x1, y1) döndürmeye çalışıyorsunuz. (X1, y1) kaynağındaki yeni bir koordinat sisteminde (dx2, dy2) hesaplayın.

(dx2,dy2) = (x2-x1,y2-y1); 

Şimdi (pozitif açılar saatin tersi olan) döndürmek:

dx2' = dx2 * cos(165 Degrees) - dy2 * sin(165 Degrees); 
dy2' = dx2 * sin(165 Degrees) + dy2 * cos(165 Degrees); 

Son adım geri orijinaline (x1, y1) de kökenli noktanın koordinatlarını tercüme etmektir (0,0);

x2' = dx2' + x1; 
y2' = dy2' + y1; 

ps: .. bu http://en.wikipedia.org/wiki/Rotation_matrix :) ve farklı programlama dillerinde en trigonometrik fonksiyonlar radyan boğuşuyoruz unutmayın ayrıca

pps okuyun: ve ben seni korkuttum vermedi umut - ask Eğer sorunuz varsa.

Answer 2

Sana denklem aşağıdaki sistem ile bu rotasyon pozisyonunu hesaplamak gerekir sizin durumunuzda düşünüyorum:

x = R * Math.cos(angle - angle0); 
y = R * Math.sin(angle - angle0); 
angle = deg * Math.PI/180; 
angle0 = Math.atan(y0/x0); 

R (sizin örnekte len) yor yarıçapı vektör uzunluğu.
deg derece açı yapıyorsunuz, i.g 120 °
x ve y senin aradığınız son konumun koordinatları.
angle (rad değil, grad olarak) gerçek dönüş açısıdır.
angle0 açının noktası, X-ekseni için Relativly için döndürülmüştür olup. Biz Math.atan kullanarak ön hesaplama gerekir.

test vermedim. Öyleyse dene. Ancak fikir aynıdır - trigonometrik fonksiyonlardan faydalanın.

Answer 3

koordinatlar hesaplama örneği: Dice roll