Question

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

修改

所以我选择了第二个想法（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

在这里，如果是为了我，我会做什么：

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

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

当你在图像上出现Click事件时，你在图像上绘制边框（你的图像边框是透明的，你可以很容易地使用像gimp这样的编辑器），你会有类似的东西

如果尺寸不同，您可以更改它并在将图像绘制到相同位置之前固定相同的尺寸

希望这会有所帮助！

Answer 2

如果您正在使用Scene2D及其Image类，最简单的想法是保持您希望边框具有的小纹理颜色。纹理可以像 1px x 1px尺寸。它应该具有最近过滤，因为避免混合边框效果。

单击图像时，您可以创建图像大小加上边框宽度的图像，并将其放置在图像达到边框效果的位置。在修饰时，您需要删除border-actor

    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);

libgdx中图像的边框

2 个答案: