Swift 金属，边角不规则形状

Question

I am developing an application in which non-standard shapes need to be rounded

what I mean

non-standard rect

for rounding i do this ( Metal shader )

constant float2 c00s = float2(0.0, 0.0); 
constant float2 c01s = float2(0.0, 1.0);
constant float2 c11s = float2(1.0, 1.0);
constant float2 c10s = float2(1.0, 0.0);

// Check if a point is within a given corner
bool in_cornerS(float2 p, float2 corner, float2 radius) {
  // determine the direction we want to be filled
  float2 axis = (c11s - corner) - corner;

  // warp the point so we are always testing the bottom left point with the
  // circle centered on the origin
  p = p - (corner + axis * radius);
  p *= axis / radius;
  return (p.x > 0.0 && p.y > -1.0) || (p.y > 0.0 && p.x > -1.0) || dot(p, p) < 1.0;
}

bool test_rounded_maskS(float2 p, float2 corner_size00, float2 corner_size01, float2 corner_size11, float2 corner_size10) {
  return
      in_cornerS(p, c00s, corner_size00) &&
      in_cornerS(p, c01s, corner_size01) &&
      in_cornerS(p, c10s, corner_size11) &&
      in_cornerS(p, c11s, corner_size10);
}



fragment float4 fragmentStencil(VertexIn vert [[stage_in]],
                                  device const float2 *dimensions00 [[ buffer(0) ]],
                                  device const float2 *dimensions01 [[ buffer(1) ]],
                                  device const float2 *dimensions11 [[ buffer(2) ]],
                                  device const float2 *dimensions10 [[ buffer(3) ]]) {
    float2 a_uv = vert.texCoord;
    float2 u_dimensions00 = *dimensions00;
    float2 u_dimensions01 = *dimensions01;
    float2 u_dimensions11 = *dimensions11;
    float2 u_dimensions10 = *dimensions10;
    if (!test_rounded_maskS(a_uv, u_dimensions00, u_dimensions01, u_dimensions11, u_dimensions10)) {
        discard_fragment();
    }
    return float4(1.0,1.0,1.0,1.0);
}

i get this result

but I want this

how I can achieve this?

Answer 1

Step 1: Follow install instructions for the Metal port of NanoVG .

Step 2: Prosper. You can now render vector shapes and paths. This will fill a path:

- (void)renderFillWithPaint:(NVGpaint*)paint
     compositeOperation:(NVGcompositeOperationState)compositeOperation
                scissor:(NVGscissor*)scissor
                 fringe:(float)fringe
                 bounds:(const float*)bounds
                  paths:(const NVGpath*)paths
                 npaths:(int)npaths;