Skip to content
  • Categories
  • Recent
  • Tags
  • Popular
  • Users
  • Groups
  • Search
  • Get Qt Extensions
  • Unsolved
Collapse
Brand Logo
  1. Home
  2. Qt Development
  3. QML and Qt Quick
  4. Blurry 1x width canvas.context lines.
Forum Updated to NodeBB v4.3 + New Features

Blurry 1x width canvas.context lines.

Scheduled Pinned Locked Moved Unsolved QML and Qt Quick
4 Posts 2 Posters 2.5k Views
  • 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.
  • 6thC6 Offline
    6thC6 Offline
    6thC
    wrote on last edited by
    #1

    Hey all. Has anyone has experience with QML Context2D and lineTo?

    I set my canvas context to lineWidth = 1 but is drawing lines thicker using ctx.moveTo && ctx.lineTo

    It looks like anti-aliasing or something? But it's just a bunch of lines 1x pixel wide?
    Is there anything I can do do have lines drawn a bit crisper?

    I have tried in main.cpp with and without: QCoreApplication::setAttribute(Qt::AA_EnableHighDpiScaling);
    The line style is not gradient etc, like this:

    if(canvas.available){
    var ctx = canvas.getContext("2d");
    var x=10;
    var y=10;
    ctx.clearRect(0,0,canvas.width,canvas.height);
    ctx.beginPath();
    ctx.lineWidth = 1;
    ctx.strokeStyle = "red";
    
    ctx.moveTo(x,y);
    ctx.lineTo(x+100,y);
    ctx.stroke();
    }
    
    1 Reply Last reply
    0
    • 6thC6 Offline
      6thC6 Offline
      6thC
      wrote on last edited by
      #2

      I've found I can get the desired look for straight lines setting the context:

      antialiasing: false;
      

      So it is undesirable straight line behavior with the context AA.
      If I do this though, quite predictably, my other non-straight (previously unmentioned) curved lines become quite jaggy. Also undesirable.

      Is there not a good mix / better detection and drawing of straight lines, relative to screen X, Y etc.
      How come our GUIs don't AA vertical and horizontal so badly?

      I suspect they do what I've just discovered and draw differently for different tasks? I've actually created a kind of workable solution but it involves 2x the work - using 2x canvases (I can't even find out if this is supported but it seems to be working):

      Canvas { id:canvasAA; antialiasing: true; anchors.fill: parent; }
      Canvas { id:canvas;   antialiasing:false; anchors.fill: parent; }
      

      And I for now have just split straight lines processes without AA and curves functions into another. Now my plan was to actually move the nodes around resulting in non-straight lines... this would require me to engineer something like IsThisAStraightEdge() per frame and throw rendering to one or other canvas per frame update.

      Is that what I'm looking at having to do? Does anyone else have experience with this or know of an AA setting somewhere that doesn't blur straight edges?

      1 Reply Last reply
      0
      • P Offline
        P Offline
        Prochy
        wrote on last edited by Prochy
        #3

        I think solution of your problem is here. http://stackoverflow.com/questions/8696631/canvas-drawings-like-lines-are-blurry :) I may be wrong.

        1 Reply Last reply
        0
        • 6thC6 Offline
          6thC6 Offline
          6thC
          wrote on last edited by 6thC
          #4

          Hmm. Thanks. And Yuck :-) - I think I understand the problem now, not sure what I'm going to do as my grid is planning on moving all angles and could be positioned anywhere as it's a responsive control that can resize to whatever dimensions you fit it in.

          Thanks for the info. That link there (http://diveintohtml5.info/canvas.html) does seem to be what's happening:

          "For example, if you try to draw a line from (1, 0) to (1, 3), 
          the browser will draw a line covering 0.5 screen pixels on either side of x=1. 
          The screen can’t display half a pixel, so it expands the line to cover a total of two pixels:"
          

          and

          "But, if you try to draw a line from (1.5, 0) to (1.5, 3), the browser
           will draw a line covering 0.5 screen pixels on either side of x=1.5, 
          which results in a true 1-pixel-wide line:"
          
          1 Reply Last reply
          0

          • Login

          • Login or register to search.
          • First post
            Last post
          0
          • Categories
          • Recent
          • Tags
          • Popular
          • Users
          • Groups
          • Search
          • Get Qt Extensions
          • Unsolved