Graphics 多边形梯度

我正在从事一个使用Juce库显示图形的项目。 到目前为止，我一直在使用该库的API函数来生成线性和径向渐变，但是这是该库支持的唯一两种渐变类型。我现在需要生成一种不同类型的渐变，一种遵循正凸多边形形状的渐变。这里的关键词是REGULAR，意思是所有边长度相同且所有顶点位于单个圆上的多边形

对于五角大楼的情况，下面是一张图片，以更好地显示我希望得到的结果：

对于我的应用程序，我希望能够指定具有任意数量边的多边形渐变。（五边形、六边形、八角形等）

考虑到API的局限性，我能产生所需结果的唯一方法是逐像素填充曲面矩阵，用数学方法计算每个像素的R、G、B、a分量的值

以下是我目前掌握的代码：

void render_surface(unsigned char *surface_data,
                    int width, int height, int linestride,
                    int num_vertices, t_rgba *color1, t_rgba *color2)
{
    const double center_x = 0.5 * width;
    const double center_y = 0.5 * height;
    const double radius = 0.5 * MIN(width, height);
    int x, y;

    for (y = height; --y >= 0;) {

        uint32_t *line = (uint32_t *)data;
        data += linestride;

        const double dy = y - center_y;

        for (x = width; --x >= 0;) {

            const double dx = x - center_x;

            double rho = hypot(dx, dy);
            rho /= radius;    // normalize radius 

            // constrain
            rho = CLIP(rho, 0.0, 1.0);

            // interpolate
            double a = color2->alpha + (color1->alpha - color2->alpha) * rho;
            double r = color2->red   + (color1->red   - color2->red  ) * rho;
            double g = color2->green + (color1->green - color2->green) * rho;
            double b = color2->blue  + (color1->blue  - color2->blue ) * rho;

            // premultiply alpha
            r *= a;
            g *= a;
            b *= a;

#if LITTLE_ENDIAN
            *line++ = ((unsigned int)((256.0 * (1.0 - DBL_EPSILON)) * a) << 24) // alpha
                    | ((unsigned int)((256.0 * (1.0 - DBL_EPSILON)) * r) << 16) // red
                    | ((unsigned int)((256.0 * (1.0 - DBL_EPSILON)) * g) <<  8) // green
                    |  (unsigned int)((256.0 * (1.0 - DBL_EPSILON)) * b);       // blue
#else
            *line++ = ((unsigned int)((256.0 * (1.0 - DBL_EPSILON)) * b) << 24) // blue
                    | ((unsigned int)((256.0 * (1.0 - DBL_EPSILON)) * g) << 16) // green
                    | ((unsigned int)((256.0 * (1.0 - DBL_EPSILON)) * r) <<  8) // red
                    |  (unsigned int)((256.0 * (1.0 - DBL_EPSILON)) * a);       // alpha
#endif
        }
    }
}

给出了到圆心的径向距离，可以将其视为具有无限边的多边形

对于一个正方形

fmax(fabs(dx), fabs(dy));

给出了切比雪夫距离正方形最近边的距离，可以将其视为具有4条边的多边形

所以，我认为这两个公式的某种组合应该给出中间案例，这将解决最初的问题

我是否完全偏离了这些思路

• 路易吉

---

这大概就是我的方法

• 将多边形的中心放置在原点“O”处
• 对于正多边形给定段内的给定点“P”，让线穿过 “O”和“P”为“第1行”和
• 让线穿过电缆的外边缘 包含的多边形段应为“Line2”
• 找到这两条线的交点“IP”

现在，p处的颜色分数由p到原点的距离相对于IP到原点的距离来定义

编辑：我已经实现了上面的算法，这是输出

编辑2： 这是（Delphi）代码

const
垂直：TFloat=3.4e38；
函数斜率（常数pt1，pt2:TFloatPoint）：单个；
开始
如果（pt1.X=pt2.X），则结果：=垂直
其他结果：=（pt2.Y-pt1.Y）/（pt2.X-pt1.X）；
结束；
//---------------------------------------------------------------------------
程序GetLine（常量pt1，pt2:TFloatPoint；out m，b:TFloat）；
开始
m:=坡度（pt1，pt2）；
如果m=垂直，则
b:=pt1.X其他
b:=pt1.Y-m*pt1.X；
结束；
//---------------------------------------------------------------------------
函数GradientColor（常量clr1，clr2:TColor32；分数：TFloat）：TColor32；
开始
如果分数=1，则结果：=clr2
其他的
开始
t输入（结果）。B：=
trunc（TColor32Entry（clr2.B*分数+TColor32Entry（clr1.B*（1-分数））；
TColor32Entry（结果）。G：=
trunc（TColor32Entry（clr2）.G*分数+TColor32Entry（clr1.G*（1-分数））；
TColor32Entry（结果）。R:=
trunc（TColor32Entry（clr2）.R*分数+TColor32Entry（clr1.R*（1-分数））；
TColor32Entry（结果）。A：=
trunc（TColor32Entry（clr2）.A*分数+TColor32Entry（clr1.A*（1-分数））；
结束；
结束；
//---------------------------------------------------------------------------
函数点三角形（常数pt，tr1，tr2，tr3:TFloatPoint）：布尔值；
开始
结果：=假；
如果（（（tr1.Y
我的直觉告诉我，一定有某种封闭形式的解

有

Anaylsis
为此，我采用了从六边形（）的中心到边缘的距离公式，并注意到它可以推广到任何多边形。在这个特殊的公式中，使用了常数
sqrt（3）
（我现在称之为z）。此数字等于多边形中点与其一条边的中点之间的距离与中点与其一个顶点之间的距离之比的两倍（单位长度多边形中此距离为1）

因此，该常数（对于六边形为
sqrt（3）
）由下式给出：


我前面描述的这个比率由以下公式得出：


请注意2s取消，因此为任何多边形导出该常数的一般函数为：


SIDES
是多边形边数（例如，六边形为6）

现在我们简单地将这个常数插入到公式中，计算点位于给定单位长度多边形上的位置与位于单位长度圆上的位置的比率：


例子
对于六边形（因此边=6，z=sqrt（3）），我们得到θ=30°时的d为0.866，θ=45°时的d为0.897（也相当于θ=15°）

请注意，d仅正确定义为0 1）{//钳制为1
步骤=1；
}
像素[x][y]=渐变色。colorat（步长）；//获取dist给定步长处渐变色的颜色
}
}
}

输出 边数=6

侧面=9

侧面=3；稍微放大；中点偏离中心

边=5；非线性颜色插值

---

是的，我没有尝试直接实现您的解决方案，但至少在理论上它应该是可行的。但是它需要相当多的计算。我希望得到某种封闭形式的方程，更简单、更简洁。方程的输入是笛卡尔坐标系中的一个点，输出是距离最近一侧的距离。F对于边数为偶数的多边形，只需计算一半多边形的像素，然后在中线上镜像颜色，就可以大大加快速度。同样，对于具有4条边的倍数的多边形，只需计算四分之一多边形的像素，然后镜像像素，就可以加快速度水平和垂直方向上的el颜色

fmax(fabs(dx), fabs(dy));

const
  vertical: TFloat = 3.4e38;

function Slope(const pt1, pt2: TFloatPoint): single;
begin
  if (pt1.X = pt2.X) then result := vertical
  else result := (pt2.Y - pt1.Y)/(pt2.X - pt1.X);
end;
//---------------------------------------------------------------------------

procedure GetLine(const pt1, pt2: TFloatPoint; out m, b: TFloat);
begin
  m := Slope(pt1, pt2);
  if m = vertical then
    b := pt1.X else
    b := pt1.Y - m * pt1.X;
end;
//---------------------------------------------------------------------------

function GradientColor(const clr1, clr2: TColor32; fraction: TFloat): TColor32;
begin
  if fraction <= 0 then result := clr1
  else if fraction >= 1 then result := clr2
  else
  begin
    TColor32Entry(result).B :=
      trunc(TColor32Entry(clr2).B * fraction + TColor32Entry(clr1).B * (1-fraction));
    TColor32Entry(result).G :=
      trunc(TColor32Entry(clr2).G * fraction + TColor32Entry(clr1).G * (1-fraction));
    TColor32Entry(result).R :=
      trunc(TColor32Entry(clr2).R * fraction + TColor32Entry(clr1).R * (1-fraction));
    TColor32Entry(result).A :=
      trunc(TColor32Entry(clr2).A * fraction + TColor32Entry(clr1).A * (1-fraction));
  end;
end;
//---------------------------------------------------------------------------

function PointInTriangle(const pt, tr1, tr2, tr3: TFloatPoint): boolean;
begin
  result := false;
  if ((((tr1.Y <= pt.Y) and (pt.Y < tr3.Y)) or
    ((tr3.Y <= pt.Y) and (pt.Y < tr1.Y))) and
    (pt.X < (tr3.X - tr1.X) * (pt.Y - tr1.Y) /
    (tr3.Y - tr1.Y) + tr1.X)) then result := not result;
  if ((((tr2.Y <= pt.Y) and (pt.Y < tr1.Y)) or
    ((tr1.Y <= pt.Y) and (pt.Y < tr2.Y))) and
    (pt.X < (tr1.X - tr2.X) * (pt.Y - tr2.Y) /
    (tr1.Y - tr2.Y) + tr2.X)) then result := not result;
  if ((((tr3.Y <= pt.Y) and (pt.Y < tr2.Y)) or
    ((tr2.Y <= pt.Y) and (pt.Y < tr3.Y))) and
    (pt.X < (tr2.X - tr3.X) * (pt.Y - tr3.Y) /
    (tr2.Y - tr3.Y) + tr3.X)) then result := not result;
end;
//---------------------------------------------------------------------------

function GetSegmentIndex(vertex: TFloatPoint; vertices: TArrayOfFloatPoint): integer;
var
  i, highI: integer;
  prev: TFloatPoint;
const
  origin: TFloatPoint = (X: 0; Y: 0);
begin
  highI := high(vertices);
  prev := vertices[highI];
  result := -1;
  for i := 0 to highI do
  begin
    if PointInTriangle(vertex, origin, prev, vertices[i]) then
    begin
      result := i;
      break;
    end;
    prev := vertices[i];
  end;
end;
//---------------------------------------------------------------------------

procedure RegularPolygonFill(bmp: TBitmap32; const origin: TPoint;
  radius: TFloat; vertexCount: integer; InnerColor, OuterColor: TColor32);
var
  i,j,d,q: integer;
  dist1,dist2: TFloat;
  vert, intersetPt: TFloatPoint;
  verts: TArrayOfFloatPoint;
  edgeMs, edgeBs: TArrayOfFloat;
  angle, angleDiff, m, b: TFloat;
  sinAngle, cosAngle: extended;
const
  orig: TFloatPoint = (X: 0; Y: 0);
begin
  if vertexCount < 3 then exit;
  setlength(verts, vertexCount);
  setlength(edgeMs, vertexCount); //edge slopes  (ie y = M*x +b)
  setlength(edgeBs, vertexCount); //edge offsets (ie y = m*x +B)
  angleDiff := pi *2 / vertexCount;
  angle := angleDiff;
  vert.X := radius; //vert used here as prev vertex
  vert.Y := 0;
  for i := 0 to vertexCount -1 do
  begin
    SinCos(angle, sinAngle, cosAngle);
    verts[i].X := cosAngle * radius;
    verts[i].Y := sinAngle * radius;
    GetLine(vert, verts[i], edgeMs[i], edgeBs[i]);
    angle := angle + angleDiff;
    vert := verts[i];
  end;

  d := floor(radius);
  for i := -d to d do
    for j := -d to d do
    begin
      vert := FloatPoint(i,j);
      GetLine(orig, vert, m, b);
      q := GetSegmentIndex(vert, verts);
      if q < 0 then continue;
      //simultaneous equations to find intersection ...
      //y = m * x + b; y = edgeMs[q]* x + edgeBs[q];
      //edgeMs[q]* x + edgeBs[q] = m * x + b;
      //(edgeMs[q] - m) * x = b - edgeBs[q]
      //x = (b - edgeBs[q])/(edgeMs[q] - m)
      if m = vertical then
      begin
        intersetPt.X := b;
        intersetPt.Y := edgeMs[q]* intersetPt.X + edgeBs[q];
      end
      else if edgeMs[q] = vertical then
      begin
        intersetPt.X := edgeBs[q];
        intersetPt.Y := m* intersetPt.X + b;
      end else
      begin
        intersetPt.X := (b - edgeBs[q])/(edgeMs[q] - m);
        intersetPt.Y := m * intersetPt.X + b;
      end;

      //get distances from origin of vert and intersetPt ...
      dist1 := sqrt(vert.X*vert.X + vert.Y*vert.Y);
      dist2 := sqrt(intersetPt.X*intersetPt.X + intersetPt.Y*intersetPt.Y);

      bmp.Pixel[i + origin.X, j + origin.Y] :=
        GradientColor(InnerColor, OuterColor, dist1/dist2);
    end;
end;

public void polygonGradient(colour[][] pixels, Gradient gradient, Vector2 midPoint, float angle, float zoom, int sides) {

    final double z = Math.tan(HALF_PI - (PI / sides)); // z, as derived in answer
    final double SEGMENT_ANGLE = (2 * PI) / sides; // max angle of polygon segment in radians

    angle %= SEGMENT_ANGLE; // mod angle to minimise difference between theta and SEGMENT_ANGLE in loop (less while calls)

    final double denominator = 1 / ((Math.max(pixels.height, pixels.width)) * zoom); // calc here once, not in loop

    double yDist; // y distance between midpoint and a given pixel
    double xDist; // x distance between midpoint and a given pixel

    for (int y = 0, x; y < pixels.height; ++y) {
        yDist = (midPoint.y - y) * (midPoint.y - y);
        
        for (x = 0; x < pixels.width; ++x) {
            xDist = (midPoint.x - x) * (midPoint.x - x);
            
            double theta = Math.atan2((midPoint.y - y), (midPoint.x - x));
            theta += (TWO_PI - angle); // TWO_PI - angle, so we rotate clockwise
            theta = Math.abs(theta); // abs() here to simplify while loop 

            // polygon is split into N segments; restrict theta to angle of one segment
            while (theta > SEGMENT_ANGLE) { // effectively modulo (faster than using % operator)
                theta -= SEGMENT_ANGLE;
            }

            final double pointDistance = Math.sqrt(yDist + xDist); // euclidean dist between (x,y) and midpoint

            double d = z * (z * Math.cos(theta) + Math.sin(theta)); // d, as derived in answer

            // now calculate the position of the pixel on the gradient
            double step = d  * denominator * pointDistance; // multiply euclidean distance by d

            if (step > 1) { // clamp to 1
                step = 1;
            }
            
            pixels[x][y] = gradient.colourAt(step); // get the colour of the gradient at the step given by dist
        }
    }
}