모서리를 보존하면서 파이 게임에서 이미지 늘이기

Question

제목은 정말 모두를 말합니다. UI 거품이 나타날 것이기 때문에 내가 바라는 효과는 UI에 사용될 것이고, 나는 그것들을 늘려서 움직이기 원합니다.

iOS 메시징 응용 프로그램의 채팅 거품은이 동작의 좋은 예입니다. here for example을 참조하십시오. 마지막 채팅 남았습니다 행동 거품

주의 : 여기에 재생되는 메인 이미지입니다. 이것은 메시징 앱에서는 정상적인 현상이 아니며 적절한 확장은 내가 Pygame으로 얻고 자하는 것입니다.

파이 게임에서 이러한 종류의 스트레칭을 재현하는 쉬운 방법이 있습니까? 어떤 구속 조건이 있더라도, 모든 구석은 같은 크기 또는 무언가 여야합니다. 가능한 무엇이 있는지 알고 싶습니다.

감사합니다.

Answer 1

코멘트에서 제안한 내용을 토대로 파이크메 (pygame)에 9 조각의 스프라이트를 만들고 렌더링하는 클래스 인 SliceSprite을 구현했습니다. 나는 또한 그것이 사용될 수있는 방법을 보여주는 샘플을 포함시켰다. 가장자리가 거칠어 보이지만 (정의 된 왼쪽 및 오른쪽 슬라이스 크기보다 작은 너비로 스프라이트의 크기를 조정할 때와 같이 잘못된 입력을 확인하지는 않지만) 유용한 시작이어야합니다.이 코드는 이러한 엣지 케이스를 처리하도록 업데이트되고 연마되었으며 주석에 @skrx가 제안한대로 모든 그리기 호출시 9 개의 하위 서페이스를 다시 작성하지 않습니다.

slicesprite.py

import pygame 

class SliceSprite(pygame.sprite.Sprite): 
    """ 
    SliceSprite extends pygame.sprite.Sprite to allow for 9-slicing of its contents. 
    Slicing of its image property is set using a slicing tuple (left, right, top, bottom). 
    Values for (left, right, top, bottom) are distances from the image edges. 
    """ 
    width_error = ValueError("SliceSprite width cannot be less than (left + right) slicing") 
    height_error = ValueError("SliceSprite height cannot be less than (top + bottom) slicing") 

    def __init__(self, image, slicing=(0, 0, 0, 0)): 
     """ 
     Creates a SliceSprite object. 
     _sliced_image is generated in _generate_slices() only when _regenerate_slices is True. 
     This avoids recomputing the sliced image whenever each SliceSprite parameter is changed 
     unless absolutely necessary! Additionally, _rect does not have direct @property access 
     since updating properties of the rect would not be trigger _regenerate_slices. 

     Args: 
      image (pygame.Surface): the original surface to be sliced 
      slicing (tuple(left, right, top, bottom): the 9-slicing margins relative to image edges 
     """ 
     pygame.sprite.Sprite.__init__(self) 
     self._image = image 
     self._sliced_image = None 
     self._rect = self.image.get_rect() 
     self._slicing = slicing 
     self._regenerate_slices = True 

    @property 
    def image(self): 
     return self._image 

    @image.setter 
    def image(self, new_image): 
     self._image = new_image 
     self._regenerate_slices = True 

    @property 
    def width(self): 
     return self._rect.width 

    @width.setter 
    def width(self, new_width): 
     self._rect.width = new_width 
     self._regenerate_slices = True 

    @property 
    def height(self): 
     return self._rect.height 

    @height.setter 
    def height(self, new_height): 
     self._rect.height = new_height 
     self._regenerate_slices = True 

    @property 
    def x(self): 
     return self._rect.x 

    @x.setter 
    def x(self, new_x): 
     self._rect.x = new_x 
     self._regenerate_slices = True 

    @property 
    def y(self): 
     return self._rect.y 

    @y.setter 
    def y(self, new_y): 
     self._rect.y = new_y 
     self._regenerate_slices = True 

    @property 
    def slicing(self): 
     return self._slicing 

    @slicing.setter 
    def slicing(self, new_slicing=(0, 0, 0, 0)): 
     self._slicing = new_slicing 
     self._regenerate_slices = True 

    def get_rect(self): 
     return self._rect 

    def set_rect(self, new_rect): 
     self._rect = new_rect 
     self._regenerate_slices = True 

    def _generate_slices(self): 
     """ 
     Internal method required to generate _sliced_image property. 
     This first creates nine subsurfaces of the original image (corners, edges, and center). 
     Next, each subsurface is appropriately scaled using pygame.transform.smoothscale. 
     Finally, each subsurface is translated in "relative coordinates." 
     Raises appropriate errors if rect cannot fit the center of the original image. 
     """ 
     num_slices = 9 
     x, y, w, h = self._image.get_rect() 
     l, r, t, b = self._slicing 
     mw = w - l - r 
     mh = h - t - b 
     wr = w - r 
     hb = h - b 

     rect_data = [ 
      (0, 0, l, t), (l, 0, mw, t), (wr, 0, r, t), 
      (0, t, l, mh), (l, t, mw, mh), (wr, t, r, mh), 
      (0, hb, l, b), (l, hb, mw, b), (wr, hb, r, b), 
     ] 

     x, y, w, h = self._rect 
     mw = w - l - r 
     mh = h - t - b 
     if mw < 0: raise SliceSprite.width_error 
     if mh < 0: raise SliceSprite.height_error 

     scales = [ 
      (l, t), (mw, t), (r, t), 
      (l, mh), (mw, mh), (r, mh), 
      (l, b), (mw, b), (r, b), 
     ] 

     translations = [ 
      (0, 0), (l, 0), (l + mw, 0), 
      (0, t), (l, t), (l + mw, t), 
      (0, t + mh), (l, t + mh), (l + mw, t + mh), 
     ] 

     self._sliced_image = pygame.Surface((w, h)) 
     for i in range(num_slices): 
      rect = pygame.rect.Rect(rect_data[i]) 
      surf_slice = self.image.subsurface(rect) 
      stretched_slice = pygame.transform.smoothscale(surf_slice, scales[i]) 
      self._sliced_image.blit(stretched_slice, translations[i]) 

    def draw(self, surface): 
     """ 
     Draws the SliceSprite onto the desired surface. 
     Calls _generate_slices only at draw time only if necessary. 
     Note that the final translation occurs here in "absolute coordinates." 

     Args: 
      surface (pygame.Surface): the parent surface for blitting SliceSprite 
     """ 
     x, y, w, h, = self._rect 
     if self._regenerate_slices: 
      self._generate_slices() 
      self._regenerate_slices = False 
     surface.blit(self._sliced_image, (x, y)) 

사용 예 (main.py) : 여기

import pygame 
from slicesprite import SliceSprite 

if __name__ == "__main__": 
    pygame.init() 
    screen = pygame.display.set_mode((800, 600)) 
    clock = pygame.time.Clock() 
    done = False 

    outer_points = [(0, 20), (20, 0), (80, 0), (100, 20), (100, 80), (80, 100), (20, 100), (0, 80)] 
    inner_points = [(10, 25), (25, 10), (75, 10), (90, 25), (90, 75), (75, 90), (25, 90), (10, 75)] 
    image = pygame.Surface((100, 100), pygame.SRCALPHA) 
    pygame.draw.polygon(image, (20, 100, 150), outer_points) 
    pygame.draw.polygon(image, (0, 60, 120), inner_points) 

    button = SliceSprite(image, slicing=(25, 25, 25, 25)) 
    button.set_rect((50, 100, 500, 200)) 
    #Alternate version if you hate using rects for some reason 
    #button.x = 50 
    #button.y = 100 
    #button.width = 500 
    #button.height = 200 

    while not done: 
     for event in pygame.event.get(): 
      if event.type == pygame.QUIT: 
       done = True 
     screen.fill((0, 0, 0)) 
     button.draw(screen) 
     pygame.display.flip() 
     clock.tick() 

Answer 2

는 그것을 분할함으로써 표면의 확대 된 버전을 생성하는 해결책 세 부분으로 나누고 중간 선을 반복적으로 blitting. 수직 확대도 비슷하게 작동합니다.

import pygame as pg 


def enlarge_horizontal(image, width=None): 
    """A horizontally enlarged version of the image. 

    Blit the middle line repeatedly to enlarge the image. 

    Args: 
     image (pygame.Surface): The original image/surface. 
     width (int): Desired width of the scaled surface. 
    """ 
    w, h = image.get_size() 
    # Just return the original image, if the desired width is too small. 
    if width is None or width < w: 
     return image 
    mid_point = w//2 
    # Split the image into 3 parts (left, mid, right). 
    # `mid` is just the middle vertical line. 
    left = image.subsurface((0, 0, w//2, h)) 
    mid = image.subsurface((mid_point, 0, 1, h)) 
    right = image.subsurface((mid_point, 0, w//2, h)) 
    surf = pg.Surface((width, h), pg.SRCALPHA) 

    # Join the parts (blit them onto the new surface). 
    surf.blit(left, (0, 0)) 
    for i in range(width-w+1): 
     surf.blit(mid, (mid_point+i, 0)) 
    surf.blit(right, (width-w//2, 0)) 
    return surf 


def main(): 
    screen = pg.display.set_mode((800, 800)) 
    clock = pg.time.Clock() 
    image = pg.Surface((100, 100), pg.SRCALPHA) 
    pg.draw.circle(image, (20, 100, 150), (50, 50), 50) 
    pg.draw.circle(image, (0, 60, 120), (50, 50), 45) 

    surfs = [enlarge_horizontal(image, width=i) for i in range(0, 701, 140)] 

    while True: 
     for event in pg.event.get(): 
      if event.type == pg.QUIT: 
       return 

     screen.fill((30, 30, 40)) 
     for i, surf in enumerate(surfs): 
      screen.blit(surf, (20, i*109 + 5)) 
     pg.display.flip() 
     clock.tick(60) 


if __name__ == '__main__': 
    pg.init() 
    main() 
    pg.quit()