תצורת צבע ו-JS

תצורת צבע ו-JS

נתונה לי תצורת צבע מסויימת בסגנון RGB
CSS: color:rgb(0,0,0);​
אני רוצה להפוך את זה לסגנון Hex דצימלי. במקרה הזה אני יודע מה הסגנון ההפוך. אבל אני מכין color pallete ב-JS ורוצה להציג למשתמש את הצבע גם ב-RGB וגם ב-Hex כמו כן אני רוצה לאפשר למשתמש להכניס צבעים ב-Hex או RGB ולקבל את הסגנון השני. אני מעוניין לדעת את האלגוריתם של הפיכת צבע RGB ל-Hex (אני מניח שהפוך זה פשוט לממש את האלגוריתם הפוך). תודה
 
אני אנסח אחרת את השאלה ../images/Emo13.gif

איך אני ממיר מספרים מבסיס 10 לבסיס 16 ולהיפך
תודה
 

selalerer

New member
הנה קצת קוד שלי, תרגיש חופשי להשתמש

//-----Arrays to hold hexadecimal figures----------------------------- var hexArr1=new Array("0","1","2","3","4","5","6","7","8","9","A","B","C","D","E","F"); var hexArr2=new Array("0","1","2","3","4","5","6","7","8","9","a","b","c","d","e","f"); //-------------------------------------------------------------------- /*---------BEGIN:Hex to Val/Val to Hex functions---------------------- --------------------------------------------------------------------- A group of functions that convert Hex formated numbers into Dec formated number and vice versa. The functions do not test input in order to give better performance. ---------------------------------------------------------------------*/ function getHexVal(HexFigure,HexArray) //Giv a character from "0" to "F" and get a value from 0 to 15. //You decide which HexArray to use (small letters or capital letters). { var i; for(i=0;i<HexArray.length;i++) if(HexArray==HexFigure) return i; return -1; } function makeValHex(Val) //Give a value from 0 to 15 and get a character from "0" to "F". { return hexArr1[Val]; } function getHexNumVal(HexNumText) //Give a Hex number (as text) and recieve its value. { var temp=0; var sum=0; var figVal=1; var HNT=new String(HexNumText); var c=0,i=HNT.length-1; for(c=0;c<HNT.length;c++,figVal*=16) { temp=getHexVal(HNT.charAt(i-c),hexArr1) if(temp==-1) temp=getHexVal(HNT.charAt(i-c),hexArr2); sum+=temp*figVal; } return sum; } //Give a numeric value and reciev a text of the Hex value. function makeValNumHex(num) { var p=16; var res=""; while(Math.floor(num/p)>15) p*=16; while(Math.floor(p)) { var figVal=Math.floor(num/p); res=res + makeValHex(figVal); num-=figVal*p; p/=16; } return res; } //-----------END:Hex to Val/Val to Hex--------------------------- //-------Color Class----------------------------- function getColor() { var red=makeValNumHex(this.R); if(red.length<2) red="0" + red; var green=makeValNumHex(this.G); if(green.length<2) green="0" + green; var blue=makeValNumHex(this.B); if(blue.length<2) blue="0" + blue; return "#" + red + green + blue; } function setColor(text) { switch(text.charAt(0)) { case "r": // format: rgb(R,G,B) var spos=text.indexOf("(")+1; var epos=text.indexOf(",",spos); this.R=Number(text.substr(spos,epos-spos)); spos=epos+1; epos=text.indexOf(",",spos); this.G=Number(text.substr(spos,epos-spos)); spos=epos+1; epos=text.indexOf(")",spos); this.B=Number(text.substr(spos,epos-spos)); break; case "#": // format: #RRGGBB this.R=getHexNumVal(text.substr(1,2)); this.G=getHexNumVal(text.substr(3,2)); this.B=getHexNumVal(text.substr(5,2)); break; default: // white this.R=255; this.G=255; this.B=255; break; } } function equalsColor(color) { if(this.R==color.R&&this.G==color.G&&this.B==color.B) return true; else return false; } function Color(R,G,B) { //properties: this.R=isNaN(R)?255:R; this.G=isNaN(G)?255:G; this.B=isNaN(B)?255:B; //methods: this.get=getColor; this.set=setColor; this.equals=equalsColor; } //----------------------------------------------------
 
תודה רבה אבל ../images/Emo13.gif

הייתי רוצה להכין את הקוד בעצמי כדי ללמוד ולהבין גם מה אני עושה בדיוק בקוד
לכן ביקשתי את האלגוריתם (או יותר נכון את הדרך להמיר מבסיס 10 ל-16 ולהיפך) בכל אופן. תודה רבה
 
ומה עשיתי ../images/Emo8.gif (שאלתי)

אחרי שהגבתי לך, מצאתי מאמר דרך גוגל על איך ממירים RGB ל-Hex (את הדרך ההפוכה אני מימשתי לבד). בעצם זה הקוד שעשיתי כדי להמיר:
function getHexText(num){ if(num<0 || num>255) return; var hexArr = ['0','1','2','3','4','5','6','7','8','9','a','b','c','d','e','f']; var multiplier = Math.floor(num/16), remainder=Math.floor(num%16); return hexArr[multiplier]+""+hexArr[remainder]; } function convertRGBtoHex(rgb){ rgb = ""+rgb var rExp = /rgb\((\d{1,3})\,\s?(\d{1,3})\,\s?(\d{1,3})\)\D*/ var red=getHexText(1*rgb.replace(rExp,"$1")), green=getHexText(1*rgb.replace(rExp,"$2")), blue=getHexText(1*rgb.replace(rExp,"$3")); hexColor = red+green+blue; return hexColor; }​
בקובץ המצורף יש את ה-Color Pallet שבניתי. אתם יכולים לומר לי איזה פונקציונליות חסרה
תודה
 
../images/Emo7.gif הסקריפט שלי לא יעיל, צריך../images/Emo53.gif

ל-Color Pallet שלי לוקח יותר מידי זמן להיבנות: כ-700ms במוזילה כ-2000ms ב-IE זה יותר מידי זמן לטעמי. זה הקוד שהשתמשתי בו כדי לבנות את ה-Pallet:
function createDiv(id, color, i){ var oDiv = document.createElement("div"); oDiv.className = "little"; switch(color){ case "red": oDiv.style.backgroundColor = "rgb("+i+",0,0)"; break; case "green": oDiv.style.backgroundColor = "rgb(0,"+i+",0)"; break; case "blue": oDiv.style.backgroundColor = "rgb(0,0,"+i+")"; break; } oDiv.onclick = function(){ fncSwitch(color, this.style.backgroundColor, true); }; document.getElementById(id).appendChild(oDiv); } function CreatePallet(){ var st = new Date().getTime(); for(var i=0;i<255;i++){ createDiv("red", "red", i); createDiv("green", "green", i); createDiv("blue", "blue", i); } var et = new Date().getTime(); alert(et-st+"ms"); }​
 
למעלה