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

Posted 2023-02-16

【中文标题】如何在 python 中创建路径并将其显示在 qml 画布上

【英文标题】：How to make a path in python and display it on a qml canvas

【发布时间】：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();
            
        
    

【参考方案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()