ग्रेडियेंट

Question

के साथ कलरबार में विशिष्ट स्थिति का रंग मान प्राप्त करें मैंने CSS3 शैलियों (fiddle) के साथ एक ढाल कोलोबार उत्पन्न किया है और अब उस रंगीन रंग में किसी विशिष्ट स्थान (x और y coords द्वारा) का रंग मान चाहते हैं। जहां तक ​​मुझे पता है कि ऐसा करने का कोई सीधा तरीका नहीं है।

1. जावास्क्रिप्ट में ढाल एल्गोरिथ्म लागू है और खरोंच से मूल्य की गणना:

   मैं दो विकल्प देखेंगे। क्या कोई सटीक परिभाषा है कि एल्गोरिदम कई रंगों के लिए कैसे काम करता है? क्या ढाल प्रत्येक ब्राउज़र में समान दिखता है?

2. ग्रेडर प्राप्त करने के लिए सीधे ढाल खींचने और कैनवास तक पहुंचने के लिए canvas और createLinearGradient विधि का उपयोग करें।

कोई अन्य विकल्प?

Answer 1

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

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

आप एक regex के साथ सीएसएस रंग निकाल सकते हैं, और साथ आरजीबी के लिए किसी भी मानव लोगों को मैप ...

var background = window.getComputedStyle(element).getPropertyValue("background"); 

var colorStops = []; 
var matchColorStops = /,\s*(\w+)\s+(\d+)%/g; 
var match; 

var humanToHex = { 
    "red": [255, 0, 0], 
    "green": [0, 128, 0], 
    "blue": [0, 0, 255] 
}; 

while (match = matchColorStops.exec(background)) { 
    if (humanToHex[match[1]]) { 
     match[1] = humanToHex[match[1]]; 
    } 
    colorStops.push({ 
     percentage: match[2], 
     color: match[1] 
    }); 
} 

आप दो रंगों को जोड़ को यह छोटा सा JavaScript कार्य का उपयोग कर सकते हैं अगर वे में विभाजित हैं उनके आरजीबी मूल्य।

var getStepColor = function(colorA, colorB, value) { 
    return colorA.map(function(color, i) { 
     return (color + value * (colorB[i] - color)) & 255; 
    }); 
}; 

आप को जोड़ सकते हैं कि आप ऐसा करने देगा कि कुछ कोड प्राप्त करने के ...

var getStepColor = function (colorA, colorB, value) { 
    return colorA.map(function (color, i) { 
     return (color + value * (colorB[i] - color)) & 255; 
    }); 
}; 

var gradient = document.querySelector("#gradient"); 
var preview = document.querySelector("#preview"); 

var background = window.getComputedStyle(gradient).getPropertyValue("background"); 

var colorStops = []; 
var matchColorStops = /,\s*(\w+)\s+(\d+)%/g; 
var match; 

var humanToHex = { 
    "red": [255, 0, 0], 
    "green": [0, 128, 0], 
    "blue": [0, 0, 255] 
}; 

while (match = matchColorStops.exec(background)) { 
    // If colour is *human-readable*, then 
    // substitute it for a RGB value. 
    if (humanToHex[match[1]]) { 
     match[1] = humanToHex[match[1]]; 
    } 
    colorStops.push({ 
     percentage: match[2], 
     color: match[1] 
    }); 
} 

gradient.addEventListener("mousemove", function (event) { 

    var x = event.pageX - gradient.offsetTop; 
    var y = event.pageY - gradient.offsetLeft; 
    var percentage = (x/this.offsetWidth) * 100; 

    var i; 
    for (i = 0; i < colorStops.length; i++) { 
     if (colorStops[i].percentage > percentage) { 
      break; 
     }; 
    } 

    var lowerIndex = i == 1 ? 0 : i - 1; 
    var upperIndex = lowerIndex + 1; 
    var value = x/(gradient.offsetWidth/(colorStops.length - 1)) % 1; 

    color = getStepColor(colorStops[lowerIndex].color, colorStops[upperIndex].color, value); 

    preview.style.backgroundColor = "rgb(" + color.join() + ")"; 
    preview.textContent = preview.style.backgroundColor; 

}); 

jsFiddle।

यह इसके साथ आने के लिए एक त्वरित हैक-इश तरीका है, शायद रंग निकालने का एक बेहतर मूर्खतापूर्ण तरीका है, और यह पता लगाने के लिए कि पॉइंटर किस ढाल सेगमेंट के संबंध में है।