如何使用 SkiaSharp 绘制复杂的圆形边框答案

【问题标题】：How to draw complex round border with SkiaSharp如何使用 SkiaSharp 绘制复杂的圆形边框
【发布时间】：2020-04-05 14:33:58
【问题描述】：

我想用阴影绘制复杂的圆形边框和圆形矩形，但我不知道怎么做。我想自然地绘制一个框边框，就像浏览器 CSS 边框元素一样。我该怎么办？

喜欢浏览器中的 div 元素与此 CSS。

border-radius: 10% 30% 50% 70%;
border-left: 4px solid #000;
border-top: 10px solid #ff0;
border-right:  3px solid #F01;
border-bottom:  9px solid #0f0;
box-shadow: 10px 10px gray;

边框路径怎么画，不知道怎么平滑改变路径的粗细和颜色，用 DrawLine 和 DrawArc 组合绘制不会平滑地改变粗细。

我该怎么办？

【问题讨论】：

标签： c# skiasharp

【解决方案1】：

我知道如何获得平滑的边框宽度过渡，但不知道如何获得颜色过渡。通过使用外部和内部 rrect：

void draw(SkCanvas* canvas) {
  SkRRect content_rrect;
  SkRRect border_rrect;

  float rtopleft = 80.0f, rtopright = 240.0f, rbottomright = 400.0f,
        rbottomleft = 540.0f;
  int w = 600, h = 450;
  int btop = 40, bbottom = 36, bleft = 16, bright = 12;
  int xo = 100, yo = 100;
  char const str[] = "This is a box with rounded corners";

  const SkVector content_radii[] = {SkVector::Make(rtopleft, rtopleft),
                                    SkVector::Make(rtopright, rtopright),
                                    SkVector::Make(rbottomright, rbottomright),
                                    SkVector::Make(rbottomleft, rbottomleft)};

  const SkVector border_radii[] = {
      SkVector::Make(rtopleft + bleft, rtopleft + btop),
      SkVector::Make(rtopright + bright, rtopright + btop),
      SkVector::Make(rbottomright + bright, rbottomright + bbottom),
      SkVector::Make(rbottomleft + bleft, rbottomleft + bbottom)};

  content_rrect.setRectRadii(SkRect::MakeXYWH(xo + bleft, yo + btop, w, h),
                             content_radii);
  border_rrect.setRectRadii(
      SkRect::MakeXYWH(xo + 0, yo + 0, w + bleft + bright, h + btop + bbottom),
      border_radii);

  SkPaint paint;
  paint.setAntiAlias(true);
  paint.setColor(0xFF00FF00);
  canvas->drawDRRect(border_rrect, content_rrect, paint);

  SkPaint text_paint;
  text_paint.setAntiAlias(true);
  text_paint.setColor(0xFF000000);
  SkFont font;
  font.setSize(25);
  // text positioning is just a speculation as it'd be out of scope to calculate
  // it for this example
  canvas->drawSimpleText(str, strlen(str), SkTextEncoding::kUTF8, xo + w / 4,
                         yo + h / 2, font, text_paint);
}

这是使用 C++ Skia API 编写的，应该很容易转换为 C#。

希望这会有所帮助。

对于颜色过渡效果，您可以尝试一些滤镜或效果（即DashPathEffect、1DPathEffect、2DPathEffect）。 p>

PS：我无法获得 DashPathEffect（4 个 DashPathEffects {for each border} 3 off and 1 on interval），因为结果CPU 与 GPU 不同。

View Output Here

【讨论】：