创建自定义可伸缩滑块 - 流程

Question

我一直在研究UI小部件已经有几天了，并且大部分时间都在努力解决这个问题，表面看起来很简单！

任务是实现可以水平缩放的时间线。简单！

鼠标沿着时间轴水平放置的位置应该保持缩放时的线条，时间线应该远离该点。不过，表面上相对简单！

我找到了棘手的部分，它正在调整线条的长度和'时间轴'的值，因为它在窗口小部件中相对于其相对“像素”值进行了缩放，并且更新了相对于任何缩放和偏移的滚动条

此图片说明了任务：

问题的图像概述

实施是在Qt和C ++中，然而挑战和我的问题更多是关于解决问题的过程。 （请原谅我不正确的标签）。

我的问题是： （A）如何通过解决方案和实施来解决这个问题。 （B）你将如何“学习”解决这个问题和类似问题的步骤。

谢谢，

如果我能够进一步澄清问题，请告诉我（或许可以传达问题是问题:)）

Answer 1

您需要重新实现“缩放事件”并计算新范围和单步。

class ZoomSlider : public QSlider
{
    Q_OBJECT

    public:
        explicit ZoomSlider(QWidget *parent = Q_NULLPTR) : QSlider(parent) {}

    protected:
        void wheelEvent(QWheelEvent *event)
        {
            // Calculate x, y and z from event
            setRange(x, y);
            setSingleStep(z);
        }
};

Answer 2

如果您的滑块的宽度为W且当前范围为[w1, w2]，请将鼠标置于wm的{​​{1}}位置。

鉴于您希望按每个w1 <= wm <= w2的百分比放大/缩小。

10%

如果放大，则新范围#define ZOOM_RATIO 0.1 会更小，因此[i1,i2]和i1>w1：

i2<w2

缩小时：

i1 = wm - ( wm - w1 ) * ( 1.0 - ZOOM_RATIO );
i2 = wm - ( wm - w2 ) * ( 1.0 - ZOOM_RATIO );

之后，您需要检查新范围的有效性：即裁剪范围i1 = wm - ( wm - w1 ) * ( 1.0 + ZOOM_RATIO ); i2 = wm - ( wm - w2 ) * ( 1.0 + ZOOM_RATIO ); 。

请确保[0, wmax]使用double。或者至少，在进行计算之前转换为double。