2012-01-04 18 views
12

का उपयोग करके फ़ोटोशॉप के समान रंगीन पिकर बनाएं, मुझे कंप्यूटर ग्राफिक्स में बिल्कुल भी पता नहीं है और मुझे HTML पृष्ठ में एम्बेड करने के लिए जावास्क्रिप्ट टूल के रूप में रंग पिकर बनाने की आवश्यकता है।जावास्क्रिप्ट और एचटीएमएल कैनवास

सबसे पहले, और फ़ोटोशॉप के एक को देखते हुए, मैंने आरजीबी पैलेट को त्रि-आयामी मैट्रिक्स के रूप में सोचा। मेरी पहली envolved प्रयास:

<script type="text/javascript"> 
     var rgCanvas = document.createElement('canvas'); 
     rgCanvas.width = 256; 
     rgCanvas.height = 256; 
     rgCanvas.style.border = '3px solid black'; 
     for (g = 0; g < 256; g++){ 
      for (r = 0; r < 256; r++){ 
       var context = rgCanvas.getContext('2d'); 
       context.beginPath(); 
       context.moveTo(r,g); 
       context.strokeStyle = 'rgb(' + r + ', ' + g + ', 0)'; 
       context.lineTo(r+1,g+1); 
       context.stroke(); 
       context.closePath(); 
      } 
     } 

     var bCanvas = document.createElement('canvas'); 
     bCanvas.width = 20; 
     bCanvas.height = 256; 
     bCanvas.style.border = '3px solid black';  
     for (b = 0; b < 256; b++){ 
      var context = bCanvas.getContext('2d'); 
      context.beginPath(); 
      context.moveTo(0,b); 
      context.strokeStyle = 'rgb(' + 0 + ', ' + 0 + ', ' + b + ')'; 
      context.lineTo(20, b); 
      context.stroke(); 
      context.closePath(); 
     } 

     document.body.appendChild(rgCanvas); 
     document.body.appendChild(bCanvas); 
    </script> 

इस तरह
3D RGB color map

मेरे सोचा यह भी रेखीय है, लोगों को मैं फ़ोटोशॉप में और वेब पर देखने के लिए की तुलना है कुछ का परिणाम है। मैं इस तरह एक चयनकर्ता में रंग मानचित्रण के पीछे तर्क जानना चाहूंगा: photoshop color picker

मैं वास्तव में algorythms ही जरूरत नहीं है, मैं मुख्य रूप से तर्क समझने की कोशिश कर रहा हूँ।

धन्यवाद

+3

धन्यवाद, लेकिन मैं दो कारणों से स्क्रैच से एक बनाने की कोशिश कर रहा हूं: इसके मजाक के लिए और केवल कैनवास का उपयोग करके, imgs –

+0

से स्वतंत्र "भाग के लिए" भाग निश्चित रूप से इसके लायक है! :) मैं शायद यह भी करूँगा। चीयर्स। – techfoobar

उत्तर

6

मैं एक बार एक कैनवास आधारित रंग पिकर कार्यान्वित किया। मैंने ऐसा इसलिए किया क्योंकि वेब पर मिले अधिकांश रंग पिकर ने बहुत सी स्थिर छवियों का उपयोग किया और मैं अतिरिक्त अनुरोध नहीं करना चाहता था।

रंग उत्पादन 10K javascript entry पर आधारित है जो मैंने पाया। मैंने बस कुछ बग तय की और कोड पर कुछ रिफैक्टरिंग की।

आपको बस अपने कोड में <input type="color-picker" /> शामिल करना है और DOM लोड होने के बाद PICKER.bind_inputs() पर कॉल करना है। मन में

http://jsfiddle.net/mShET/1/

भालू है कि एचटीएमएल 5 विनिर्देश already supports एक रंग पिकर प्रपत्र इनपुट:

यहाँ मेरी कोड के साथ एक jsFiddle है। लेकिन वर्तमान में, केवल ओपेरा ने इसे लागू किया है।

+0

मुझे तुम्हारा पसंद है, लेकिन मैं वास्तव में यह समझने की कोशिश कर रहा हूं कि यह आरजीबी + एचएसबी कैसे काम करता है। –

+0

मेरा बुरा, मैं वास्तव में आपके प्रश्न को याद किया। क्या आपने पहले से ही एचएसवी पर विकिपीडिया लेख की जांच की है? http://en.wikipedia.org/wiki/HSL_and_HSV –

+0

यह बहुत प्रभावशाली, अच्छा जवाब है। – Johnn5er

3

फ़ोटोशॉप पिकर के पीछे तर्क के बारे में अपने प्रश्न का उत्तर देने के लिए: ऐसा लगता है कि रंग पिकर एचएसबी रंग स्थान पर आधारित है। ह्यू (एच) को दाईं तरफ लंबवत स्लाइडर द्वारा चुना जाता है, संतृप्ति (एस) रंग पिकर क्षेत्र के क्षैतिज अक्ष द्वारा उठाया जाता है, और चमक (बी) रंग पिकर क्षेत्र के ऊर्ध्वाधर अक्ष द्वारा उठाया जाता है।

Wikipedia से उद्धृत करने के लिए:

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

+0

इस क्षेत्र में ज्ञान की कमी की अनदेखी करने के बावजूद, मेरी राय में, कुछ गायब है। यदि आप उस त्रि-आयामी तरीके से HxSxB को नियंत्रित करते हैं, तो RxGxB कहां खेलता है? –

+1

मैं इस बात पर टिप्पणी नहीं कर सकता कि उन्होंने ऐसा क्यों किया है, मैं बस फ़ोटोशॉप में गया और पिकर को ऊपर और नीचे ले जाया, तरफ से तरफ और फिर स्लाइडर को दाईं ओर ले जाया गया। यह निश्चित रूप से सीधे एचएसबी रंग अंतरिक्ष को नियंत्रित करता है। मुझे लगता है कि वे रंग को दिखाने के लिए कलर पिकर को बदलने से पहले एचएसबी में हाथ से दर्ज किए गए किसी भी रंग को परिवर्तित करके किसी भी रंगीन रंगों में प्रदर्शित रंग को परिवर्तित कर सकते हैं। – Gareth

+0

धन्यवाद, यह वही है जो मैं समझने की कोशिश कर रहा हूं, इसलिए मैं उस ज्ञान से एक अलगाव बना सकता हूं –

0

मैंने एक जावास्क्रिप्ट प्रोजेक्ट बनाया, "मास्टरकॉलरपिकर", जिसमें 4 अलग-अलग कैनवास आधारित रंग-पिकर्स हैं।मुझे "कलर व्हील" के साथ-साथ "एचएसबी" और "एचएसएल" और "आरजीबी" पर विकिपीडिया लेखों को पढ़ने के कई महीने लगे और मैंने एल्गोरिदम के साथ भी काम किया क्योंकि मैंने प्रत्येक रंग-पिकर को स्क्रैच से बनाया था। इस परियोजना में मैंने जिस चीज पर ध्यान केंद्रित किया है, वह इन रंग-रिक्त स्थानों के LOGIC को आसानी से समझने और उपयोग प्रारूप में ला रहा है। मेरी आशा है कि सिर्फ परियोजना का उपयोग करने से आप प्रत्येक रंग-स्थान को समझने में मदद करेंगे। जहां तक ​​एक स्थान से दूसरे स्थान पर मैपिंग है, उदाहरण के लिए, आरजीबी और एचएसएल के बीच संबंध, आपको इसे शुरू करने के लिए वास्तव में अपनी 3 डी कल्पना का विस्तार करना होगा। यही वह जगह है जहां मुझे उम्मीद है कि यह परियोजना मदद कर सकती है। लेकिन वास्तव में, इन एल्गोरिदम को समझने की कोशिश कर रहे वर्षों से दीवार के खिलाफ अपने सिर को धक्का मत दो। विकिपीडिया इसके अलावा, देखें:

http://www.easyrgb.com/index.php?X=MATH

सभी सूत्र आप पचा सकता है। इसके अलावा: विकिपीडिया अपने लेखों में से एक में "क्रोमा" के बारे में बात करता है और कहता है कि इसे "संतृप्ति" से भ्रमित न करें। My MasterColorPicker प्रोजेक्ट एक और रंग-स्थान, ह्यू-क्रोमा-ग्रे (एचसीजी) जोड़ता है, और इस प्रोजेक्ट के स्रोत स्रोत एचसीजी और आरजीबी के बीच रूपांतरित करने के सूत्रों को दस्तावेज करता है। एचसीजी के साथ, आप "वेब-सेफ" रंगों का संगठन पा सकते हैं, और परियोजना में "इंद्रधनुष मिस्टरो-पिकर" आपको उस रंग-स्थान का स्पष्ट दृश्य प्रदान करेगा। आप परियोजना कोशिश करते हैं और यहां से अपनी खुद की प्रणाली (खुला स्रोत और नि: शुल्क) पर इसका इस्तेमाल करने के लिए जावास्क्रिप्ट/HTML फ़ाइलों को डाउनलोड कर सकते हैं:

http://softmoon-webware.com/MasterColorPicker_instructions.php

शांति!

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