Skip to content
  • Javascript Image is not defined in QML

    Solved QML and Qt Quick javascript image canvas
    4
    0 Votes
    4 Posts
    1k 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 arc shape canvas beginner help
    4
    0 Votes
    4 Posts
    2k 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 } } } [image: 512e5cf8-7b1e-4b4c-aa93-d98a1b78f9c0.png] You can also use already implemented customizable QML Circular Slider: https://github.com/arunpkqt/CircularSlider Best Regards
  • 0 Votes
    2 Posts
    558 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
    1k 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 canvas qpainter zoom
    3
    0 Votes
    3 Posts
    2k Views
    P
    Hello, I encountered the same problem as you, did you solve it, it will be black or blue screen when zoomed in
  • QML Canvas Drawing Aliased

    Solved QML and Qt Quick qml canvas antialiasing aliased stroke
    4
    0 Votes
    4 Posts
    4k Views
    6thC6
    No worries mate. It's looked like you were doing that :) - happy to have helped.
  • [Canvas] getContext error for canvas

    Unsolved QML and Qt Quick qml canvas 5.3 5.6
    1
    0 Votes
    1 Posts
    2k Views
    No one has replied
  • Context2D and V-Sync

    Unsolved QML and Qt Quick canvas rendering vsync
    1
    0 Votes
    1 Posts
    721 Views
    No one has replied
  • Clip QML Types with Context2D

    Unsolved QML and Qt Quick context canvas image qml types
    4
    0 Votes
    4 Posts
    3k Views
    ?
    Out of curiosity, I implemented a QQuickPaintedItem-based PathMask type. The result looks like this: [image: Path_Mask.png] 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 } }
  • JS loop disables canvas drawing

    Unsolved QML and Qt Quick qtquick canvas javascript
    3
    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!
  • Canvas rendered very poor quality image

    Solved QML and Qt Quick canvas qml javascript image
    3
    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 canvas qml qt5
    1
    0 Votes
    1 Posts
    799 Views
    No one has replied
  • 0 Votes
    7 Posts
    4k Views
    p3c0P
    @vishnu RightClick > View Page Source ;)
  • Canvas redraws only on resize

    QML and Qt Quick canvas animation
    1
    0 Votes
    1 Posts
    800 Views
    No one has replied
  • Qml Canvas Dashed/Dotted Lines

    QML and Qt Quick qml qtquick canvas
    2
    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
    578 Views
    No one has replied
  • Drawing Line on MS Paint Style

    QML and Qt Quick canvas qml
    6
    0 Votes
    6 Posts
    4k 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