为什么一个 Pixmap 的圆会偏移 1 个单位?

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

Why is a Pixmap circle off by 1?

问题

我正在尝试使用 Pixmap 绘制一个圆。为了更清楚地说明问题,我将整个 Pixmap 区域填充为白色,然后用不同的颜色绘制圆。以下是我认为应该可以工作的代码。

我将 Pixmap 的宽度/高度设置为圆的半径的两倍。

然后我在 Pixmap 的中间绘制一个圆,位于坐标 (radius, radius) 处。

```java
public static Texture circle(int radius, Color color) {
  Pixmap pixmap = new Pixmap(radius * 2, radius * 2, Pixmap.Format.RGBA4444);
  pixmap.setColor(Color.WHITE);
  pixmap.fill();
  pixmap.setColor(color);
  pixmap.fillCircle(radius, radius, radius);
  Texture texture = new Texture(pixmap);
  pixmap.dispose();
}

不幸的是,Pixmap 在圆的右侧和底部裁剪了一部分。例如:

如果我在宽度和高度上分别增加 1,那么它看起来就正常了:

我可以随意添加一个额外的像素,但我想了解为什么需要这样做。为什么将圆的半径设置为 X,实际上直径会是 X + 1 呢?


<details>
<summary>英文:</summary>

I&#39;m trying to draw a circle using Pixmap. To make the problem clearer, I&#39;m filling the entire Pixmap area in white, then drawing the circle in a different color. Here is the code that I feel should work.

I&#39;m setting the width/height of the Pixmap to twice the size of the radius of the circle.

Then I&#39;m drawing a circle in the middle of the Pixmap at (radius, radius).

public static Texture circle(int radius, Color color) {
Pixmap pixmap = new Pixmap(radius * 2, radius * 2, Pixmap.Format.RGBA4444);
pixmap.setColor(Color.WHITE);
pixmap.fill();
pixmap.setColor(color);
pixmap.fillCircle(radius, radius, radius);
Texture texture = new Texture(pixmap);
pixmap.dispose();
}


Unfortunately, the Pixmap cuts off the circle on the right and bottom sides. For example:

[![enter image description here][1]][1]

If I increase the size of the Pixmap by 1 in both the width and height, then it looks fine:

[![enter image description here][2]][2]

I can just arbitrarily add an extra pixel but I&#39;d like to understand why this is necessary. Why does setting the radius of the circle to X result in a diameter that is actually X + 1?

  [1]: https://i.stack.imgur.com/AJFIP.png
  [2]: https://i.stack.imgur.com/2FOQN.png

</details>


# 答案1
**得分**: 2

为了得到你想要的结果,圆的中心位置必须落在两个像素之间,这样在该位置的两侧就有相似数量的整个像素。我猜测 Pixmap 代码定义了像素的位置是指像素的中心。因此,点 `(radius, radius)` 距离右边缘比左边更近,而 `(radius-1, radius-1)` 则比右边缘更靠近左边。基于这种位置定义,你的圆的中心应该位于位置 `(radius-.5, radius-.5)`。

如果你必须将圆的中心放在像素的中间,那么使用位置 `(radius, radius)` 来表示圆是有意义的,并且你需要 Pixmap 的宽度和高度为 `(2*radius + 1, 2*radius+1)`。这样,圆心两侧有相同数量的像素,即 `radius+.5` 个像素。在这种情况下,如果库支持的话,你可能希望绘制半径为 `radius + .5` 的圆。

<details>
<summary>英文:</summary>

To get the result you want, the location of the circle&#39;s center would have to fall between two pixels, so that there are a similar number of whole pixels on either side of that location.  My guess is that the Pixmap code defines a pixel&#39;s location to mean the center of a pixel.  So the point `(radius, radius)` is closer to the right edge than the left, and `(radius-1, radius-1)` is closer to the left edge than the right.  With this definition of location, the center of your circle should be at location `(radius-.5, radius-.5)`.

If you have to put the center of the circle in the middle of a pixel, then it makes sense that you&#39;d use the location `(radius, radius)` for the circle and that you&#39;d need the width and height of the Pixmap to be `(2*radius + 1, 2*radius+1)`.  This way, there are the same number of pixels, `radius+.5` pixels, on either side of the center of the circle.  You might at that point want to draw a circle of radius `radius + .5` if the library will take that.

</details>



# 答案2
**得分**: 1

因为它在像素上绘制以像素为中心的圆,而不是在像素之间绘制。

所以实际绘制的圆的半径比传入的半径多1,半径为1的圆绘制如下(数字是此示例中的坐标):

     012
    0 X
    1XCX
    2 X

从技术上讲,这个圆的半径是1.5,但现在它的中心在一个像素上(C)。
我猜想这是为了让你能够准确地放置它,因为如果它实际上有一个半径为2,你就无法将中心放在一个像素上。

<details>
<summary>英文:</summary>

Because it draws a circle centered **on** a pixel, not *between* pixels.

So the actual radius of the circle drawn is one more than passed in, a circle with radius 1 is drawn as (numbers are coordinates in this example):

     012
    0 X
    1XCX
    2 X

This technically has a radius of 1.5, but now it&#39;s centered on a pixel (C).
I am guessing this is to allow you to place it accurately, as if it actually had a radius of 2, you wouldn&#39;t be able to place the center on a pixel.





</details>



huangapple
  • 本文由 发表于 2020年9月7日 00:23:54
  • 转载请务必保留本文链接:https://go.coder-hub.com/63766362.html
匿名

发表评论

匿名网友

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

确定