如何在图像比例变大时围绕其中心旋转图像(在Pygame中) [英] How to rotate an image around its center while its scale is getting larger(in Pygame)

问题描述

我加载了一个图像，并且希望它绕其中心旋转，同时其比例会越来越大.我本来知道如何围绕图像中心旋转图像，但是如果比例变大，我很难计算位置.我尝试了一下，但是图像只是跳舞"，而不是居中.

解决方案

简短答案:

存储源图像矩形的中心，并在旋转和缩放操作之后通过存储的中心位置更新旋转和缩放的图像矩形的中心.通过 pygame.transform.rotozoom() 旋转和缩放图像:

 def blitRotateCenter(surf, image, topleft, angle):
    
    center = image.get_rect(topleft = topleft).center
    rotated_image = pygame.transform.rotozoom(image, angle, scale)
    new_rect = rotated_image.get_rect(center = center)

    surf.blit(rotated_image, new_rect.topleft)
 

---

长答案:

对于以下示例和说明，我将使用由渲染的文本生成的简单图像:

 font = pygame.font.SysFont('Times New Roman', 50)
text = font.render('image', False, (255, 255, 0))
image = pygame.Surface((text.get_width()+1, text.get_height()+1))
pygame.draw.rect(image, (0, 0, 255), (1, 1, *text.get_size()))
image.blit(text, (1, 1))
 

图像( pygame.Surface )可以旋转 pygame.transform.rotate .

如果逐步执行此操作，则图像会失真并迅速增加:

 while not done:

    # [...]

    image = pygame.transform.rotate(image, 1)
    screen.blit(image, pos)
    pygame.display.flip()
 

这是原因，因为旋转图像的边界矩形始终大于原始图像的边界矩形(某些旋转角度为90度的倍数除外).
由于多份复印，图像变形.每次旋转都会产生一个小的误差(不准确).误差的总和正在增加，并且图像会衰减.

可以通过保持原始图像和变暗"来解决该问题.通过一次旋转操作生成的图像就形成了原始图像.

 angle = 0
while not done:

    # [...]

    rotated_image = pygame.transform.rotate(image, angle)
    angle += 1

    screen.blit(rotated_image, pos)
    pygame.display.flip()
 

现在图像似乎可以任意更改其位置，因为图像的大小随旋转而变化，并且原点始终位于图像边界矩形的左上方.

这可以通过在旋转之前比较图像的轴对齐的边界框来补偿然后旋转.
对于以下数学运算，使用 pygame.math.Vector2 .请注意，在屏幕坐标中y指向屏幕下方，但是数学y轴指向从底部到顶部.这导致y轴必须被翻转"，以保持其旋转.在计算过程中

使用边界框的4个角点设置一个列表:

 w, h = image.get_size()
box = [pygame.math.Vector2(p) for p in [(0, 0), (w, 0), (w, -h), (0, -h)]]
 

通过 <pygame.math.Vector2.rotate :

 box_rotate = [p.rotate(angle) for p in box]
 

获取旋转点的最小值和最大值:

 min_box = (min(box_rotate, key=lambda p: p[0])[0], min(box_rotate, key=lambda p: p[1])[1])
max_box = (max(box_rotate, key=lambda p: p[0])[0], max(box_rotate, key=lambda p: p[1])[1])
 

计算补偿"值.图像左上角的原点，方法是将旋转框的最小值添加到该位置.对于y坐标，max_box[1]是最小的，因为沿y轴:

origin = (pos[0] + min_box[0], pos[1] - max_box[1])

rotated_image = pygame.transform.rotate(image, angle)
screen.blit(rotated_image, origin)

要在原始图像上定义支点，可以使用翻译"相对于图像的左上角的枢轴的角度必须被计算出来，并且盲点"是相对于图像的左上方.图片的位置必须通过平移来替换.

定义一个枢轴，例如在图片的中央:

 pivot = pygame.math.Vector2(w/2, -h/2)
 

计算旋转的枢轴的平移:

 pivot_rotate = pivot.rotate(angle)
pivot_move   = pivot_rotate - pivot
 

最后计算旋转图像的原点:

 origin = (pos[0] + min_box[0] - pivot_move[0], pos[1] - max_box[1] + pivot_move[1])

rotated_image = pygame.transform.rotate(image, angle)
screen.blit(rotated_image, origin)
 

如果必须另外缩放图像，则在计算图像的原点时必须考虑缩放:

 move   = (-pivot[0] + min_box[0] - pivot_move[0], pivot[1] - max_box[1] + pivot_move[1])
origin = (pos[0] + zoom * move[0], pos[1] + zoom * move[1])

rotozoom_image = pygame.transform.rotozoom(image, angle, zoom)
screen.blit(rotozoom_image, origin)
 

在下面的示例程序中，函数blitRotate执行上述所有步骤，并执行"blit"操作.旋转的图像到表面. pos是图像的位置. originPos是图像上放置在pos和枢轴上的点.

---

最小示例:

 import pygame

pygame.init()
screen = pygame.display.set_mode((300, 300))
clock = pygame.time.Clock()

def blitRotate(surf, image, pos, originPos, angle, zoom):

    # calcaulate the axis aligned bounding box of the rotated image
    w, h       = image.get_size()
    box        = [pygame.math.Vector2(p) for p in [(0, 0), (w, 0), (w, -h), (0, -h)]]
    box_rotate = [p.rotate(angle) for p in box]
    min_box    = (min(box_rotate, key=lambda p: p[0])[0], min(box_rotate, key=lambda p: p[1])[1])
    max_box    = (max(box_rotate, key=lambda p: p[0])[0], max(box_rotate, key=lambda p: p[1])[1])

    # calculate the translation of the pivot 
    pivot        = pygame.math.Vector2(originPos[0], -originPos[1])
    pivot_rotate = pivot.rotate(angle)
    pivot_move   = pivot_rotate - pivot

    # calculate the upper left origin of the rotated image
    move   = (-originPos[0] + min_box[0] - pivot_move[0], -originPos[1] - max_box[1] + pivot_move[1])
    origin = (pos[0] + zoom * move[0], pos[1] + zoom * move[1])

    # get a rotated image
    rotozoom_image = pygame.transform.rotozoom(image, angle, zoom)
  
    # rotate and blit the image
    surf.blit(rotozoom_image, origin)

    # draw rectangle around the image
    pygame.draw.rect (surf, (255, 0, 0), (*origin, *rotozoom_image.get_size()),2)

try:
    image = pygame.image.load('AirPlaneFront1-128.png')
except:
    text = pygame.font.SysFont('Times New Roman', 50).render('image', False, (255, 255, 0))
    image = pygame.Surface((text.get_width()+1, text.get_height()+1))
    pygame.draw.rect(image, (0, 0, 255), (1, 1, *text.get_size()))
    image.blit(text, (1, 1))
w, h = image.get_size()

start = False
angle, zoom = 0, 1
done = False
while not done:
    clock.tick(60)
    for event in pygame.event.get():
        if event.type == pygame.QUIT:
            done = True
        elif event.type == pygame.KEYDOWN or event.type == pygame.MOUSEBUTTONDOWN:
            start = True

    pos = (screen.get_width()/2, screen.get_height()/2)
    
    screen.fill(0)
    blitRotate(screen, image, pos, (w/2, h/2), angle, zoom)
    if start:
        angle += 1
        zoom += 0.01
        if zoom > 5:
            zoom = 1

    pygame.draw.line(screen, (0, 255, 0), (pos[0]-20, pos[1]), (pos[0]+20, pos[1]), 3)
    pygame.draw.line(screen, (0, 255, 0), (pos[0], pos[1]-20), (pos[0], pos[1]+20), 3)
    pygame.draw.circle(screen, (0, 255, 0), pos, 7, 0)

    pygame.display.flip()
    
pygame.quit()
exit()
 

I loaded an image and I want it to rotate around its center, while its scale is getting larger. I know how to rotate an image around its center originally, but it's hard for me to calculate the position if the scale is getting larger. I tried it, but the image just 'dances', not staying in the center.

解决方案

Short answer:

Store the center of the source image rectangle and update the center of the rotated and zoomed image rectangle after the rotation and zoom operation, by the stored center position. Rotate and zoom the image by pygame.transform.rotozoom():

def blitRotateCenter(surf, image, topleft, angle):
    
    center = image.get_rect(topleft = topleft).center
    rotated_image = pygame.transform.rotozoom(image, angle, scale)
    new_rect = rotated_image.get_rect(center = center)

    surf.blit(rotated_image, new_rect.topleft)

---

Long Answer:

For the following examples and explanation I'll use a simple image generated by a rendered text:

font = pygame.font.SysFont('Times New Roman', 50)
text = font.render('image', False, (255, 255, 0))
image = pygame.Surface((text.get_width()+1, text.get_height()+1))
pygame.draw.rect(image, (0, 0, 255), (1, 1, *text.get_size()))
image.blit(text, (1, 1))

An image (pygame.Surface) can be rotated by pygame.transform.rotate.

If that is done progressively in a loop, then the image gets distorted and rapidly increases:

while not done:

    # [...]

    image = pygame.transform.rotate(image, 1)
    screen.blit(image, pos)
    pygame.display.flip()

This is cause, because the bounding rectangle of a rotated image is always greater than the bounding rectangle of the original image (except some rotations by multiples of 90 degrees).
The image gets distort because of the multiply copies. Each rotation generates a small error (inaccuracy). The sum of the errors is growing and the images decays.

That can be fixed by keeping the original image and "blit" an image which was generated by a single rotation operation form the original image.

angle = 0
while not done:

    # [...]

    rotated_image = pygame.transform.rotate(image, angle)
    angle += 1

    screen.blit(rotated_image, pos)
    pygame.display.flip()

Now the image seems to arbitrary change its position, because the size of the image changes by the rotation and origin is always the top left of the bounding rectangle of the image.

This can be compensated by comparing the axis aligned bounding box of the image before the rotation and after the rotation.
For the following math pygame.math.Vector2 is used. Note in screen coordinates the y points down the screen, but the mathematical y axis points form the bottom to the top. This causes that the y axis has to be "flipped" during calculations

Set up a list with the 4 corner points of the bounding box:

w, h = image.get_size()
box = [pygame.math.Vector2(p) for p in [(0, 0), (w, 0), (w, -h), (0, -h)]]

Rotate the vectors to the corner points by pygame.math.Vector2.rotate:

box_rotate = [p.rotate(angle) for p in box]

Get the minimum and the maximum of the rotated points:

min_box = (min(box_rotate, key=lambda p: p[0])[0], min(box_rotate, key=lambda p: p[1])[1])
max_box = (max(box_rotate, key=lambda p: p[0])[0], max(box_rotate, key=lambda p: p[1])[1])

Calculate the "compensated" origin of the upper left point of the image by adding the minimum of the rotated box to the position. For the y coordinate max_box[1] is the minimum, because of the "flipping" along the y axis:

origin = (pos[0] + min_box[0], pos[1] - max_box[1])

rotated_image = pygame.transform.rotate(image, angle)
screen.blit(rotated_image, origin)

To define a pivot on the original image, the "translation" of the pivot in relation to the upper left of the image has to be calculated and the "blit" position of the image has to be displaced by the translation.

Define a pivot e.g. in the center of the image:

pivot = pygame.math.Vector2(w/2, -h/2)

Calculate the translation of the rotated pivot:

pivot_rotate = pivot.rotate(angle)
pivot_move   = pivot_rotate - pivot

Finally calculate the origin of the rotated image:

origin = (pos[0] + min_box[0] - pivot_move[0], pos[1] - max_box[1] + pivot_move[1])

rotated_image = pygame.transform.rotate(image, angle)
screen.blit(rotated_image, origin)

If the image has to be additionally zoomed, then the zoom has to be taken into account when the origin of the image is calculated:

move   = (-pivot[0] + min_box[0] - pivot_move[0], pivot[1] - max_box[1] + pivot_move[1])
origin = (pos[0] + zoom * move[0], pos[1] + zoom * move[1])

rotozoom_image = pygame.transform.rotozoom(image, angle, zoom)
screen.blit(rotozoom_image, origin)

In the following example program, the function blitRotate does all the above steps and "blit" a rotated image to a surface. pos is the position of the image. originPos is the point on the image which is placed on pos and the pivot.

---

Minimal example:

import pygame

pygame.init()
screen = pygame.display.set_mode((300, 300))
clock = pygame.time.Clock()

def blitRotate(surf, image, pos, originPos, angle, zoom):

    # calcaulate the axis aligned bounding box of the rotated image
    w, h       = image.get_size()
    box        = [pygame.math.Vector2(p) for p in [(0, 0), (w, 0), (w, -h), (0, -h)]]
    box_rotate = [p.rotate(angle) for p in box]
    min_box    = (min(box_rotate, key=lambda p: p[0])[0], min(box_rotate, key=lambda p: p[1])[1])
    max_box    = (max(box_rotate, key=lambda p: p[0])[0], max(box_rotate, key=lambda p: p[1])[1])

    # calculate the translation of the pivot 
    pivot        = pygame.math.Vector2(originPos[0], -originPos[1])
    pivot_rotate = pivot.rotate(angle)
    pivot_move   = pivot_rotate - pivot

    # calculate the upper left origin of the rotated image
    move   = (-originPos[0] + min_box[0] - pivot_move[0], -originPos[1] - max_box[1] + pivot_move[1])
    origin = (pos[0] + zoom * move[0], pos[1] + zoom * move[1])

    # get a rotated image
    rotozoom_image = pygame.transform.rotozoom(image, angle, zoom)
  
    # rotate and blit the image
    surf.blit(rotozoom_image, origin)

    # draw rectangle around the image
    pygame.draw.rect (surf, (255, 0, 0), (*origin, *rotozoom_image.get_size()),2)

try:
    image = pygame.image.load('AirPlaneFront1-128.png')
except:
    text = pygame.font.SysFont('Times New Roman', 50).render('image', False, (255, 255, 0))
    image = pygame.Surface((text.get_width()+1, text.get_height()+1))
    pygame.draw.rect(image, (0, 0, 255), (1, 1, *text.get_size()))
    image.blit(text, (1, 1))
w, h = image.get_size()

start = False
angle, zoom = 0, 1
done = False
while not done:
    clock.tick(60)
    for event in pygame.event.get():
        if event.type == pygame.QUIT:
            done = True
        elif event.type == pygame.KEYDOWN or event.type == pygame.MOUSEBUTTONDOWN:
            start = True

    pos = (screen.get_width()/2, screen.get_height()/2)
    
    screen.fill(0)
    blitRotate(screen, image, pos, (w/2, h/2), angle, zoom)
    if start:
        angle += 1
        zoom += 0.01
        if zoom > 5:
            zoom = 1

    pygame.draw.line(screen, (0, 255, 0), (pos[0]-20, pos[1]), (pos[0]+20, pos[1]), 3)
    pygame.draw.line(screen, (0, 255, 0), (pos[0], pos[1]-20), (pos[0], pos[1]+20), 3)
    pygame.draw.circle(screen, (0, 255, 0), pos, 7, 0)

    pygame.display.flip()
    
pygame.quit()
exit()

这篇关于如何在图像比例变大时围绕其中心旋转图像(在Pygame中)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！