相邻的两个开启抗锯齿绘制的三角形中间会有一条抗锯齿线版本 release/2.1 #1069

zqiangang · 2025-11-27T14:55:21Z

zqiangang
Nov 27, 2025

c++ 的代码如下
  tgfx::Path background_path;
  tgfx::Path triangle_lt;
  tgfx::Path triangle_rb;

  background_path.moveTo(200, 200);
  background_path.lineTo(400, 200);
  background_path.lineTo(400, 400);
  background_path.lineTo(200, 400);
  background_path.lineTo(200, 200);
  background_path.close();

  triangle_lt.moveTo(200, 200);
  triangle_lt.lineTo(400, 200);
  triangle_lt.lineTo(200, 400);
  triangle_lt.lineTo(200, 200);
  triangle_lt.close();

  triangle_rb.moveTo(200, 400);
  triangle_rb.lineTo(400, 200);
  triangle_rb.lineTo(400, 400);
  triangle_rb.lineTo(200, 400);
  triangle_rb.close();

  tgfx::Paint paint;
  paint.setColor(tgfx::Color::FromRGBA(255,0,0,255));
  tgfx_canvas->drawPath(background_path, paint);

  paint.setColor(tgfx::Color::FromRGBA(0, 255, 0, 255));
  tgfx_canvas->drawPath(triangle_lt, paint);

  paint.setColor(tgfx::Color::FromRGBA(0, 255, 0, 255));
  tgfx_canvas->drawPath(triangle_rb, paint);

效果如图

在 html 相同的逻辑的绘制样式如下

html 代码如下

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Canvas 两个三角形组成正方形</title>
    <style>
        body {
            display: flex;
            flex-direction: column;
            align-items: center;
            margin-top: 50px;
            background-color: #f5f5f5;
        }
        canvas {
            border: 2px solid #333;
            background-color: white;
        }
        .desc {
            margin-top: 20px;
            font-size: 16px;
            color: #666;
        }
    </style>
</head>
<body>
    <canvas id="squareCanvas" width="300" height="300"></canvas>
    <div class="desc">两个三角形（蓝色 + 橙色）组成正方形</div>

    <script>
        // 获取 Canvas 元素和上下文
        const canvas = document.getElementById('squareCanvas');
        const ctx = canvas.getContext('2d');

        // 定义正方形的参数（以画布中心绘制边长为 200 的正方形）
        const squareSize = 200; // 正方形边长
        const startX = (canvas.width - squareSize) / 2; // 正方形左上角X坐标
        const startY = (canvas.height - squareSize) / 2; // 正方形左上角Y坐标

        ctx.beginPath();
        ctx.moveTo(startX, startY); // 左上角
        ctx.lineTo(startX + squareSize, startY); // 右上角
        ctx.lineTo(startX + squareSize, startY + squareSize); // 左下角
        ctx.lineTo(startX, startY + squareSize); // 左下角
        ctx.closePath(); // 闭合路径
        ctx.fillStyle = 'rgba(255, 0, 0, 1.0)'; // 蓝色（带透明度）
        ctx.fill(); // 填充三角形

        // 绘制第一个三角形（左下到右上对角线，蓝色）
        ctx.beginPath();
        ctx.moveTo(startX, startY); // 左上角
        ctx.lineTo(startX + squareSize, startY); // 右上角
        ctx.lineTo(startX, startY + squareSize); // 左下角
        ctx.closePath(); // 闭合路径
        ctx.fillStyle = 'rgba(0, 255, 0, 1)'; // 蓝色（带透明度）
        ctx.fill(); // 填充三角形


        // 绘制第二个三角形（右上到左下对角线，橙色）
        ctx.beginPath();
        ctx.moveTo(startX + squareSize, startY); // 右上角
        ctx.lineTo(startX + squareSize, startY + squareSize); // 右下角
        ctx.lineTo(startX, startY + squareSize); // 左下角
        ctx.closePath(); // 闭合路径
        ctx.fillStyle = 'rgba(0, 255, 0, 1)'; // 橙色（带透明度）
        ctx.fill(); // 填充三角形


    </script>
</body>
</html>

Answered by domchen

Nov 28, 2025

这个特性叫做边缘抗锯齿，边缘会有一像素的透明度过渡起到平滑的作用。使用Skia绘制也是这个表现，包括浏览器里。你可以构造一个SVG拼接的图放到浏览器里就可以观察到了。关闭边缘抗锯齿或者使用别的抗锯齿功能才能解决。通常做法是使用MSAA抗锯齿，但是占用内存会更高，各个平台的硬件支持也有一些问题，Intel集成显卡的情况都无法使用。Figma里实现了完美的抗锯齿且没有接缝的模式。他们是直接绘制两倍大的分辨率后缩小的方式实现的，就是最朴素的抗锯齿方式。MSAA如果在硬件支持的情况下会比这种方式更快，你可以根据需要支持的平台一个个测试下性能，看采用哪种抗锯齿能力。tgfx里的开启MSAA就是创建Surface的时候把sampleCount指定为4即可。

View full answer

zqiangang · 2025-11-27T15:02:58Z

zqiangang
Nov 27, 2025
Author

大佬关闭抗锯齿绘制就是正常的了，但是对于圆角矩形的圆角存在锯齿。我想要实现的是一个圆角矩形分开为多个独立的块绘制，它们共同组成一个圆角矩形但是开启抗锯齿块结合处会有其他颜色的线，关闭抗锯齿圆角不光滑，求救·大佬

0 replies

domchen · 2025-11-28T01:01:41Z

domchen
Nov 28, 2025
Maintainer

这个特性叫做边缘抗锯齿，边缘会有一像素的透明度过渡起到平滑的作用。使用Skia绘制也是这个表现，包括浏览器里。你可以构造一个SVG拼接的图放到浏览器里就可以观察到了。关闭边缘抗锯齿或者使用别的抗锯齿功能才能解决。通常做法是使用MSAA抗锯齿，但是占用内存会更高，各个平台的硬件支持也有一些问题，Intel集成显卡的情况都无法使用。Figma里实现了完美的抗锯齿且没有接缝的模式。他们是直接绘制两倍大的分辨率后缩小的方式实现的，就是最朴素的抗锯齿方式。MSAA如果在硬件支持的情况下会比这种方式更快，你可以根据需要支持的平台一个个测试下性能，看采用哪种抗锯齿能力。tgfx里的开启MSAA就是创建Surface的时候把sampleCount指定为4即可。

0 replies

domchen · 2025-11-28T01:04:44Z

domchen
Nov 28, 2025
Maintainer

这个不是Bug，我们用 issue 只记录 bug 性的问题。使用问题下次可以在 Dissusions 这边提问。

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

相邻的两个开启抗锯齿绘制的三角形中间会有一条抗锯齿线版本 release/2.1 #1069

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{editor}}'s edit

{{editor}}'s edit

Uh oh!

Replies: 3 comments

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Select a reply

Uh oh!

相邻的两个开启抗锯齿绘制的三角形中间会有一条抗锯齿线 版本 release/2.1 #1069

Uh oh!

Uh oh!

zqiangang Nov 27, 2025

Replies: 3 comments

Uh oh!

zqiangang Nov 27, 2025 Author

Uh oh!

domchen Nov 28, 2025 Maintainer

Uh oh!

domchen Nov 28, 2025 Maintainer

相邻的两个开启抗锯齿绘制的三角形中间会有一条抗锯齿线版本 release/2.1 #1069

zqiangang
Nov 27, 2025

zqiangang
Nov 27, 2025
Author

domchen
Nov 28, 2025
Maintainer

domchen
Nov 28, 2025
Maintainer