जावास्क्रिप्ट में अपना खुद का कलर पिकर कैसे बनाएं?

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

चूँकि मैं पुस्तकालयों के बिना शुद्ध js में लिखता हूं (एक के अलावा जो मैं खुद लिखता हूं :)) इस पोस्ट में केवल कट्टर शुद्ध जावास्क्रिप्ट होगी।
Cp लिखने के लिए आपको क्या जानना चाहिए (संक्षिप्त रंग पिकर):

• Drag'n'Drop मूल बातें
• कैनवस को थोड़ा समझें (यह उस पर एक ह्यू कलर स्केल खींचेगा)

1.CSS और html

<div class="picker" id="primary_block" > <div id="line"> <div id="arrows"> <div class="left_arrow"></div> <div class="right_arrow"></div> </div> </div> <div id="block_picker"> <img src="img/bgGradient.png" class="bk_img"><div id="circle"></div> </div> </div> 

मुझे लगता है कि यहां टिप्पणियों को सरलतम संरचना की आवश्यकता नहीं है।
अब सी.एस.

 .right_arrow { width:0; height:0; left:23px; position:absolute; border-bottom:6px solid transparent; border-left:10px solid transparent; border-top:6px solid transparent; border-right:10px solid black; }//    .circle { width:8px; height:8px; border:1px solid black; border-radius:50%; position:absolute; left:0; top:0; cursor: default; -moz-user-select: none; -khtml-user-select: none; user-select: none; -webkit-user-select: none; } 

यह, ज़ाहिर है, सभी सीएसएस कोड नहीं है, लेकिन अधिक दिलचस्प (केवल स्थिति तत्व) कुछ भी नहीं है।

2.Javascript

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

 gradient: function(canva,w,h){ /* canva-  canvas h -   w-  */ var context, gradient, hue; context = canva.getContext("2d"); gradient = context.createLinearGradient(w/2,h,w/2,0); hue = [[255,0,0],[255,255,0],[0,255,0],[0,255,255],[0,0,255],[255,0,255],[255,0,0]]; //   hue  rgb for (var i=0; i <= 6;i++){ color = 'rgb('+hue[i][0]+','+hue[i][1]+','+hue[i][2]+')'; gradient.addColorStop(i*1/6, color); }; context.fillStyle = gradient; context.fillRect(0,0, w ,h); } 

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

HSV एक रंग मॉडल है जिसमें रंग निर्देशांक हैं:

रंग - रंग टोन, (उदाहरण के लिए, लाल, हरा या नीला-नीला)। यह 0-360 ° के बीच भिन्न होता है, लेकिन कभी-कभी यह 0-100 या 0-1 की सीमा तक कम हो जाता है।

संतृप्ति - संतृप्ति। 0-100 या 0-1 के बीच बदलता रहता है। यह पैरामीटर जितना बड़ा होगा, "क्लीनर" रंग, उतना ही यह पैरामीटर कभी-कभी रंग शुद्धता कहलाता है। और यह पैरामीटर शून्य के करीब है, रंग के करीब ग्रे तटस्थ है।

मान (रंग मान) या चमक - चमक। इसे 0-100 और 0-1 के बीच भी सेट किया जा सकता है।

इसे हमारी cp पर कैसे लागू किया जाए, यह नीचे स्पष्ट रूप से दिखाया गया है (चित्र 1)

हमारे पास ह्यू स्केल है, हमें संतृप्ति और मूल्य (रंग मूल्य) में बदलाव करने की आवश्यकता है।
चूंकि S और V का मान 0-100 है, इसलिए सवाल उठ सकता है:
यदि ब्लॉक की चौड़ाई और ऊंचाई 100 से अधिक है तो क्या करें?
-

 var px_X = elem.clientWidth / 100; /*   px    . :   180 180/100 ,    1       1,8; */ var S = left / px_X;//   left   "" (div c id = "circle")  Math.round(S);//    

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

  hsv_rgb: function (H,S,V){ var f , p, q , t, lH; S /=100; V /=100; lH = Math.floor(H / 60); f = H/60 - lH; p = V * (1 - S); q = V *(1 - S*f); t = V* (1 - (1-f)* S); switch (lH){ case 0: R = V; G = t; B = p; break; case 1: R = q; G = V; B = p; break; case 2: R = p; G = V; B = t; break; case 3: R = p; G = q; B = V; break; case 4: R = t; G = p; B = V; break; case 5: R = V; G = p; B = q; break; } return [parseInt(R*255), parseInt(G*255), parseInt(B*255)]; } 

मैंने इसे स्वयं लिखा क्योंकि नेटवर्क पर मुझे जो मिला वह सही तरीके से काम नहीं किया।
मुझे उम्मीद है कि मैंने इस पोस्ट में cp बनाने के लिए बुनियादी ज्ञान दिया है, इसलिए मैं यहाँ समाप्त करूँगा क्योंकि मैं कार्यक्षमता बढ़ा सकता हूं और लंबे समय के लिए विभिन्न रंग प्रारूपों में रूपांतरण जोड़ सकता हूं ...

3. संक्षेप करने के लिए

यही मुझे एक डेमो मिला।
इस पोस्ट में मैंने यह समझाने की कोशिश की कि बिना कोड में बहुत ज्यादा सीलिंग के cp कैसे बनाया जाए क्योंकि मुझे ड्रैग` एन`ड्रॉप में यह बात दिखाई नहीं दे रही है कि कुछ भी जटिल नहीं है!
आपका ध्यान के लिए धन्यवाद CyBer_UA था और यह जावास्क्रिप्ट के बारे में मेरी पहली पोस्ट है (मुझे उम्मीद है कि अंतिम नहीं)।
अंतिम उदाहरण में P.s.code कुटिल है (यह एक लंबे समय से पहले लिखा गया था), यह सिर्फ इतना है कि हमें इस पोस्ट को लिखने के लिए बस मिला है।