पिक्सेल-पेंटिंग दृष्टिकोण (@Ladmaster द्वारा सुझाया गया) विभिन्न तरीकों से गणितीय समाधान से बेहतर है:
- कार्यान्वयन बहुत सरल है। उपरोक्त समस्या को कोड की 100 से भी कम लाइनों में हल किया जा सकता है, क्योंकि यह JSFiddle समाधान प्रदर्शित करता है (ज्यादातर क्योंकि यह वैचारिक रूप से बहुत सरल है, और इसमें कोई किनारे के मामले या अपवाद नहीं हैं)।
- यह अधिक सामान्य समस्याओं को आसानी से स्वीकार करता है। यह आकारिकी की परवाह किए बिना किसी भी आकार के साथ काम करता है, जब तक कि यह 2D ड्राइंग लाइब्रेरी (यानी, "उन सभी!") के साथ रेंडर करने योग्य है - हलकों, दीर्घवृत्त, स्प्लिन, बहुभुज, आप इसे नाम देते हैं। हेक, यहां तक कि बिटमैप छवियां।
- गणितीय चित्र के लिए ~ O [n * n] की तुलना में पिक्सेल-पेंटिंग समाधान की जटिलता ~ O [n] है। इसका मतलब है कि यह बेहतर प्रदर्शन करेगा क्योंकि आकृतियों की संख्या बढ़ जाती है।
- और प्रदर्शन की बात करें, तो आप अक्सर मुफ्त में हार्डवेयर त्वरण प्राप्त करेंगे, क्योंकि अधिकांश आधुनिक 2 डी लाइब्रेरी (जैसे एचटीएमएल 5 के कैनवास, मेरा मानना है) ग्राफिक्स त्वरक के लिए रेंडरिंग कार्य को बंद कर देगा।
पिक्सेल-पेंटिंग के लिए एक नकारात्मक पहलू समाधान की परिमित सटीकता है। लेकिन यह केवल बड़ी या छोटी कैनवस के लिए ट्यून करने योग्य है जैसा कि स्थिति की मांग है। ध्यान दें, 2 डी रेंडरिंग कोड में एंटी-अलियासिंग (अक्सर डिफ़ॉल्ट रूप से चालू), पिक्सेल-स्तर की सटीकता से बेहतर होगा। इसलिए, उदाहरण के लिए, समान आयामों के कैनवास में 100x100 का आंकड़ा प्रदान करना, मुझे लगता है, 1 / (100 x 100 x 255) = .000039% के आदेश पर सटीकता प्राप्त करें ... जो संभवतः "काफी अच्छा" है। सभी के लिए, लेकिन सबसे ज्यादा मांग वाली समस्याएं।
<p>Area computation of arbitrary figures as done thru pixel-painting, in which a complex shape is drawn into an HTML5 canvas and the area determined by comparing the number of white pixels found in the resulting bitmap. See javascript source for details.</p>
<canvas id="canvas" width="80" height="100"></canvas>
<p>Area = <span id="result"></span></p>
// Get HTML canvas element (and context) to draw into
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
// Lil' circle drawing utility
function circle(x,y,r) {
ctx.beginPath();
ctx.arc(x, y, r, 0, Math.PI*2);
ctx.fill();
}
// Clear canvas (to black)
ctx.fillStyle = 'black';
ctx.fillRect(0, 0, canvas.width, canvas.height);
// Fill shape (in white)
ctx.fillStyle = 'white';
circle(40, 50, 40);
circle(40, 10, 10);
circle(25, 15, 12);
circle(35, 90, 10);
// Get bitmap data
var id = ctx.getImageData(0, 0, canvas.width, canvas.height);
var pixels = id.data; // Flat array of RGBA bytes
// Determine area by counting the white pixels
for (var i = 0, area = 0; i < pixels.length; i += 4) {
area += pixels[i]; // Red channel (same as green and blue channels)
}
// Normalize by the max white value of 255
area /= 255;
// Output result
document.getElementById('result').innerHTML = area.toFixed(2);