Vải QML: hành vi khác nhau trong việc hiển thị

Question

Tôi đang cố gắng vẽ một lĩnh vực annulus trong QML bằng cách sử dụng đối tượng Canvas. Đầu tiên, tôi đã viết mã javascript, và tôi đã xác minh rằng nó là chính xác bằng cách thực hiện nó trong một trình duyệt.

Ở đây là:

var can = document.getElementById('myCanvas'); 
var ctx=can.getContext("2d"); 
var center = { 
    x: can.width/2, 
    y: can.height/2 
}; 
var minRad = 100; 
var maxRad = 250; 

var startAngle = toRad(290); 
var endAngle = toRad(310); 

drawAxis(); 
drawSector(); 

function drawSector() { 
    var p1 = { 
    x: maxRad * Math.cos(startAngle), 
    y: maxRad * Math.sin(startAngle) 
    } 
    p1 = toCanvasSpace(p1); 

    var p2 = { 
    x: minRad * Math.cos(startAngle), 
    y: minRad * Math.sin(startAngle) 
    } 
    p2 = toCanvasSpace(p2); 

    var p3 = { 
    x: minRad * Math.cos(endAngle), 
    y: minRad * Math.sin(endAngle) 
    } 
    p3 = toCanvasSpace(p3); 
    var p4 = { 
    x: maxRad * Math.cos(endAngle), 
    y: maxRad * Math.sin(endAngle) 
    } 
    p4 = toCanvasSpace(p4); 

    ctx.beginPath(); 
    ctx.moveTo(p1.x, p1.y); 
    ctx.arc(center.x, center.y, maxRad, startAngle, endAngle); 
    ctx.lineTo(p3.x, p3.y); 
    ctx.arc(center.x, center.y, minRad, endAngle, startAngle, true); 
    ctx.closePath(); 

    ctx.strokeStyle = "blue"; 
    ctx.lineWidth = 2; 
    ctx.stroke(); 
} 


function drawAxis() { 
    ctx.beginPath(); 
    ctx.moveTo(can.width/2, 0); 
    ctx.lineTo(can.width/2, can.height); 
    ctx.stroke(); 
    ctx.beginPath(); 
    ctx.moveTo(0, can.height/2); 
    ctx.lineTo(can.width, can.height/2); 
    ctx.stroke(); 
} 

function toRad(degrees) { 
    return degrees * Math.PI/180; 
} 

function toCanvasSpace(p) { 
    var ret = {}; 
    ret.x = p.x + can.width/2; 
    ret.y = p.y + can.height/2; 
    return ret; 
} 

Here bạn có thể chạy mã trên. Kết quả là thế này:

Tiếp theo, tôi chuyển mã cùng vào một đối tượng Canvas trong QML.

Xem ở đây main.qml chứa Canvas:

import QtQuick 2.5 
import QtQuick.Window 2.2 

Window { 
    visible: true 
    width: 500 
    height: 500 
    x:500 

    Canvas 
    { 
     id: can 
     anchors.fill: parent 
     antialiasing: true 



     onPaint: { 
      var ctx=can.getContext("2d"); 

      var center = { 
       x: can.width/2, 
       y: can.height/2 
      }; 
      var minRad = 100; 
      var maxRad = 250; 

      var startAngle = toRad(290); 
      var endAngle = toRad(310); 

      drawAxis(); 
      drawSector(); 

      function drawSector() { 
       var p1 = { 
        x: maxRad * Math.cos(startAngle), 
        y: maxRad * Math.sin(startAngle) 
       } 
       p1=toCanvasSpace(p1); 

       var p2 = { 
        x: minRad * Math.cos(startAngle), 
        y: minRad * Math.sin(startAngle) 
       } 
       p2=toCanvasSpace(p2); 

       var p3 = { 
        x: minRad * Math.cos(endAngle), 
        y: minRad * Math.sin(endAngle) 
       } 
       p3=toCanvasSpace(p3); 
       var p4 = { 
        x: maxRad * Math.cos(endAngle), 
        y: maxRad * Math.sin(endAngle) 
       } 
       p4=toCanvasSpace(p4); 

       ctx.beginPath(); 
       ctx.moveTo(p1.x, p1.y); 
       ctx.arc(center.x, center.y, maxRad, startAngle, endAngle); 
       ctx.lineTo(p3.x, p3.y); 
       ctx.arc(center.x, center.y, minRad, endAngle, startAngle, true); 
       ctx.closePath(); 

       ctx.strokeStyle="blue"; 
       ctx.lineWidth=2; 
       ctx.stroke(); 
      } 


      function drawAxis() { 
       ctx.beginPath(); 
       ctx.moveTo(can.width/2, 0); 
       ctx.lineTo(can.width/2, can.height); 
       ctx.stroke(); 
       ctx.beginPath(); 
       ctx.moveTo(0, can.height/2); 
       ctx.lineTo(can.width, can.height/2); 
       ctx.stroke(); 
      } 

      function toRad(degrees) { 
       return degrees * Math.PI/180; 
      } 

      function toCanvasSpace(p) { 
       var ret = {}; 
       ret.x = p.x + can.width/2; 
       ret.y = p.y + can.height/2; 
       return ret; 
      } 


     } 
    } 
} 

Trong trường hợp này tôi nhận được kết quả này:

Như bạn có thể thấy có một không hoàn hảo ở phía dưới.

Tôi thực sự không hiểu tại sao có sự không hoàn hảo đó; hơn nữa tôi không hiểu tại sao cùng một mã cho đầu ra khác nhau.

Mọi trợ giúp đều được đánh giá cao! Cảm ơn

Answer 1

Các lineTop3 là không cần thiết, bởi vì khi một phân khúc arc được rút ra, dòng kết nối được vẽ tự động, theo Canvas thông số kỹ thuật:

Các arc() phương pháp là tương đương với phương pháp ellipse() trong trường hợp nơi hai bán kính bằng nhau. [...]

Khi phương thức ellipse() được gọi, nó phải tiến hành như sau. Đầu tiên, nếu đường dẫn của đối tượng có bất kỳ đường con nào, thì phương pháp phải thêm đường thẳng từ điểm cuối trong đường con đến điểm bắt đầu của cung.

Ngoài ra, không cần thiết moveTop1 vì nó sẽ được thực hiện như một phần của cung đầu tiên.

Vì lý do tại sao đường bổ sung được vẽ xa hơn điểm bắt đầu của vòng cung thứ hai, có thể là lỗi trong Qt (có thể là sự phân chia theo số 0 - chỉ cần đoán ở đây), hoặc có thể bạn không tính toán vị trí chính xác.