如何在 python 中创建路径并将其显示在 qml 画布上答案

【问题标题】：How to make a path in python and display it on a qml canvas如何在 python 中创建路径并将其显示在 qml 画布上
【发布时间】：2021-04-28 10:12:36
【问题描述】：

我正在尝试在 python 中创建一个路径并将其显示在 qml 画布中，但我无法使其工作。

我尝试创建一个@QtCore.pyqtSlot，但该类型似乎不受支持。

这是我的最小模型：

from PyQt5 import QtCore, QtGui

class PathModel(QtCore.QAbstractListModel):
    signal = QtCore.pyqtSignal()
    
    def __init__(self):
        super().__init__()
        self.path = QtGui.QPainterPath()
        self.path.addRect(50,50,100,100)
    
    @QtCore.pyqtSlot(result = QtCore.QVariant)
    def returnPath(self):
        return self.path

和 qml 文件：

import QtQuick 2.5
import QtQuick.Controls 2.15
import QtQuick.Layouts 1.15
import QtQuick.Window 2.11


Window {
    id: root
     Rectangle {
        id: conteneurCanvas
        Canvas {
            id: mycanvas
            width: parent.width
            height: parent.height
            contextType: "2d"
            onPaint: {
                context.path = path_model.returnPath();
                context.stroke();
            }
        }
    }
}

另一种可能性是通过一些js代码动态创建它，但我对这种语言不是很熟悉，所以我做了类似这个女巫的事情显然行不通。

import QtQuick 2.5
import QtQuick.Controls 2.15
import QtQuick.Layouts 1.15
import QtQuick.Window 2.11


Window {
    id: root
     Rectangle {
        id: conteneurCanvas
        Canvas {
            id: mycanvas
            width: parent.width
            height: parent.height
            contextType: "2d"

            Path {
                id: myPath
            }

            for (var i = 0; i < 5; i++) {
                // All the elements will be send through slot but for the exemple ...
                myPath.PathLine { x: i*100 ; y: 100 }
            } 

            onPaint: {
                context.path = myPath;
                context.stroke();
            }
        }
    }
}

【问题讨论】：

标签： python qt pyqt5 qml

【解决方案1】：

我在本教程中找到了正确的语法：

https://master.qt.io/learning/developerguides/canvastutorial/QtQuickCanvasTutorial.pdf

最后我们得到了这种语法：

Window {
    id: root
     Rectangle {
        id: conteneurCanvas
        Canvas {
            id: mycanvas
            width: parent.width
            height: parent.height
            contextType: "2d"

            onPaint: {
                context.beginPath()
                context.moveTo(0,0)
                for (let i = 0; i < 5; i++) {
                    // Do what you want
                    context.lineTo(i*20,10*i*i)
                } 
                context.lineWidth = 1;
                context.stroke()
            }
        }
    }
}

【讨论】：