英文:
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 = x
和 y = -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 制作
使用专用算法绘制细线。通常的目标是绘制只有一个像素宽的线。
算法取决于你的目标:
- Bresenham的线算法 是绘制无抗锯齿的像素完美细线的常见选择
- 古普塔和斯普劳尔算法 产生细而平滑(抗锯齿)的线条
- ...
另请参阅:维基百科上的线条绘制算法
粗线
这些在渲染时既容易又困难。
如果你不必担心线的端点和角落,只需创建一条线周围的四边形,并像其他任何内容一样使用光栅化进行渲染。
然而,渲染角落和端点通常需要使用多个基本图元:
具有圆角的粗线,由四边形、三角形和圆圈组成 - 由 @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:
- Bresenham's line algorithm is a popular choice for pixel-perfect, very thin lines with no anti-aliasing
- The Gupta and Sproll algorithm produces thin, but smooth (anti-aliased) lines
- ...
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.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论