मैं कैनवास पर एक सर्कल कैसे आकर्षित कर सकता हूं?

मैं गणितीय रूप से डिज़ाइन किए गए पैमाने को आकर्षित करने के लिए जावास्क्रिप्ट और कैनवास का उपयोग कर रहा हूं (टोक़ को मापने के लिए, इसमें न्यूटन-मीटर और पैर-पाउंड शामिल हैं)। मैं त्रिकोणमिति का उपयोग करके अपने टिकों को पोजिशन कर रहा था, और स्वाभाविक रूप से arc का उपयोग करके आर्सिंग लाइनों को चित्रित कर रहा था। समस्या तब आई जब उन्हें लाइन करने की जरूरत थी, लेकिन कुछ अजीब विकृति थी। मैंने फिर एक बहुत बड़ा सर्कल खींचा और इसे जीआईएमपी में एक गोलाकार चयन के साथ तुलना की और वहां एक विकृति थी। मंडल सर्कल के चारों ओर हर 45 डिग्री लगातार होते हैं, लेकिन उन नोड्स के बीच कैनवास खींचा सर्कल बाहर निकलता है, एक अष्टकोणीय की तरह जो एक सर्कल का अनुमान लगाने के लिए बहुत दूर गोल किया जा सकता है।मैं कैनवास पर एक सर्कल कैसे आकर्षित कर सकता हूं?

इन विकृतियां क्यों होती हैं? मैं कैनवास पर वास्तव में परिपत्र सर्कल कैसे बना सकता हूं?

यह वह कोड है जिसका उपयोग मैंने अपने विकृत सर्कल को उत्पन्न करने के लिए किया था।

<!DOCTYPE html> 
<html> 
    <body> 
    <canvas width=8000 height=8000 id='myCanvas'></canvas> 
    <script> 
     var canvas = document.getElementById('myCanvas'); 
     var context = canvas.getContext('2d'); 
     context.beginPath(); 
     context.arc(4000, 4000, 3200, 0, Math.PI*2, false); 
     context.lineWidth = 1; 
     context.strokeStyle = '#ff0000'; 
     context.lineCap = 'square'; 
     context.stroke(); 
    </script> 
    </body> 
</html>

यह कम से कम नहीं हो सकता है, मैं context.lineCap की प्रासंगिकता का नहीं है, लेकिन यह कोड इस पर आधारित है का निशान है। निम्नलिखित स्क्रीनशॉट (, हालांकि ठीक इसे बाहर अभी तक नहीं किया है हो सकता है तय घोषित) क्रोम screenshot

स्रोत

2015-07-14 Robbie Mckennie

आप किसी भी नमूना कोड की क्या ज़रूरत है (और हाँ, lineCap एक रेड हेरिंग है।)? –

@ जोन्ससो निश्चित। मैं उस कोड में जोड़ूंगा जिसका उपयोग मैंने अपने सर्कल को उत्पन्न करने के लिए किया था। –

सफारी (8.0.6), क्रोम (43.0.2357.132) और फ़ायरफ़ॉक्स (36.0.4) पर अपना कोड चलाएं - यह मेरे लिए ठीक लग रहा था। जेएस बिन [यहां] (https://jsbin.com/pogehixibu/edit?html,output)। जिज्ञासा से बाहर, आप किस ब्राउजर का उपयोग कर रहे हैं? –

द्वारा तैयार वृत्त GIMP द्वारा तैयार की और वृत्त के बीच अंतर यह Chromium Bug #164241 दिखाता है। संक्षिप्त उत्तर यह है: क्रोम approximating circles with composite Bezier curves है।

मैं इसे क्रोमियम (43.0.2357.130, उबंटू) पर दोहराने में असमर्थ था लेकिन यह फ़ायरफ़ॉक्स 39 पर होता है, हालांकि मुझे फ़ायरफ़ॉक्स के लिए एक समान बग रिपोर्ट नहीं मिल सका। तथ्य यह है कि यह हर 90 डिग्री (45 नहीं, कम से कम मेरे लिए नहीं) इंगित करता है कि इंगित करता है कि सर्कल का अनुमान 4 घटता से किया जा रहा है, क्योंकि वक्र अंतराल को सही होने की गारंटी है।

सौभाग्य से एक साधारण कामकाज है: 4 से अधिक घटता युक्त पथ बनाएं। 8 या 6 भी आपके द्वारा उपयोग की जाने वाली त्रिज्या के लिए पर्याप्त होना चाहिए, लेकिन यदि आप इसे सुरक्षित रखना चाहते हैं तो आप अधिक उपयोग कर सकते हैं। या आप त्रिज्या के एक समारोह के रूप में वक्रों की संख्या में वृद्धि कर सकते हैं, हालांकि इष्टतम कार्य की गणना (न्यूनतम एन जो किसी दिए गए त्रिज्या आर के लिए सटीक सर्कल उत्पन्न करेगा) गैर-तुच्छ है।

context.beginPath(); 
var n=8; // 4 is the default behaviour. higher is better, also slower 
for (var i=0; i<n; i++) { 
    context.arc(4000, 4000, 3200, Math.PI*2*i/n, Math.PI*2*(i+1)/n, false); 
} 
context.stroke();

this question भी देखें।

स्रोत

2015-07-17 06:08:19 hexwab

कितना गहरा निराशाजनक है। मुझे लगता है कि मुझे बस अपना खुद का, बेहतर अनुमान लिखना होगा। –

मैं कैनवास पर एक सर्कल कैसे आकर्षित कर सकता हूं?

उत्तर

संबंधित मुद्दे