在Linux上创建具有范围的wxSlider

18

我正在尝试使用Python中的wxSlider创建具有范围选择选项的滑块。它有一个可选的范围参数,但问题是:

SL_SELRANGE:允许用户在滑块上选择范围。仅适用于Windows操作系统。

而我正在使用Linux。 我想我可以子类化wxSlider并使其在Linux上工作,或者自己创建一个自定义小部件。问题是我不确定如何执行任一选项。 任何想法/提示/指引都将不胜感激。

我尝试了类似于:

range_slider = wx.Slider(parent, wx.ID_ANY, 0, 0, 100, style=wx.SL_HORIZONTAL | wx.SL_LABELS | wx.SL_SELRANGE)

"SL_SELRANGE" 在 Linux 上无效(应该提供两个句柄来选择范围)。


请添加一些代码以演示您的问题。 - jbkkd
查看 wxSlider cpp 小部件的文档。wxSlider 类参考请注意,这些是 wxPython 的上游,并且它们声明此功能仅适用于 Windows。您将需要在 cpp 中进行子类化以克服此障碍。您对此感到满意吗? - OYRM
就是这样..我不太确定如何在Python中实现它.. - poli_g
3个回答

2

我知道这个问题已经几年了,但即使对你来说已经太晚了,它可能会帮助其他人,因为最近我也遇到了同样的问题。

问题

即使在Windows中,wx.SL_SELRANGE样式也不像人们期望的那样工作,它创建了两个独立的“拇指”或手柄,允许用户选择一个范围(参见此类似问题文档)。实际上,它所做的是在轨迹条中绘制静态带,它不与单个用户控制的拇指交互。据我所知,不可能自定义现有的wx.Slider控件以具有两个拇指,因为该控件是本机的。

解决方案

在我构建的应用程序中,我需要使用一个可以实现您想要的功能的控件,但是也找不到任何好的替代品。我最终创建了自己的自定义RangeSlider小部件,它模仿了常规wx.Slider的行为和功能,但具有两个拇指:

范围滑块演示。

请注意,RangeSlider类处理所有图形渲染本身,并且我将其制作成模仿Windows 10外观的样式。因此,滑块的外观不会与不同操作系统的样式匹配,但它仍应在Linux或OSX中工作。如果需要,您可以通过更改颜色和形状来自定义外观(我只是绘制矩形和多边形)。

该小部件有一些限制,它目前不支持样式(例如没有刻度线或垂直滑块)或验证器,但我实现了wx.EVT_SLIDER事件,因此其他控件可以在值更改时得到通知(这就是我用来动态更新文本的滑块值,当用户移动拇指时)。

下面是一个可工作示例的代码(也可在此GitHub gist中找到,我可能随时进行改进)。

import wx


def fraction_to_value(fraction, min_value, max_value):
    return (max_value - min_value) * fraction + min_value


def value_to_fraction(value, min_value, max_value):
    return float(value - min_value) / (max_value - min_value)


class SliderThumb:
    def __init__(self, parent, value):
        self.parent = parent
        self.dragged = False
        self.mouse_over = False
        self.thumb_poly = ((0, 0), (0, 13), (5, 18), (10, 13), (10, 0))
        self.thumb_shadow_poly = ((0, 14), (4, 18), (6, 18), (10, 14))
        min_coords = [float('Inf'), float('Inf')]
        max_coords = [-float('Inf'), -float('Inf')]
        for pt in list(self.thumb_poly) + list(self.thumb_shadow_poly):
            for i_coord, coord in enumerate(pt):
                if coord > max_coords[i_coord]:
                    max_coords[i_coord] = coord
                if coord < min_coords[i_coord]:
                    min_coords[i_coord] = coord
        self.size = (max_coords[0] - min_coords[0],
                     max_coords[1] - min_coords[1])

        self.value = value
        self.normal_color = wx.Colour((0, 120, 215))
        self.normal_shadow_color = wx.Colour((120, 180, 228))
        self.dragged_color = wx.Colour((204, 204, 204))
        self.dragged_shadow_color = wx.Colour((222, 222, 222))
        self.mouse_over_color = wx.Colour((23, 23, 23))
        self.mouse_over_shadow_color = wx.Colour((132, 132, 132))

    def GetPosition(self):
        min_x = self.GetMin()
        max_x = self.GetMax()
        parent_size = self.parent.GetSize()
        min_value = self.parent.GetMin()
        max_value = self.parent.GetMax()
        fraction = value_to_fraction(self.value, min_value, max_value)
        pos = (fraction_to_value(fraction, min_x, max_x), parent_size[1] / 2 + 1)
        return pos

    def SetPosition(self, pos):
        pos_x = pos[0]
        # Limit movement by the position of the other thumb
        who_other, other_thumb = self.GetOtherThumb()
        other_pos = other_thumb.GetPosition()
        if who_other == 'low':
            pos_x = max(other_pos[0] + other_thumb.size[0]/2 + self.size[0]/2, pos_x)
        else:
            pos_x = min(other_pos[0] - other_thumb.size[0]/2 - self.size[0]/2, pos_x)
        # Limit movement by slider boundaries
        min_x = self.GetMin()
        max_x = self.GetMax()
        pos_x = min(max(pos_x, min_x), max_x)

        fraction = value_to_fraction(pos_x, min_x, max_x)
        self.value = fraction_to_value(fraction, self.parent.GetMin(), self.parent.GetMax())
        # Post event notifying that position changed
        self.PostEvent()

    def GetValue(self):
        return self.value

    def SetValue(self, value):
        self.value = value
        # Post event notifying that value changed
        self.PostEvent()

    def PostEvent(self):
        event = wx.PyCommandEvent(wx.EVT_SLIDER.typeId, self.parent.GetId())
        event.SetEventObject(self.parent)
        wx.PostEvent(self.parent.GetEventHandler(), event)

    def GetMin(self):
        min_x = self.parent.border_width + self.size[0] / 2
        return min_x

    def GetMax(self):
        parent_size = self.parent.GetSize()
        max_x = parent_size[0] - self.parent.border_width - self.size[0] / 2
        return max_x

    def IsMouseOver(self, mouse_pos):
        in_hitbox = True
        my_pos = self.GetPosition()
        for i_coord, mouse_coord in enumerate(mouse_pos):
            boundary_low = my_pos[i_coord] - self.size[i_coord] / 2
            boundary_high = my_pos[i_coord] + self.size[i_coord] / 2
            in_hitbox = in_hitbox and (boundary_low <= mouse_coord <= boundary_high)
        return in_hitbox

    def GetOtherThumb(self):
        if self.parent.thumbs['low'] != self:
            return 'low', self.parent.thumbs['low']
        else:
            return 'high', self.parent.thumbs['high']

    def OnPaint(self, dc):
        if self.dragged or not self.parent.IsEnabled():
            thumb_color = self.dragged_color
            thumb_shadow_color = self.dragged_shadow_color
        elif self.mouse_over:
            thumb_color = self.mouse_over_color
            thumb_shadow_color = self.mouse_over_shadow_color
        else:
            thumb_color = self.normal_color
            thumb_shadow_color = self.normal_shadow_color
        my_pos = self.GetPosition()

        # Draw thumb shadow (or anti-aliasing effect)
        dc.SetBrush(wx.Brush(thumb_shadow_color, style=wx.BRUSHSTYLE_SOLID))
        dc.SetPen(wx.Pen(thumb_shadow_color, width=1, style=wx.PENSTYLE_SOLID))
        dc.DrawPolygon(points=self.thumb_shadow_poly,
                       xoffset=my_pos[0] - self.size[0]/2,
                       yoffset=my_pos[1] - self.size[1]/2)
        # Draw thumb itself
        dc.SetBrush(wx.Brush(thumb_color, style=wx.BRUSHSTYLE_SOLID))
        dc.SetPen(wx.Pen(thumb_color, width=1, style=wx.PENSTYLE_SOLID))
        dc.DrawPolygon(points=self.thumb_poly,
                       xoffset=my_pos[0] - self.size[0] / 2,
                       yoffset=my_pos[1] - self.size[1] / 2)


class RangeSlider(wx.Panel):
    def __init__(self, parent, id=wx.ID_ANY, lowValue=None, highValue=None, minValue=0, maxValue=100,
                 pos=wx.DefaultPosition, size=wx.DefaultSize, style=wx.SL_HORIZONTAL, validator=wx.DefaultValidator,
                 name='rangeSlider'):
        if style != wx.SL_HORIZONTAL:
            raise NotImplementedError('Styles not implemented')
        if validator != wx.DefaultValidator:
            raise NotImplementedError('Validator not implemented')
        super().__init__(parent=parent, id=id, pos=pos, size=size, name=name)
        self.SetMinSize(size=(max(50, size[0]), max(26, size[1])))
        if minValue > maxValue:
            minValue, maxValue = maxValue, minValue
        self.min_value = minValue
        self.max_value = maxValue
        if lowValue is None:
            lowValue = self.min_value
        if highValue is None:
            highValue = self.max_value
        if lowValue > highValue:
            lowValue, highValue = highValue, lowValue
        lowValue = max(lowValue, self.min_value)
        highValue = min(highValue, self.max_value)

        self.border_width = 8

        self.thumbs = {
            'low': SliderThumb(parent=self, value=lowValue),
            'high': SliderThumb(parent=self, value=highValue)
        }
        self.thumb_width = self.thumbs['low'].size[0]

        # Aesthetic definitions
        self.slider_background_color = wx.Colour((231, 234, 234))
        self.slider_outline_color = wx.Colour((214, 214, 214))
        self.selected_range_color = wx.Colour((0, 120, 215))
        self.selected_range_outline_color = wx.Colour((0, 120, 215))

        # Bind events
        self.Bind(wx.EVT_LEFT_DOWN, self.OnMouseDown)
        self.Bind(wx.EVT_LEFT_UP, self.OnMouseUp)
        self.Bind(wx.EVT_MOTION, self.OnMouseMotion)
        self.Bind(wx.EVT_MOUSE_CAPTURE_LOST, self.OnMouseLost)
        self.Bind(wx.EVT_ENTER_WINDOW, self.OnMouseEnter)
        self.Bind(wx.EVT_LEAVE_WINDOW, self.OnMouseLeave)
        self.Bind(wx.EVT_PAINT, self.OnPaint)
        self.Bind(wx.EVT_ERASE_BACKGROUND, self.OnEraseBackground)
        self.Bind(wx.EVT_SIZE, self.OnResize)

    def Enable(self, enable=True):
        super().Enable(enable)
        self.Refresh()

    def Disable(self):
        super().Disable()
        self.Refresh()

    def SetValueFromMousePosition(self, click_pos):
        for thumb in self.thumbs.values():
            if thumb.dragged:
                thumb.SetPosition(click_pos)

    def OnMouseDown(self, evt):
        if not self.IsEnabled():
            return
        click_pos = evt.GetPosition()
        for thumb in self.thumbs.values():
            if thumb.IsMouseOver(click_pos):
                thumb.dragged = True
                thumb.mouse_over = False
                break
        self.SetValueFromMousePosition(click_pos)
        self.CaptureMouse()
        self.Refresh()

    def OnMouseUp(self, evt):
        if not self.IsEnabled():
            return
        self.SetValueFromMousePosition(evt.GetPosition())
        for thumb in self.thumbs.values():
            thumb.dragged = False
        if self.HasCapture():
            self.ReleaseMouse()
        self.Refresh()

    def OnMouseLost(self, evt):
        for thumb in self.thumbs.values():
            thumb.dragged = False
            thumb.mouse_over = False
        self.Refresh()

    def OnMouseMotion(self, evt):
        if not self.IsEnabled():
            return
        refresh_needed = False
        mouse_pos = evt.GetPosition()
        if evt.Dragging() and evt.LeftIsDown():
            self.SetValueFromMousePosition(mouse_pos)
            refresh_needed = True
        else:
            for thumb in self.thumbs.values():
                old_mouse_over = thumb.mouse_over
                thumb.mouse_over = thumb.IsMouseOver(mouse_pos)
                if old_mouse_over != thumb.mouse_over:
                    refresh_needed = True
        if refresh_needed:
            self.Refresh()

    def OnMouseEnter(self, evt):
        if not self.IsEnabled():
            return
        mouse_pos = evt.GetPosition()
        for thumb in self.thumbs.values():
            if thumb.IsMouseOver(mouse_pos):
                thumb.mouse_over = True
                self.Refresh()
                break

    def OnMouseLeave(self, evt):
        if not self.IsEnabled():
            return
        for thumb in self.thumbs.values():
            thumb.mouse_over = False
        self.Refresh()

    def OnResize(self, evt):
        self.Refresh()

    def OnPaint(self, evt):
        w, h = self.GetSize()
        # BufferedPaintDC should reduce flickering
        dc = wx.BufferedPaintDC(self)
        background_brush = wx.Brush(self.GetBackgroundColour(), wx.SOLID)
        dc.SetBackground(background_brush)
        dc.Clear()
        # Draw slider
        track_height = 12
        dc.SetPen(wx.Pen(self.slider_outline_color, width=1, style=wx.PENSTYLE_SOLID))
        dc.SetBrush(wx.Brush(self.slider_background_color, style=wx.BRUSHSTYLE_SOLID))
        dc.DrawRectangle(self.border_width, h/2 - track_height/2, w - 2 * self.border_width, track_height)
        # Draw selected range
        if self.IsEnabled():
            dc.SetPen(wx.Pen(self.selected_range_outline_color, width=1, style=wx.PENSTYLE_SOLID))
            dc.SetBrush(wx.Brush(self.selected_range_color, style=wx.BRUSHSTYLE_SOLID))
        else:
            dc.SetPen(wx.Pen(self.slider_outline_color, width=1, style=wx.PENSTYLE_SOLID))
            dc.SetBrush(wx.Brush(self.slider_outline_color, style=wx.BRUSHSTYLE_SOLID))
        low_pos = self.thumbs['low'].GetPosition()[0]
        high_pos = self.thumbs['high'].GetPosition()[0]
        dc.DrawRectangle(low_pos, h / 2 - track_height / 4, high_pos - low_pos, track_height / 2)
        # Draw thumbs
        for thumb in self.thumbs.values():
            thumb.OnPaint(dc)
        evt.Skip()

    def OnEraseBackground(self, evt):
        # This should reduce flickering
        pass

    def GetValues(self):
        return self.thumbs['low'].value, self.thumbs['high'].value

    def SetValues(self, lowValue, highValue):
        if lowValue > highValue:
            lowValue, highValue = highValue, lowValue
        lowValue = max(lowValue, self.min_value)
        highValue = min(highValue, self.max_value)
        self.thumbs['low'].SetValue(lowValue)
        self.thumbs['high'].SetValue(highValue)
        self.Refresh()

    def GetMax(self):
        return self.max_value

    def GetMin(self):
        return self.min_value

    def SetMax(self, maxValue):
        if maxValue < self.min_value:
            maxValue = self.min_value
        _, old_high = self.GetValues()
        if old_high > maxValue:
            self.thumbs['high'].SetValue(maxValue)
        self.max_value = maxValue
        self.Refresh()

    def SetMin(self, minValue):
        if minValue > self.max_value:
            minValue = self.max_value
        old_low, _ = self.GetValues()
        if old_low < minValue:
            self.thumbs['low'].SetValue(minValue)
        self.min_value = minValue
        self.Refresh()


class TestFrame(wx.Frame):
    def __init__(self):
        wx.Frame.__init__(self, None, -1, 'Range Slider Demo', size=(300, 100))
        panel = wx.Panel(self)
        b = 6
        vbox = wx.BoxSizer(orient=wx.VERTICAL)
        vbox.Add(wx.StaticText(parent=panel, label='Custom Range Slider:'), flag=wx.ALIGN_LEFT | wx.ALL, border=b)
        self.rangeslider = RangeSlider(parent=panel, lowValue=20, highValue=80, minValue=0, maxValue=100,
                                       size=(300, 26))
        self.rangeslider.Bind(wx.EVT_SLIDER, self.rangeslider_changed)
        vbox.Add(self.rangeslider, proportion=1, flag=wx.EXPAND | wx.ALL, border=b)
        self.rangeslider_static = wx.StaticText(panel)
        vbox.Add(self.rangeslider_static, flag=wx.ALIGN_LEFT | wx.ALL, border=b)
        vbox.Add(wx.StaticText(parent=panel, label='Regular Slider with wx.SL_SELRANGE style:'),
                 flag=wx.ALIGN_LEFT | wx.ALL, border=b)
        self.slider = wx.Slider(parent=panel, style=wx.SL_SELRANGE)
        self.slider.SetSelection(20, 40)
        self.slider.Bind(wx.EVT_SLIDER, self.slider_changed)
        vbox.Add(self.slider, proportion=1, flag=wx.EXPAND | wx.ALL, border=b)
        self.slider_static = wx.StaticText(panel)
        vbox.Add(self.slider_static, flag=wx.ALIGN_LEFT | wx.ALL, border=b)
        self.button_toggle = wx.Button(parent=panel, label='Disable')
        self.button_toggle.Bind(wx.EVT_BUTTON, self.toggle_slider_enable)
        vbox.Add(self.button_toggle, flag=wx.ALIGN_CENTER | wx.ALL, border=b)
        panel.SetSizerAndFit(vbox)
        box = wx.BoxSizer()
        box.Add(panel, proportion=1, flag=wx.EXPAND)
        self.SetSizerAndFit(box)

    def slider_changed(self, evt):
        obj = evt.GetEventObject()
        val = obj.GetValue()
        self.slider_static.SetLabel('Value: {}'.format(val))

    def rangeslider_changed(self, evt):
        obj = evt.GetEventObject()
        lv, hv = obj.GetValues()
        self.rangeslider_static.SetLabel('Low value: {:.0f}, High value: {:.0f}'.format(lv, hv))

    def toggle_slider_enable(self, evt):
        if self.button_toggle.GetLabel() == 'Disable':
            self.slider.Enable(False)
            self.rangeslider.Enable(False)
            self.button_toggle.SetLabel('Enable')
        else:
            self.slider.Enable(True)
            self.rangeslider.Enable(True)
            self.button_toggle.SetLabel('Disable')


def main():
    app = wx.App()
    TestFrame().Show()
    app.MainLoop()


if __name__ == "__main__":
    main()


1
你可以有两个滑块;一个会推动另一个使其保持较低的位置,而另一个则保持较高的位置?
我知道这不是同样的东西,抱歉,但这是一种选择。 所以每当self.minSlider移动时,你绑定wx.EVT_SCROLL事件到一个函数,该函数将执行类似以下操作的功能:
self.minSlider.Bind(wx.EVT_SCROLL, self.respondSliderChange())

def respondSliderChange(self):
    if self.minSlider.GetValue() >= self.maxSlider.GetValue():
        self.maxSlider.SetValue(self.minSlider.GetValue()+1)

对于maxSlider,反之亦然。
此外,您可以考虑创建一个自定义小部件在这里

0

这里描述了一些相关的内容here

简而言之,这个想法是画一个框,然后着色表示您的范围。从用户左键单击的左侧开始,到用户右键单击的右侧结束。

除了框和着色,您还可以在一条线上绘制一些标记:

--------[-----------]--

我已经看过了,谢谢。这将是我的最后一招。想法是在Linux上使用带有RANGE选项的内置wxSlider,也就是说,以某种方式进行调整使其工作,我不想自己绘制整个东西并做很多可以避免的额外工作。 - poli_g

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接