2011-01-16 21 views
7

X, y koordinatlarını çizmek için javascript'in bir yolu var mı?Bir dairenin içindeki noktaları çizmek için X, Y koordinatlarını kullanın

Aşağıdaki kod varsa, örneğin:

circleRadius = 100; 
    context.drawImage(img_elem, dx, dy, dw, dh); 

burada X bir kombinasyonunu bulmak için gereken, y değerleri, bir 100 piksel daire içinde düşer.

Teşekkürler! javascript için ne anlama ama

x = R*cos(theta) ve y = R*sin(theta) bir daire için kartezyen noktalarının ne

+3

grubu daire dışında düşecek _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _^^ 2 + y^2

cevap

6
  1. bir daire içinde, x^2 + y^2 = r^2 ile tanımlanır -100 ve 100
  2. arasında rastgele bir x seçmek senin büyüklük 100^2 = 10000
  3. Bu denklemden bu y^2 = 10000 - x^2'u alabilirsiniz, bu nedenle seçilen bir x ve y = +/-sqrt(10000 - x^2) noktaları, daireye yayılacaktır.
  4. noktasında bulunan iki koordinat arasında rastgele bir seçim yapın 3
  5. Başlıyorsunuz!

DÜZENLEME: JS:

var radius = 100; 
x = Math.random() * 2 * radius - radius; 
ylim = Math.sqrt(radius * radius - x * x); 
y = Math.random() * 2 * ylim - ylim; 

başka düzenleme:a jsFiddle Example

+0

Teşekkürler! mükemmel çalışıyor :) – Rigil

+1

Sadece biraz onunla oynamak: http://jsfiddle.net/YL6Bj/1/ - daha az seçenek olduğu gerçeğinden dolayı, noktaların x yönünde uç noktalarda kümelenme eğilimi olduğunu unutmayın Bu alanlarda y için. Çok fazla noktaya ihtiyacınız varsa, x koordinatlarının oluşturulmasında bir önyargı tanıtan düzeltmeniz gerekebilir. – nico

+1

Evet, bu çok zayıf bir dağılım sağlıyor. Eşit dağılımlı sonuçlarla bir cevap ekledim. –

2

emin. R, tabi ki yarıçaptır ve teta, 0'dan 2 * Pi'ye kadar uzanan bir açıdır. Bu böyle mi doğru JavaScript kodu, ama bir şey ise

0

emin değil:

for (x = -r; x < r; x++) { 
    for (y = -r; x < r; y++) { 
    if ((x * x + y * y) < (r * r)) { 
     // This x/y coordinate is inside the circle. 
     // Use <= if you want to count points _on_ the circle, too. 
    }   
    } 
} 
1

sen equidistributed İsterseniz daha iyi

var radius = 100 
var center_x = 0 
var center_y = 0 

// ensure that p(r) ~ r instead of p(r) ~ constant 
var r = radius*Math.sqrt(Math.random(1)) 
var angle = Math.sqrt(2*Math.PI) 

// compute desired coordinates 
var x = center_x + r*Math.cos(angle); 
var x = center_y + r*Math.sin(angle); 

gitmek koordinatları istiyorsanız mor e orta noktasına yakın noktalarda, bunun yerine

kullanın.

0

Bunu bir çözüm olarak gönderiyorum çünkü bu soru, google'daki tek alakalı sonuçtu.

Sorum/sorun x ve yr geçemeyecek bir çemberin içinde kartezyen koordinat nasıl ekleneceğini oldu.

Örnekler:

  1. arsa (45,75) 100 yarıçaplı bir daire (bu normal doğru pozisyon daire içinde kalan, ancak değil)
  2. arsa içindeki (100,100) 100 yarıçaplı bir daire (iç bu normalde

Çözelti

// The scale of the graph to determine position of plot 
// I.E. If the graph visually uses 300px but the values only goto 100 
var scale = 100; 

// The actual px radius of the circle/width of the graph 
var radiusGraph = 300; 

// Plot the values on a cartesian plane/graph image 
var xCart = xVal * radiusGraph; 
var yCart = yVal * radiusGraph; 

// Get the absolute values for comparison 
var xCartAbs = Math.abs(xCart); 
var yCartAbs = Math.abs(yCart); 

// Get the radius of the cartesian plot 
var radiusCart = Math.sqrt(xCart * xCart + yCart * yCart); 

// Compare to decide which value is closer to the limit 
// Once we know, calculate the largest possible radius with the graphs limit. 
// r^2 = x^2 + y^2 
if (xCartAbs > yCartAbs) { // Less than 45° 
    diff = scale/xCartAbs; 
    radiusMaximum = Math.sqrt(radiusGraph * radiusGraph + Math.pow(yCartAbs * diff, 2)); 
} else if (yCartAbs > xCartAbs) { // Greater than 45° 
    diff = scale/yCartAbs; 
    radiusMaximum = Math.sqrt(radiusGraph * radiusGraph + Math.pow(xCartAbs * diff, 2)); 
} else { // 45° 
    radiusMaximum = Math.sqrt(2 * (radiusGraph * radiusGraph)); 
} 

// Get the percent of the maximum radius that the cartesian plot is at 
var radiusDiff = radiusCart/radiusMaximum; 
var radiusAdjusted = radiusGraph * radiusDiff; 

// Calculate the angle of the cartesian plot 
var theta = Math.atan2(yCart, xCart); 

// Get the new x,y plot inside the circle using the adjust radius from above 
var xCoord = radiusAdjusted * Math.cos(theta); 
var yCoord = radiusAdjusted * Math.sin(theta); 
İlgili konular