将一堆直线看起来像一条直线的技巧是什么?

huangapple go评论106阅读模式
英文:

What is the technique to make a bunch of straight lines appear as if they are 1 straight line?

问题

In 2D graphics, 4 straight lines can be drawn; horizontal, vertical, oblique-right, and oblique left.

水平线、垂直线、右斜线和左斜线是2D图形中可以绘制的四种直线。

The lines in red and blue are represented by y = x and y = -x respectively.

红色和蓝色的线分别表示为 y = xy = -x

Attempting to graph something different than that such as y = 2x requires drawing multiple straight lines:

尝试绘制与此不同的内容,如 y = 2x,需要绘制多条直线:

That, despite looking like 1 straight line is made up of multiple vertical straight lines; in order to reveal the visual trick, all we have to do is to zoom in to the picture:

尽管看起来像一条直线,但它由多条垂直直线组成;为了揭示这种视觉技巧,我们只需要放大图片:

I want to implement the technique using c++ and winapi, but what is that technique?

我想使用C++和WinAPI实现这种技巧,但这种技巧是什么?

英文:

In 2D graphics, 4 straight lines can be drawn; horizontal, vertical, oblique-right, and oblique left.

将一堆直线看起来像一条直线的技巧是什么?

The lines in red and blue are represented by y = x and y = -x respectively. Attempting to graph something different than that such as y = 2x requires drawing multiple straight lines:

将一堆直线看起来像一条直线的技巧是什么?

That, despite looking like 1 straight line is made up of multiple vertical straight lines; in order to reveal the visual trick, all we have to do is to zoom in to the picture:

将一堆直线看起来像一条直线的技巧是什么?

I want to implement the technique using c++ and winapi, but what is that technique?

答案1

得分: 4

一般来说,有两种类型的线条,你所使用的方法在它们之间有所不同:

  • 细线,直接在像素级别绘制
  • 粗线,通过组合诸如三角形之类的基本图元来绘制,使用光栅化进行渲染

细线

将一堆直线看起来像一条直线的技巧是什么?
两条栅格化线。有色像素以圆圈显示。上图:单色筛选;下图:古普塔-斯普劳尔抗锯齿 - 由 Phrood~commonswiki 制作

使用专用算法绘制细线。通常的目标是绘制只有一个像素宽的线。
算法取决于你的目标:

另请参阅:维基百科上的线条绘制算法

粗线

这些在渲染时既容易又困难。
如果你不必担心线的端点和角落,只需创建一条线周围的四边形,并像其他任何内容一样使用光栅化进行渲染。

然而,渲染角落和端点通常需要使用多个基本图元:
将一堆直线看起来像一条直线的技巧是什么?
具有圆角的粗线,由四边形、三角形和圆圈组成 - 由 @japreiss 制作

你分享的红线看起来像一条粗线,因为它有多个像素宽度。

另请参阅:https://stackoverflow.com/q/22483198/5740428

英文:

Generally, there are two types of lines, and the method you use differs between them:

  • thin lines, which are drawn directly at the pixel level
  • thick lines, which are drawn by combining primitives like triangles, which are rendered using rasterization

Thin Lines

将一堆直线看起来像一条直线的技巧是什么?
Two rasterized lines. The colored pixels are shown as circles. Above: monochrome screening; below: Gupta-Sproull anti-aliasing - by Phrood~commonswiki

Drawing thin lines happens using specialized algorithms. Usually, the aim is to draw a line which is only one pixel wide.
The algorithm depends on your goals:

See also: Line drawing algorithm on Wikipedia

Thick Lines

These are easier and harder to render at the same time.
If you don't have to worry about line endings and corners, you just create a quadliteral around the line, and render it using rasterization like everything else.

However, rendering corners and endings requires using multiple primitives typically:
将一堆直线看起来像一条直线的技巧是什么?
A thick line with a rounded corner consisting of quads, triangles, and a circle - by @japreiss

The red line that you've shared looks like a thick line, because it is multiple pixels thick.

See also: https://stackoverflow.com/q/22483198/5740428

huangapple
  • 本文由 发表于 2023年6月29日 17:54:53
  • 转载请务必保留本文链接:https://go.coder-hub.com/76579967.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定