0

一連の座標からの距離に基づいてセルをシェーディングしてグラデーションを作成するスクリプトがあります。私がやりたいのは、現在のひし形ではなく、グラデーションを円形にすることです。ここで例を見ることができます: 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);

});

曲線を取得するための適切な数学関数を手に入れることができれば、それは素晴らしいことです! ありがとう！

ダレン

4

3 に答える 3

0

距離式の二乗を使用できます。

((現在の行 - 行)*(現在の行 - 行) + (現在の列 - 列)*(現在の列 - 列))

次に、必要な倍率を掛けます。

于 2012-11-11T22:23:01.157 に答える
0

これは、私が何ヶ月も前に Pascal で書いた円の描画手順です。疑似コードとして使用して、(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;

注意: "Longint()" は、より大きな数値計算用のコンパイラの型キャストであるため、心配する必要はありません。

注意: 最も内側のブラケットが最初に実行されます。

于 2012-11-11T22:33:22.487 に答える
0 
// 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);
于 2012-11-12T00:49:12.390 に答える