Skip to content
  • 0 Votes
    4 Posts
    965 Views
    M

    You're right. Thanks for answering. I finally ended with a QImageProvider. My image provider takes a filename followed by a question mark and a color (image://myimageprovider/myicon.svg?red). I can then colorize my svg file (this is why i needed a new Image() ) from my image provider.

    This is the qml part.

    import QtQuick 2.11 Canvas { width: 200 height: 200 property string imageUrl: "image://myimageprovider/myicon.svg?red" Component.onCompleted: loadImage(imageUrl) onImageLoaded: requestPaint(); onPaint: { var ctx = getContext("2d"); ctx.drawImage(imageUrl, 0, 0, 32, 32); } }
  • Qtquick\Qml Arc

    Unsolved QML and Qt Quick
    4
    0 Votes
    4 Posts
    1k Views
    ndiasN

    Hi @fallouthase,

    Please find bellow a simple example using PathAngleArc:

    https://doc.qt.io/qt-6/qml-qtquick-pathanglearc.html import QtQuick.Shapes Shape { width: 200 height: 200 anchors.top: parent.top anchors.left: parent.left // Enable multisampled rendering layer.enabled: true layer.samples: 4 // Outer gray arc: ShapePath { fillColor: "transparent" strokeColor: "gray" strokeWidth: 20 capStyle: ShapePath.RoundCap PathAngleArc { centerX: 100; centerY: 100 radiusX: 100-20/2; radiusY: 100-20/2 startAngle: 135 sweepAngle: 270 } } // Inner blue arc: ShapePath { fillColor: "transparent" strokeColor: "blue" strokeWidth: 20 capStyle: ShapePath.RoundCap PathAngleArc { centerX: 100; centerY: 100 radiusX: 100-20/2; radiusY: 100-20/2 startAngle: 135 sweepAngle: 180 } } }

    8aa108e1-c336-46a0-a39e-af38847fdfed-image.png

    You can also use already implemented customizable QML Circular Slider:

    https://github.com/arunpkqt/CircularSlider

    Best Regards

  • 0 Votes
    2 Posts
    429 Views
    sierdzioS

    You will get better performance (and more help from Qt docs) if you use QQuickPaintedItem and draw this in C++.

  • 0 Votes
    7 Posts
    868 Views
    Rcc21R

    @J-Hilk

    A colleague of mine tried the 5.12.4, but the error is still there. I'll try with the QQuickPaintedItem or I'll switch to the 5.14.

    Thanks for your time.

  • Canvas/QPainter bug

    Unsolved QML and Qt Quick
    3
    0 Votes
    3 Posts
    1k Views
    P

    Hello, I encountered the same problem as you, did you solve it, it will be black or blue screen when zoomed in

  • 0 Votes
    4 Posts
    4k Views
    6thC6

    No worries mate. It's looked like you were doing that :) - happy to have helped.

  • 0 Votes
    1 Posts
    1k Views
    No one has replied
  • Context2D and V-Sync

    Unsolved QML and Qt Quick
    1
    0 Votes
    1 Posts
    662 Views
    No one has replied
  • 0 Votes
    4 Posts
    3k Views
    ?

    Out of curiosity, I implemented a QQuickPaintedItem-based PathMask type. The result looks like this:

    PathMask

    The code is:
    pathmask.h

    #ifndef PATHMASK_H #define PATHMASK_H #include <QObject> #include <QQuickItem> #include <QQuickPaintedItem> #include <QPainter> #include <QPainterPath> class PathMask : public QQuickPaintedItem { Q_OBJECT public: explicit PathMask(QQuickItem *parent = Q_NULLPTR); ~PathMask(); virtual void paint(QPainter *painter); Q_INVOKABLE void beginPath(); Q_INVOKABLE void moveTo(qreal x, qreal y); Q_INVOKABLE void lineTo(qreal x, qreal y); Q_INVOKABLE void closePath(); private: QPainterPath *m_path{Q_NULLPTR}; }; #endif // PATHMASK_H

    pathmask.cpp

    #include "pathmask.h" #include <QPainterPath> #include <QtMath> PathMask::PathMask(QQuickItem *parent) : QQuickPaintedItem(parent) { } PathMask::~PathMask() { delete m_path; } void PathMask::paint(QPainter *painter) { if (m_path) { painter->setRenderHint(QPainter::Antialiasing); painter->setBrush( QBrush(QColor("black")) ); painter->drawPath( *m_path ); } } void PathMask::beginPath() { delete m_path; m_path = new QPainterPath; update(); } void PathMask::moveTo(qreal x, qreal y) { Q_ASSERT(m_path); m_path->moveTo(x,y); } void PathMask::lineTo(qreal x, qreal y) { Q_ASSERT(m_path); m_path->lineTo(x, y); } void PathMask::closePath() { Q_ASSERT(m_path); m_path->closeSubpath(); update(); }

    main.qml

    import QtQuick 2.5 import QtQuick.Controls 2.0 import QtQuick.Controls.Material 2.0 import QtGraphicalEffects 1.0 import io.qt.forum 1.0 ApplicationWindow { title: "PathMask Demo" visible: true width: 400 height: 400 color: "black" Image { id: src anchors.fill: parent visible: false source: "file:///home/patrick/Downloads/f22.jpg" } PathMask { id: mask anchors.fill: parent visible: false } Component.onCompleted: { mask.beginPath() mask.moveTo(360, 200); var Pi = 3.141592653589793238463; for (var i = 1; i < 5; ++i) { mask.lineTo(200 + 160 * Math.cos(0.8 * i * Pi), 200 + 160 * Math.sin(0.8 * i * Pi)); } mask.closePath(); } OpacityMask { anchors.fill: src source: src maskSource: mask } }
  • 0 Votes
    3 Posts
    2k Views
    bguivarchB

    Hello @p3c0 and thanks for your answer.

    Yes the m_bCreated was declared, just a copy/paste issue when creating this post as I didn't paste my full code, just a snippet.
    The issue was in the i variable as you pointed it. I am not very familiar with JS, my bad. Declaring it before the loop solved my problem.

    Thanks for your help!

  • 0 Votes
    3 Posts
    2k Views
    S

    Answering my own question. By multiplying the drawImage coordinates by the zoom factor helped to solve it. Is this a bug of QML or something that I have read from the documentation?

  • 0 Votes
    4 Posts
    3k Views
    p3c0P

    @sigmaN AFAIK there is no ready-made method for it. You can try digging up the source and particularly the delegate part of it only in which these roles are available.
    Apart from that there is another way to access the data. Iterating through the children of ListView's contentItem as all the items (delegate too) declared inside ListView are parented to it. But IMO it is not a recommended way.

  • Canvas in QML

    QML and Qt Quick
    1
    0 Votes
    1 Posts
    743 Views
    No one has replied
  • 0 Votes
    7 Posts
    4k Views
    p3c0P

    @vishnu RightClick > View Page Source ;)

  • 0 Votes
    1 Posts
    717 Views
    No one has replied
  • 0 Votes
    2 Posts
    11k Views
    S

    I am curious to the response to this, as I had a similar need a few months back. I ended up doing a brute force drawing of the dashed line with the following Component, but would prefer to use patterns as the OP was trying to do.

    import QtQuick 2.4

    Canvas {
    id: canvas
    anchors.fill: parent
    property real start_x: 0
    property real start_y: 0
    property real end_x: width
    property real end_y: height
    property bool dashed: true
    property real dash_length: 10
    property real dash_space: 8
    property real line_width: 2
    property real stipple_length: (dash_length + dash_space) > 0 ? (dash_length + dash_space) : 16
    property color draw_color: "white"

    onPaint: { // Get the drawing context var ctx = canvas.getContext('2d') // set line color ctx.strokeStyle = draw_color; ctx.lineWidth = line_width; ctx.beginPath(); if (!dashed) { ctx.moveTo(start_x,start_y); ctx.lineTo(end_x,end_y); } else { var dashLen = stipple_length; var dX = end_x - start_x; var dY = end_y - start_y; var dashes = Math.floor(Math.sqrt(dX * dX + dY * dY) / dashLen); if (dashes == 0) { dashes = 1; } var dash_to_length = dash_length/dashLen var space_to_length = 1 - dash_to_length var dashX = dX / dashes; var dashY = dY / dashes; var x1 = start_x; var y1 = start_y; ctx.moveTo(x1,y1); var q = 0; while (q++ < dashes) { x1 += dashX*dash_to_length; y1 += dashY*dash_to_length; ctx.lineTo(x1, y1); x1 += dashX*space_to_length; y1 += dashY*space_to_length; ctx.moveTo(x1, y1); } } ctx.stroke(); }

    }

  • 0 Votes
    2 Posts
    6k Views
    B

    Solved thank to the help of inz on IRC.

    I've added the line

    gc()

    just after the line

    canvas.imageData = ctx.getImageData(0, 0, canvas.width, canvas.height) // this causes a memory leak

    And the memleak disappeared. Seems like the automatic garbage collector didn't run often enough for my use case, so the call to gc() is necessary to force the garbage collection.

  • 0 Votes
    4 Posts
    2k Views
    ealioneE

    Hi SGaist,
    I did of curse know about importing and using simple javascript code in my qml tests. But what I was wondering was if it is possible to use the multitude of javascript libraries that are out there, mostly the impressive ones that deal with animations like the one I linked to.

    Thanks for the links p3c0, I believe that by studying them I may be able to port a javascript library to a qml compatible version.

  • 0 Votes
    1 Posts
    508 Views
    No one has replied
  • 0 Votes
    6 Posts
    3k Views
    C

    Kimmo Lindholm wrote a very nice Paint app for the Jolla which is open source, and uses this technique (but it's far more complicated since it offers a bunch of different modes and features too): https://github.com/kimmoli/paint/blob/master/qml/pages/Paint.qml