Question

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

对于五角大楼的情况，这里有一张图片，以更好地显示我想得到的结果： http://www.filterforge.com/wiki/index.php/Polygonal_Gradient

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

鉴于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
        }
    }
}

上面的代码生成了一个径向渐变，我可以使用一个API函数生成相同类型的渐变。然而，这似乎是解决问题的良好起点。

surface_data - 是一个8位值的矩阵，表示红色，绿色，蓝色和Alpha分量的像素强度。

num_vertices - 是我们想要多边形渐变的顶点数（在一个圆上等距离）。

color1 - 渐变的起始颜色。

color2 - 渐变的结束颜色。

我想知道如何以相同的方式填充曲面，创建多边形渐变而不是径向。

感谢您的帮助。

路易

稍微重新思考一下这个问题...... 如果我们将坐标系的原点视为多边形的中心，它可以归结为找到一个方程，使得对于笛卡尔坐标中的任何输入点，输出是距离多边形最近边的距离。

我的直觉告诉我必须有某种封闭形式的解决方案，因为：

换一个圆圈，

rho = sqrt(dx*dx + dy*dy);

给出了圆心的径向距离，可以看作是具有无限边的多边形。

对于一个正方形，

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

给出了距离广场最近一侧的切比雪夫距离，可以看作是一个有四边的多边形。

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

我是否完全不考虑这些思路？

路易

Answer 1

这大致是我接近它的方式......

将多边形的中心放在原点“O”处。
对于正多边形的给定段内的给定点'P'，让线穿过 'O'＆amp; 'P'是'Line1'和
让线穿过外边缘包含多边形段为'Line2'
找到这两行的交叉点'IP'。

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

enter image description here

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

enter image description here

EDIT2：这是（Delphi）代码

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;

Answer 2

我的直觉告诉我，必须有某种封闭式解决方案

有...

分析

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

因此，此常数（对于六边形是sqrt(3)）由
给出：

这个比率，我之前已经描述过，由下式给出：

请注意2s会被抵消，因此为任何多边形得出此常数的一般函数是：

SIDES是多边形边的数量（例如6个代表六边形）

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

示例

下面是六边形的计算方法（因此 SIDES = 6 和 z = sqrt（3））。对于θ= 30°， d 为0.866，对于θ= 45°， d 为0.897（也等于θ= 15°）。

请注意， d 仅针对0 <=θ<= segmentAngle（由2PI/SIDES以弧度给出）正确定义。

实施

现在我们拥有编写解决方案所需的全部内容。

以下函数将2D（像素）坐标映射到0到1之间的数字；这个数字指定每个像素出现在颜色渐变的哪一点（步骤）。

最终，这非常类似于径向渐变，其中像素和圆中点之间的欧几里得距离用于定义像素的阶跃。但是，对于多边形渐变，我们要按 d 缩放像素（x，y）与多边形中点之间的欧几里得距离，以使颜色“推”向多边形的边缘。

在渲染时，唯一的事情是将 d 乘以denominator，以便多边形以适当的比例渲染。

代码

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 } } }

输出

边数= 6

侧数= 9

侧面= 3;放大一点；中点偏离中心

边数= 5；非线性颜色插值

多边形渐变

2 个答案:

分析

示例

实施

代码

输出