Qt Forum

    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search
    • Unsolved

    Update: Forum Guidelines & Code of Conduct

    Solved Canvas rendered very poor quality image

    QML and Qt Quick
    canvas qml javascript image
    1
    3
    1535
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • S
      salarelv last edited by

      Hi,

      I have canvas+javascript application on QML and we render map tiles on the canvas but the image is very poor quality.
      Screenshot

      The image is OK in HTML5 so this isn't a issue with the code/image itself.
      Here is the part that renders the tile:

      this.context.save();
      this.context.translate(T.getViewWidth()/2, T.getViewHeight()/2);
      this.context.rotate(this.wayfinder.options.map2DRotation*Math.PI/180);
      this.context.translate(-T.getViewWidth()/2, -T.getViewHeight()/2);

      this.context.translate(T.getZoomedMapPosition()[0], T.getZoomedMapPosition()[1]);

      this.context.scale(T.getZoom(), T.getZoom());
      this.context.drawImage(tile.image, tile.xwidth, tile.yheight, width, height);
      this.context.restore();

      Any ideas what should I try?

      1 Reply Last reply Reply Quote 0
      • S
        salarelv last edited by

        I think the issue is with using context.scale. If I remove that the image will be sharp again but it brakes the logic. Any ideas how can I go round that.

        1 Reply Last reply Reply Quote 0
        • S
          salarelv last edited by

          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?

          1 Reply Last reply Reply Quote 0
          • First post
            Last post