具有多个断点的可拖动线

Posted

技术标签:

【中文标题】具有多个断点的可拖动线【英文标题】:draggable line with multiple break points 【发布时间】:2018-01-19 08:44:19 【问题描述】:

我有一个与以下问题非常相似的应用程序:Draw half infinite lines?

我想要一条具有多个阈值的无限线。

问题中提供的解决方案是一个很好的起点:https://***.com/a/37836348/7163293

我试图通过修改__init__ 中的movable 属性来使线条可移动,并添加一个setMovable 方法,就像源代码中的源代码一样:

http://www.pyqtgraph.org/documentation/_modules/pyqtgraph/graphicsItems/InfiniteLine.html#InfiniteLine

from pyqtgraph.Qt import QtGui
import numpy as np
import pyqtgraph as pg

class InfiniteLineWithBreak(pg.GraphicsObject):

    def __init__(self, changeX, levelsY, pen=None):
        pg.GraphicsObject.__init__(self)

        self.changeX = changeX
        self.levelsY = levelsY

        self.maxRange = [None, None]
        self.moving = False
        self.movable = True
        self.setMovable(self.movable)
        self.mouseHovering = False

        pen = (200, 200, 100)
        self.setPen(pen)
        self.setHoverPen(color=(255,0,0), width=self.pen.width())
        self.currentPen = self.pen

    def setMovable(self, m):
        """Set whether the line is movable by the user."""
        self.movable = m
        self.setAcceptHoverEvents(m)


    def setBounds(self, bounds):
        self.maxRange = bounds
        self.setValue(self.value())

    def setPen(self, *args, **kwargs):
        self.pen = pg.fn.mkPen(*args, **kwargs)
        if not self.mouseHovering:
            self.currentPen = self.pen
            self.update()

    def setHoverPen(self, *args, **kwargs):
        self.hoverPen = pg.fn.mkPen(*args, **kwargs)
        if self.mouseHovering:
            self.currentPen = self.hoverPen
            self.update()

    def boundingRect(self):
        br = self.viewRect()
        return br.normalized()

    def paint(self, p, *args):
        br = self.boundingRect()
        p.setPen(self.currentPen)
        # three lines (left border to change point, change point vertical, change point to right)
        p.drawLine(pg.Point(br.left(), self.levelsY[0]), pg.Point(self.changeX, self.levelsY[0]))
        p.drawLine(pg.Point(self.changeX, self.levelsY[0]), pg.Point(self.changeX, self.levelsY[1]))
        p.drawLine(pg.Point(self.changeX, self.levelsY[1]), pg.Point(br.right(), self.levelsY[1]))

    def dataBounds(self, axis, frac=1.0, orthoRange=None):
        if axis == 0:
            return None   ## x axis should never be auto-scaled
        else:
            return (0,0)

    def setMouseHover(self, hover):
        pass

app = QtGui.QApplication([])
w = pg.GraphicsWindow()
w.resize(1000, 600)
v = w.addPlot(y=np.random.normal(size=100))
v.addItem(InfiniteLineWithBreak(changeX=50, levelsY=(-1, 1)))
app.exec_()

但是,修改后的线仍然无法移动。所以我有点卡在这里。有人能提供一些指点吗?

此外,理想情况下,应用程序上的线条应该可以分段移动。因此,当用户拖动一条线时,只有断点之间的部分在移动。所以理想情况下,我想要这样的东西:

Draggable line with draggable points

在我的应用程序中。理想情况下,它看起来像

阈值点水平(TH_Px_L1)可拖动,但不能定时(TH_Px_T1),所以点只能垂直移动。

如果有人也可以在第二个项目上提供帮助并提供一些非常有用的指示或解决方案。

【问题讨论】:

您必须提供Minimal, Complete, and Verifiable example @eyllanesc 感谢您的建议。我添加了我正在运行的代码。 要移动白线还是黄线? @eyllanesc 黄线,谢谢 查看 InfiniteLine 的源代码,您缺少那些实际上使线可拖动的方法,例如 mouseDragEvent 和下面列出的那些。但是,由于您想单独移动部分线条,最好使用一组 pyqtgraph.PlotCurveItems 并使其可以单独拖动。 【参考方案1】:

基于来自文档的this example。

散点图类似于绘制图形,但连接线位于 i 点和它们连接的 i + 1 点之间。然后我们将运动限制在垂直轴上,因为这是作者的要求。

import numpy as np
import pyqtgraph as pg
from pyqtgraph.Qt import QtCore, QtGui

pg.setConfigOptions(antialias=True)

w = pg.GraphicsWindow()
w.setWindowTitle('Draggable')


class Graph(pg.GraphItem):
    def __init__(self):
        self.dragPoint = None
        self.dragOffset = None
        pg.GraphItem.__init__(self)

    def setData(self, **kwds):
        self.data = kwds
        if 'pos' in self.data:
            npts = self.data['pos'].shape[0]
            self.data['adj'] = np.column_stack((np.arange(0, npts-1), np.arange(1, npts)))
            self.data['data'] = np.empty(npts, dtype=[('index', int)])
            self.data['data']['index'] = np.arange(npts)
        self.updateGraph()

    def updateGraph(self):
        pg.GraphItem.setData(self, **self.data)

    def mouseDragEvent(self, ev):
        if ev.button() != QtCore.Qt.LeftButton:
            ev.ignore()
            return

        if ev.isStart():
            pos = ev.buttonDownPos()
            pts = self.scatter.pointsAt(pos)
            if len(pts) == 0:
                ev.ignore()
                return
            self.dragPoint = pts[0]
            ind = pts[0].data()[0]
            self.dragOffset = self.data['pos'][ind][1] - pos[1]
        elif ev.isFinish():
            self.dragPoint = None
            return
        else:
            if self.dragPoint is None:
                ev.ignore()
                return

        ind = self.dragPoint.data()[0]
        self.data['pos'][ind][1] = ev.pos()[1] + self.dragOffset
        self.updateGraph()
        ev.accept()


g = Graph()
v = w.addPlot()
v.addItem(g)

x = np.linspace(1, 100, 40)
pos = np.column_stack((x, np.sin(x)))

g.setData(pos=pos, size=10, pxMode=True)

if __name__ == '__main__':
    import sys

    if (sys.flags.interactive != 1) or not hasattr(QtCore, 'PYQT_VERSION'):
        QtGui.QApplication.instance().exec_()

【讨论】:

谢谢,它按要求工作!像你这样的人让 SO 成为一个更好的社区。 :)

以上是关于具有多个断点的可拖动线的主要内容,如果未能解决你的问题,请参考以下文章

JQuery UI - 可拖动元素被拖放到可放置区域的多个可放置区域按比例缩小

强制列中的内容在多个断点上具有相同的高度

在具有相同类的多个可放置 div 上拖动图像

如何将多个 div 设置为特定目标位置的动画?

画布上的可拖动图像和鼠标事件

在一个表单中创建具有多个模型的可编辑模板