如何在代码中滚动ScrollPane? [英] How to scroll a ScrollPane in code?

问题描述

我正在尝试在LibGDX中制作这样的滚轮组件:

I’m trying to make a scrollwheel component like this in LibGDX:

我正在使用ScrollPane，因为它内置了输入和清除处理功能.我有一个用于飞轮的图像，该图像分为14个部分，滚动窗格本身短了两个部分，因此右侧有一个部分，它可以向任一方向滚动到左侧.一旦滚动位置到达任一方向的末端，我想将滚动位置重置回中心.一遍又一遍地执行此操作应该会产生一个无限滚动轮的错觉(希望如此).

I’m using ScrollPane since it has input and fling handling built in. I have an image for the scrollwheel that is divided into 14 sections, the scrollpane itself is two sections shorter so that there will be one section on the right and left sides that it can scroll to in either direction. Once the scroll position reaches the end in either direction I want to reset the scroll position back to the center. Doing this over and over again should create the illusion of an infinite scrolling wheel (hopefully).

我遇到的问题是如何在代码中放置ScrollPane，以便在到达任一端时重置图像.到目前为止，我没有尝试设置滚动位置的任何方法都起作用.我已经尝试过setScrollX()和scrollTo()方法.我还尝试将滚动窗格的大小设置为各种大小(与图像大小相同，并且比图像小两个部分).在设置滚动值之前，我尝试调用布局，使布局无效并打包在滚动窗格上，以确保布局正确.我以为updateVisualScroll()可能会强制其更新滚动位置，但这也没有效果.

The problem I’m having is how to position the ScrollPane in code to reset the image once it reaches either end. So far nothing I have tried to set the scroll position has worked. I’ve tried setScrollX() and scrollTo() methods. I’ve also tried setting the size of the scrollpane to be various sizes (same size as image and two sections smaller than the image). I’ve tried calling layout, invalidate, and pack on the scrollpane to make sure it is laid out correctly before I set the scroll value. I thought that updateVisualScroll() might force it to update the scroll position, but this also has no effect.

无论我做什么，都只是忽略了所有更改滚动位置的呼叫，因此我显然缺少了一些东西.在下面的代码中，我试图使滚轮在图像的中心开始，而其开始位置一直在左侧.

No matter what I do it simply ignores all of my calls to change the scroll position so I’m clearly missing something. In my code below I'm trying to get the scrollwheel to start in the center of the image and instead it's starting position is all the way at the left.

我还需要能够获取当前的滚动位置，以检测其何时到达两端.我尝试覆盖act()方法并打印出scrollPane.getX()，但是即使我手动单击并拖动它以滚动ScrollPane，该值也始终为"0".

I also need to be able to get the current scroll position to detect when it has reached either end. I tried overriding the act() method and printing out scrollPane.getX(), but this value was always "0" even when I manually clicked and dragged it to scroll the ScrollPane.

在手动单击和拖动时滚动确实起作用，因此我相信ScrollPane设置正确，只是无法在代码内滚动.

The scrolling does work when manually clicking and dragging, so I believe the ScrollPane is set up correctly, I just can’t get it to scroll within the code.

这是我的代码，为简单起见，我删除了所有实验代码，因为我的实验均无效.

Here is my code, and for simplicity I took all of my experimentation code out because none of my experimenting worked.

public class MyScrollWheel extends Container<ScrollPane> {
    private ScrollPane scrollPane;
    private Image image;
    private int scrollOffset;

    public MyScrollWheel(){
        Texture texture = new Texture(Gdx.files.internal("internal/scrollwheel.png"));
        image = new Image(texture);

        scrollOffset = (int)(image.getWidth()/14);

        scrollPane = new ScrollPane(image);
        scrollPane.setOverscroll(false, false);

        setActor(scrollPane);
        size(image.getWidth()-(scrollOffset*2), image.getHeight());

        scrollPane.setScrollX(scrollOffset); // << this doesn't scroll
        scrollPane.updateVisualScroll();
    }
}

推荐答案

好吧，我希望可以得到一些可以建立的东西.我所做的只是扩展actor并使其接受Texture，因此我可以使用Texture.wrap并使用SpriteBatch.draw()进行绘制.我现在可以继续滚动它，并且基于滚动增量，您可以算出它已经滚动了多远.我看不到需要重设轮子，但如果您确实愿意，可以执行wheel.setScroll(0);.

Well, I hopefully managed to get something you can build upon. What I simply did was extending actor and have it accept a Texture so I could use Texture.wrap and have it draw with SpriteBatch.draw(). I am able to keep scrolling it now and based on the scroll delta you can figure out how far it has been scrolled. I don't see any need to reset the wheel but if you really want to you can just do wheel.setScroll(0);.

一个限制是它不是Drawable，因此不能像NinePatch那样缩放.您必须给它一个普通的轮子纹理，使其绘制为您希望的矛状大小，但是可以添加常规缩放比例，并手动保持长宽比.然后在其上添加侧面，并在其上叠加渐变以创建深度.

One limitation is that it is not a Drawable so it cannot be scaled like a NinePatch. You have to give it a plain wheel texture draw it the size you want it to spear, you can add normal scaling however and keep aspect ratio manually. Then add the sides to it and perhaps overlay a gradient on those to create depth.

ScrollWheel:

public class ScrollWheel extends Actor {
    Texture wheelTexture;
    private int scroll = 0;

    public int getScroll() {
        return scroll;
    }
    public void setScroll(int scroll) {
        this.scroll = scroll;
    }

    public ScrollWheel(Texture texture)
    {
        wheelTexture = texture;
        wheelTexture.setWrap(Texture.TextureWrap.Repeat, Texture.TextureWrap.ClampToEdge);

        setWidth(texture.getWidth());
        setHeight(texture.getHeight());
    }

    @Override
    public void draw(Batch batch, float parentAlpha) {
        super.draw(batch, parentAlpha);

        batch.draw(wheelTexture, getX(), getY(), scroll, 0,
                wheelTexture.getWidth(), wheelTexture.getHeight());
    }
}

在屏幕上的用法:

public class TestScreen implements Screen {
    Stage stage;
    ScrollWheel wheel;

    public TestScreen() {
        stage = new Stage();
        Table t = new Table();
        t.setFillParent(true);
        stage.addActor(t);

        wheel = new ScrollWheel(new Texture("hud/wheel_part.png"));
        wheel.addListener(new DragListener() {
            @Override
            public void drag(InputEvent event, float x, float y, int pointer) {
                super.drag(event, x, y, pointer);
                wheel.setScroll(wheel.getScroll() + (int)getDeltaX());
            }
        });

        t.add(wheel);
        Gdx.input.setInputProcessor(stage);
    }

    @Override
    public void render(float delta) {
        Gdx.gl.glClearColor(.3f, .36f, .42f, 1);
        Gdx.gl.glClear(GL20.GL_COLOR_BUFFER_BIT);

        stage.act();
        stage.draw();
    }
    //...Other mandatory screen methods...
}

因此，只需创建一个可填充的车轮纹理，并将其包含在ScrollWheel构造函数中即可.如果使用此确切的代码，它将在屏幕中央绘制滚轮.

So just create a wheel texture that is tillable and include that with the ScrollWheel constructor. It will draw the wheel in the center of the screen if you use this exact code.

scroll变量实质上保留滚动量，因此，如果您希望将滚动范围限制在0到100之间，则只需在setScroll()中添加此功能.

The scroll variable essentially holds the amount of scroll so if you you want limit this between 0 and 100 you would just add this functionality in setScroll().

if (scroll > 100) scroll = 100; 
else if (scroll < 0) scroll = 0;

然后可以在其中添加一个步骤.因此，如果要使用滑块旋转图像，可以通过scroll * 3,6f或scroll * (maxScroll / maxStep)

You could then add a step to it. So if you want to rotate a image with the slider you could set the rotation by scroll * 3,6f or scroll * (maxScroll / maxStep)

我真的很喜欢这种方式，以后我将在滑块中使用它:D.我已经对其进行了扩展和更改，您可以在这里看到我的实现: https://youtu.be/RNLk5B- VfYg

I really liked the way this turned out, I will be using this for my slider in the future :D. I have extended and altered it a bit already and you can see my implementation here: https://youtu.be/RNLk5B-VfYg

这篇关于如何在代码中滚动ScrollPane?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！