libgdx 中的图像边框

Question

由于我是 Libgdx 开发的新手，我想问一下是否可以使用它制作图像边框（将其标记为选中）？我读过一种解决方案是制作两张单独的图像：一张有边框，一张没有。然而，我几乎所有的图像都是相同大小的，而且其中有很多，所以不知道这是否是最好的主意。还有其他选择吗？

编辑

所以我选择了第二个想法（1x1 图像），但它存在一些问题。首先，我不能使该borderImage 处于单击元素之下。另一个问题是borderImage 的大小（不一样）。当我单击按钮的中心时，它比单击边缘时更小（大约几个像素）。你知道什么会导致这些问题以及如何解决这些问题吗？ 代码：

public void create(){
        stage = new Stage();
        Gdx.input.setInputProcessor(stage);

        skin = new Skin(Gdx.files.internal("data/uiskin.json"));

        Texture borderTexture = new Texture(Gdx.files.internal("data/select.png") );
        final Image borderImage = new Image( borderTexture );

        TextButton exitButton = new TextButton("Exit",skin);

        exitButton.addListener(new ClickListener(){
            public void clicked(InputEvent event, float x, float y)
                {
                  borderImage.setSize( event.getTarget().getWidth() + 1 * 2, event.getTarget().getHeight() + 1 * 2);




                Vector2 loc = new Vector2(0, 0);
               Vector2 stageLoc = event.getTarget().localToStageCoordinates(loc); 
               borderImage.setPosition( stageLoc.x, stageLoc.y);  

               System.out.println("" + event.getTarget().getWidth() + " " +event.getTarget().getHeight() + " " + event.getTarget().getX() + 
                       " " + event.getTarget().getY() + " " + stageLoc.x + " " + stageLoc.y);

               stage.addActor(borderImage);
                }       
            }
        );

        Table table = new Table();

        table.add(exitButton).colspan(3);

        table.setFillParent(true);
        stage.addActor(table);
}

我的输出： 29.0 25.0 4.0 1.0 466.0 257.0 // 点击按钮中心 37.0 27.0 462.0 256.0 462.0 256.0 // 点击按钮边缘

Answer 1

如果您使用的是 Scene2D 及其 Image 类，最简单的想法是保留您希望边框具有的小颜色纹理。纹理可以是 1px x 1px 大小。由于避免混合边框效果，它应该具有最近过滤。

当点击图像时，您可以创建一个图像大小加上边框宽度的图像，并将其放置在图像实现边框效果的位置。在修饰时，您需要删除边界演员

    Texture borderTexture = new Texture( Gdx.files.internal("border.png") );
    Image borderImage = new Image( borderTexture );

    ...

    //in the clickListener
    public boolean touchDown(InputEvent event, float x, float y, int pointer, int button)
    {
        borderImage.setSize( event.getTarget().getWidth() + BORDER_WIDTH * 2, event.getTarget().getHeight() + BORDER_WIDTH * 2);
        borderImage.setPosition( event.getTarget().getX() - BORDER_WIDTH, event.getTarget.getY() - BORDER_WIDTH);

        stage.addActor( borderImage );
        event.getTarget().toFront(); //to move the original image over the border

        return true;
    }

    public void touchUp(InputEvent event, float x, float y, int pointer, int button)
    {
        borderImage.remove();            
    }

---

如果不使用 Scene2D，您可以通过渲染图像大小 + 边框宽度的 Sprite 来实现相同的效果，并管理一个标志，说明是否渲染边框

     Sprite image, border;

    ...

    //in the input processor
    public boolean touchDown (int x, int y, int pointer, int button) 
    {
        border.setSize( image.getWidth() + BORDER_WIDTH * 2 , image.getHeight() + BORDER_WIDTH * 2 );
        border.setPosition( image.getX() - BORDER_WIDTH, image.getY() - BORDER_WIDTH);

        renderBorder = true;

        return true;
    }

    public boolean touchUp (int x, int y, int pointer, int button) 
    {
        renderBorder = false;

        return false;
    }

    //in the render method
    if(renderBorder)
    {
        border.draw(batch);
    }

    image.draw(batch);

Answer 2

如果是为了我，我会怎么做：

我将为我的所有图像使用一个边框图像（而不是我的每张图像的图像边框）

假设左边是你的图片，右边是边框图片

当图像上发生 Click 事件时，您在图像上绘制边框（您的图像边框在内部是透明的，您可以使用 gimp 之类的编辑器轻松完成）在图像顶部，您将拥有类似的内容

如果大小不同，您可以更改它并在相同位置绘制图像之前固定相同大小

希望这会有所帮助！