JavaScript에서 각도가 아닌 곡선 결과 얻기

Question

좌표 세트로부터의 거리를 기준으로 셀을 음영 처리하여 그라디언트를 만드는 스크립트가 있습니다. 내가하고 싶은 것은 그것이 현재있는 다이아몬드 모양보다는 그라디언트를 원형으로 만드는 것입니다. 당신은 여기 엔 예를 볼 수있는 권리 수학이 난 후 곡선을 얻을 기능 당신이 날 도와 줄 수 있다면 http://jsbin.com/uwivev/9/edit

var row = 5, col = 5, total_rows = 20, total_cols = 20; 

$('table td').each(function(index, item) { 

    // Current row and column   
    var current_row = $(item).parent().index(), 
     current_col = $(item).index(); 

    // Percentage based on location, always using positive numbers 
    var percentage_row = Math.abs(current_row-row)/total_rows; 
    var percentage_col = Math.abs(current_col-col)/total_cols; 

    // I'm thinking this is what I need to change to achieve the curve I'm after 
    var percentage = (percentage_col+percentage_row)/2; 

    $(this).find('div').fadeTo(0,percentage*3); 

}); 

것은 그 좋은 것입니다! 감사!

대런

당신은 거리 식의 제곱 사용할 수 있습니다

Answer 1

// Current row and column   
var current_row = $(item).parent().index(), 
    current_col = $(item).index(); 

// distance away from the bright pixel 
var dist = Math.sqrt(Math.pow(current_row - row, 2) + Math.pow(current_col - col, 2)) 

// do something with dist, you might change this 
var percentage = dist/total_cols; 

$(this).find('div').fadeTo(0,percentage*3); 

Answer 2

:

((CURRENT_ROW - 행) * (CURRENT_ROW - 행) + (current_col - COL) * (current_col - COL))를

그런 다음 원하는 배율 인수로 곱하십시오.

Answer 3

여기 서클 드로잉 procudure 나는 (X, Y)에서 반경의 픽셀을 색칠하는 방법을 이해하기 위해 의사 코드로 사용할 수있는 파스칼에서 많은 달 전을 썼습니다. 여러 개의 축소 된 원은 필요한 전체 영역을 커버하십시오. 이 코드는 반경에 액세스하기위한 수식도 제공합니다.

PROCEDURE DrawCircle(X,Y,Radius:Integer); 
VAR A,B,Z:LongInt; 
BEGIN 
    Z:=Round(Sqrt(Sqr(LongInt(Radius))/2)); 
    FOR A:=Z TO Radius DO 
    FOR B:=0 TO Z DO 
    IF Radius=Round(Sqrt(A*A+B*B)) THEN 
     BEGIN 
     PutPixel(X+A,Y+B,8); 
     PutPixel(X+A,Y-B,9); 
     PutPixel(X-A,Y+B,10); 
     PutPixel(X-A,Y-B,11); 
     PutPixel(X+B,Y+A,12); 
     PutPixel(X+B,Y-A,13); 
     PutPixel(X-B,Y+A,14); 
     PutPixel(X-B,Y-A,15); 
     END; 
END; 

NB : "Longint()"는 더 큰 수치 계산을위한 컴파일러 유형 변환이므로 걱정하지 마십시오.

NB : 가장 안쪽 괄호가 먼저 실행됩니다.