Mirrors/ICEcoder
2
0
Fork 0
mirror of https://github.com/icecoder/ICEcoder.git synced 2026-03-03 23:34:01 +01:00
Code Issues Packages Projects Releases Wiki Activity

overPopup flag, canvas display & hex/RGB convert

Browse Source 
New flag to determin if we are over a popup or not, won't hide popup on
click if we are
drawCanvasImage function added, takes img node, creates a new canvas and
on load of a JS img object, puts the same image into the canvas, scaled
to same size. This then has 2 functions applied to update RGB and Hex
values and BG colors as the mouse moves and also on click sets another
set
rgbToHex and toHex functions added to help return hex values on demand
This commit is contained in:
Matt Pass
2013-05-04 13:48:33 +01:00
parent 1d5c049c01
commit e58f9cae28
1 changed files with 51 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

51
lib/ice-coder.js
View File

@@ -27,6 +27,7 @@ var ICEcoder = {
serverQueueItems: [], // Array of URLs to call in order
stickyTab: false, // Target variable for the sticky tab window
pluginIntervalRefs: [], // Array of plugin interval refs
overPopup: false, // Indicates if we're over a popup or not
ready: false, // Indicates if ICEcoder is ready for action
// Set our aliases
@@ -1240,6 +1241,56 @@ var ICEcoder = {
}
},
// Draw a canvas image based on actual img node image src
drawCanvasImage: function (imgThis) {
var canvas = document.getElementById('canvasPicker').getContext('2d');
var img = new Image();
img.src = imgThis.src;
img.onload = function() {
document.getElementById('canvasPicker').width = imgThis.width;
document.getElementById('canvasPicker').height = imgThis.height;
canvas.drawImage(img,0,0,imgThis.width,imgThis.height);
}
// Show pointer colors on mouse move over canvas
document.getElementById('canvasPicker').onmousemove = function(event) {
// get mouse x & y
var x = event.pageX - this.offsetLeft;
var y = event.pageY - this.offsetTop;
// get image data & then RGB values
var imgData = canvas.getImageData(x, y, 1, 1).data;
var R = imgData[0];
var G = imgData[1];
var B = imgData[2];
var rgb = R+','+G+','+B;
// Get hex from RGB value
var hex = top.ICEcoder.rgbToHex(R,G,B);
// set the values & BG colours of the input boxes
document.getElementById('rgbMouseXY').value = rgb;
document.getElementById('hexMouseXY').value = '#' + hex;
document.getElementById('hexMouseXY').style.backgroundColor = document.getElementById('rgbMouseXY').style.backgroundColor = '#' + hex;
};
// Set pointer colors on clicking canvas
document.getElementById('canvasPicker').onclick = function() {
document.getElementById('rgb').value = document.getElementById('rgbMouseXY').value;
document.getElementById('hex').value = document.getElementById('hexMouseXY').value;
document.getElementById('hex').style.backgroundColor = document.getElementById('rgb').style.backgroundColor = document.getElementById('hex').value;
}
},
// Convert RGB values to Hex
rgbToHex: function(R,G,B) {
return top.ICEcoder.toHex(R)+top.ICEcoder.toHex(G)+top.ICEcoder.toHex(B);
},
// Return numbers as hex equivalent
toHex: function(n) {
n = parseInt(n,10);
if (isNaN(n)) return "00";
n = Math.max(0,Math.min(n,255));
return "0123456789ABCDEF".charAt((n-n%16)/16) + "0123456789ABCDEF".charAt(n%16);
},
// Insert new color value
insertColorValue: function(color) {
var cM, cursor;