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

您可以使用距离公式的平方：

((current_row - row)*(current_row - row) + (current_col - col)*(current_col - col))

然后将它乘以您需要的任何比例因子。

于 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 回答