在没有 Canvas 的 QML 中绘制虚线圆

Posted

技术标签:

【中文标题】在没有 Canvas 的 QML 中绘制虚线圆【英文标题】:Draw a dashed circle in QML without Canvas 【发布时间】:2018-07-16 08:55:28 【问题描述】:

我想绘制一个虚线圆,其半径会根据变量而增大或缩小。我只找到了一个基于Canvas 的解决方案:Qt (QML) Dashed Circle

没有找到其他解决方案让我有点惊讶。恐怕Canvas 解决方案会消耗太多资源。有没有其他实用的方法?

【问题讨论】:

我想正确的方法是创建从 QQuickItemQQuickPaintedItem 派生的自定义项目。 【参考方案1】:

如果您不想使用 Canvas,另一种方法是使用 QQuickPaintedItem 并自己画一个圆圈。实现看起来像这样:

dashcircle.h

#ifndef DASHCIRCLE_H
#define DASHCIRCLE_H

#include <QObject>
#include <QQuickPaintedItem>
#include <QPainter>

class DashCircle : public QQuickPaintedItem

    Q_OBJECT
public:
    explicit DashCircle(QQuickItem *parent = nullptr);

    virtual void paint(QPainter *painter);
;

#endif // DASHCIRCLE_H

dashcircle.cpp:

#include "dashcircle.h"

DashCircle::DashCircle(QQuickItem *parent) : QQuickPaintedItem(parent)




void DashCircle::paint(QPainter *painter)

    painter->setPen(QPen(Qt::DashLine));
    painter->drawEllipse(0, 0, width() - 1, height() - 1);

注册类型:

qmlRegisterType<DashCircle>("Custom", 1, 0, "DashCircle");

在 qml 中创建:

DashCircle 
    x: 50
    y: 50
    width: 50
    height: 50

结果:

【讨论】:

以上是关于在没有 Canvas 的 QML 中绘制虚线圆的主要内容,如果未能解决你的问题,请参考以下文章

canvas绘制虚线,虚线方框,虚线圆

Qt (QML) 虚线圆

canvas绘制箭头路径效果

react native 可以用svg 吗

Canvas中怎么绘制圆和圆弧

canvas学习总结三:绘制虚线