使用画布动态绘制点对点线答案

【问题标题】：Drawing point to point Lines dynamically using canvas使用画布动态绘制点对点线
【发布时间】：2019-03-24 15:08:08
【问题描述】：

我正在尝试制作一个简单的图形应用程序，我可以在其中动态创建不同的形状，例如（矩形、圆形、三角形）以及一条线（从一点到另一点）。对于前 3 个，我根本没有任何问题。对于矩形，我刚刚定义了一个组件 Rectangle 并在我的绘图区域的 MouseArea 的 onClicked 处理程序内使用 create 组件创建它。对于三角形，我使用画布绘制三角形并使用 create component 和 onClicked 处理程序创建了组件。我主要通过 mouse.x 和 mouse.y 在任何我想要的地方创建形状。现在对于线，我想定义单击鼠标区域时的起点和释放时的终点。一旦发布，我想画线（使用画布）。我该怎么做呢？

作为参考，我添加了我如何创建其他项目的屏幕截图：

【问题讨论】：

您应该创建一个 MCVE（使用 QML 很容易），并以文本形式提供代码。另外，你的问题到底是什么？无法获取坐标？您是否获得坐标但无法将它们传递到画布？您是否真的获得了 Canvas 所需的一切但未能正确绘制线条？
将您的代码显示为文本

标签： qt qml

【解决方案1】：

MouseArea 也有一个released 信号。每当您的 selectedIndex 显示“行”时，将 x 和 y 存储在 onPressed 处理程序中，并且仅使用存储的位置在 onReleased 处理程序中创建行

MouseArea {

    property var startPoint
    onPressed: { 
        if(selectedShape.currentIndex === 3) 
            startPoint = Qt.point(mouse.x, mouse.y) 
    }

    onReleased: {
        if(selectedShape.currentIndex === 3 && startPoint !== undefined)
        {
            createLine(startPoint, Qt.point(mouse.x, mouse.y) //your function goes here
        }
        startPoint = undefined        
    }
}

PS。不要将代码粘贴为图像！

【讨论】：

谢谢，这正是我想要的。