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);

});

如果你可以给我一些正确的数学函数来获得我之后的曲线，那就太棒了！谢谢！

的Darren

Answer 1

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

（（current_row - row）*（current_row - row）+（current_col - col）*（current_col - col））

然后乘以你需要的任何比例因子。

Answer 2

这是一个圆形绘图procudure我在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（）”是大型数值计算的编译器类型转换，所以不要让你担心。

注意：首先执行最内部的括号。

Answer 3

// 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);

获得弯曲的结果集而不是JavaScript中的角度（需要数学帮助）

3 个答案: