如何创建一个3色渐变刻度盘(显示绿黄红色)

时间:2012-08-17 18:21:11

标签: pyqt

Dial-with-static-gradient-indicator

所以我将这个拨号图像用于PyQt小部件。现在,正如您所看到的,渐变指示器,绿色 - 黄色 - 红色的弧是静态的,是图像的一部分。

我想动态创建它,以便基于某些范围,可以确定颜色。例如,我可能想要大约60度的红色和其余的绿色和黄色,而不是绿色和红色的相等部分。为此,我将指定一些范围(例如,0-90度的值应该是绿色等)。

关于如何绘制这样的CURVED颜色渐变的任何想法?

1 个答案:

答案 0 :(得分:5)

要实现这一点,一种方法是创建一个小部件并执行自定义paintEvent。您将使用几个元素构建此结果:

  1. 绘制仪表背景的静态像素图
  2. 使用渐变
  3. 绘制饼形
  4. 使用原始图像重新填充中心以再次将其剪切回来
  5. 您需要在init中缓存pixmap一次,这样就不会继续从磁盘创建它。然后,您可以为窗口小部件提供一个方法来设置0.0 - 1.0的值。

    class GaugeWidget(QtGui.QWidget):
    
        def __init__(self, initialValue=0, *args, **kwargs):
            super(GaugeWidget, self).__init__(*args, **kwargs)
            self._bg = QtGui.QPixmap("bg.png")
            self.setValue(initialValue)
    
        def setValue(self, val):
            val = float(min(max(val, 0), 1))
            self._value = -270 * val
            self.update()
    
    
        def paintEvent(self, event):
            painter = QtGui.QPainter(self)
            painter.setRenderHint(painter.Antialiasing)
            rect = event.rect()
    
            gauge_rect = QtCore.QRect(rect)
            size = gauge_rect.size()
            pos = gauge_rect.center()
            gauge_rect.moveCenter( QtCore.QPoint(pos.x()-size.width(), pos.y()-size.height()) )
            gauge_rect.setSize(size*.9)
            gauge_rect.moveCenter(pos)
    
            refill_rect = QtCore.QRect(gauge_rect)
            size = refill_rect.size()
            pos = refill_rect.center()
            refill_rect.moveCenter( QtCore.QPoint(pos.x()-size.width(), pos.y()-size.height()) )
            # smaller than .9 == thicker gauge
            refill_rect.setSize(size*.9)
            refill_rect.moveCenter(pos)
    
            painter.setPen(QtCore.Qt.NoPen)
    
            painter.drawPixmap(rect, self._bg)
    
            painter.save()
            grad = QtGui.QConicalGradient(QtCore.QPointF(gauge_rect.center()), 270.0)
            grad.setColorAt(.75, QtCore.Qt.green)
            grad.setColorAt(.5, QtCore.Qt.yellow)
            grad.setColorAt(.25, QtCore.Qt.red)
            painter.setBrush(grad)
            painter.drawPie(gauge_rect, 225.0*16, self._value*16)
            painter.restore()
    
            painter.setBrush(QtGui.QBrush(self._bg.scaled(rect.size())))
            painter.drawEllipse(refill_rect)
    
            super(GaugeWidget,self).paintEvent(event)
    

    Quarter value

    Half value

    Full Value

    通过展示设置颜色的方式甚至可以更改开始和结束范围,您可以进一步扩展此小部件。它们将是paintEvent将引用的属性,就像它现在使用的value属性一样。

    您还可以调整色标值以更改范围的平衡。

    确保paintEvent尽可能少地处理。