क्यूएमएल कैनवास:

Question

प्रतिपादन में अलग-अलग व्यवहार मैं कैनवास ऑब्जेक्ट का उपयोग कर क्यूएमएल में एक एनुलस सेक्टर खींचने की कोशिश कर रहा हूं। सबसे पहले, मैंने जावास्क्रिप्ट कोड लिखा है, और मैंने सत्यापित किया है कि यह ब्राउज़र में इसे निष्पादित करके सही है।

संदेश यह है:

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 आप उपरोक्त कोड चला सकते हैं। उत्पादन यह है:

इसके बाद, मैं Qml में एक कैनवास वस्तु में एक ही कोड ले जाया गया।

यहाँ देखें main.qml कैनवास युक्त

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; 
      } 


     } 
    } 
} 

इस मामले में मैं इस उत्पादन प्राप्त करें:

आप देख सकते हैं नीचे स्थित एक अपूर्णता है।

मुझे वास्तव में समझ में नहीं आता कि अपूर्णता क्यों है; इसके अलावा मुझे समझ में नहीं आता कि एक ही कोड अलग आउटपुट क्यों देता है।

किसी भी मदद की सराहना की जाती है! धन्यवाद

Answer 1

lineTop3 की जरूरत नहीं है, क्योंकि जब एक arc खंड तैयार की है, को जोड़ने लाइन स्वचालित रूप से तैयार की है, Canvas विनिर्देशों के अनुसार:

चाप() विधि के बराबर है मामले में ellipse() विधि जहां दो त्रिज्या बराबर हैं। [...]

जब अंडाकार() विधि लागू की जाती है, तो इसे निम्नानुसार आगे बढ़ना चाहिए। सबसे पहले, यदि ऑब्जेक्ट के पथ में कोई सबपैथ है, तो विधि को को अंतिम बिंदु से प्रारंभ बिंदु चाप के प्रारंभ बिंदु में एक सीधी रेखा जोड़नी होगी।

इसके अलावा, moveTop1 की जरूरत नहीं है, क्योंकि यह पहली आर्क के एक हिस्से के रूप में की जाएगी।

दूसरी चाप की शुरुआत से अतिरिक्त लाइन क्यों खींची जा रही है, यह क्यूटी में एक बग हो सकता है (शायद 0 समस्या से एक विभाजन - बस अनुमान लगाया जा सकता है), या हो सकता है कि आपने बस इसकी गणना नहीं की सही ढंग से स्थिति।