【问题标题】:What antialiased line drawing algorithm is used by Chrome?Chrome 使用什么抗锯齿画线算法?
【发布时间】:2017-09-01 22:10:00
【问题描述】:

我正在导入大量原始绘图数据(笔画)并将其转换为图像。到目前为止,我一直使用基本的 HTML5 Canvas,效果很好。但是我想自己实现画线算法,省了很多麻烦。

所以我实现了Xiaolin Wu's line algorithm,但是当我将它与我之前使用 Canvas 的结果进行比较时,它看起来并不好:

左5列:吴晓林的线算法,右5列:HTML5 Canvas(最新版Chrome)算法

那么他们使用的是什么算法?有源代码吗?我只需要绘制单线的算法。

【问题讨论】:

标签: javascript html algorithm google-chrome canvas


【解决方案1】:

Google Chrome 由开源的 Chromium 提供支持。

主要的 Chromium 项目位于https://www.chromium.org/

源代码位于https://chromium.googlesource.com/

下一步是浏览一下。他们正在使用库Skia 来绘制也是开源的。你可以在你的项目中使用它,你应该很好。

Demo:

void draw(SkCanvas* canvas) {
    canvas->drawColor(SK_ColorWHITE);

    SkPaint paint;
    paint.setStyle(SkPaint::kStroke_Style);
    paint.setStrokeWidth(8);
    paint.setColor(0xff1f78b4);
    paint.setAntiAlias(true);
    paint.setStrokeCap(SkPaint::kRound_Cap);

    SkPath path;
    path.moveTo(10, 10);
    path.quadTo(256, 64, 128, 128);
    path.quadTo(10, 192, 250, 250);
    canvas->drawPath(path, paint);
}

【讨论】:

  • 我认为你对 Skia 的看法是正确的!我现在正在结帐。
猜你喜欢
  • 2023-03-29
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多