Farbauswahlfeld

fanste

Erfahrenes Mitglied
Hi,

Ich bin schon seit gut 1 Stunde auf der Suche nach einem Farbauswahlfeld, wie man es von Officeanwedungen her kennt (s. Grafik). Weiß jemand, wie man das realisiert? Oder weiß jemand ein Link dazu? Schön wäre es, wenn es vom Aufbau her genauso ist, wie auf dem Bild. Muss aber nicht umbedingt sein (man sollte nur vile Farben zum auswählen haben).

Ich verlange jetzt nicht, dass mir das jemand scriptet (würde eh keiner für lau machen, denke ich), aber wenn jemand so etwas kennt, könnte er mir das bitte geben, ok?

mb fanste

PS: Danke schonmal dafür!
 

Anhänge

  • index.1.jpg
    index.1.jpg
    6,7 KB · Aufrufe: 201
Das hatte ich auch schon gesehen, aber als ich mir den Code in meinen Javaeditor zum ausprobieren eingefügt hatte, hat es nur Fehler gehagelt.

Ich werde es nochmal nacher versuchen.
Könnte man den auch so verändern, dass er das Feld in der Mitte nicht Farblich ändert, wenn man den Schieberegler rechts betätigt?
 
Zuletzt bearbeitet:
Das prob ist halt, dass das alles mit Java ist. Nicht jeder hat das installiert. Aber ich werde es solange mal nehmen, bis ich irgendwas in JS habe.

EDIT: Hier mal noch die Fehlermeldungen, die ich bei dem einen Code erhalte.
Code:
colorpicker.java:9: <identifier> expected
ColorfColor;
           ^
colorpicker.java:10: <identifier> expected
intcx,cy,cw,ch;
     ^
colorpicker.java:11: <identifier> expected
intxsep,ysep;
       ^
colorpicker.java:12: <identifier> expected
intpx,py,sy;
     ^
colorpicker.java:13: <identifier> expected
intsatx,saty,satw,sath;
       ^
colorpicker.java:14: <identifier> expected
intmainx,mainy,mainw,mainh;
        ^
colorpicker.java:15: <identifier> expected
doublehValue,sValue,bValue;
            ^
colorpicker.java:16: <identifier> expected
intpox[],poy[];
        ^
colorpicker.java:17: <identifier> expected
Imageoffs;// Offscreen image
         ^
colorpicker.java:18: <identifier> expected
Graphicsgrf;// Offscreen graph port
           ^
colorpicker.java:46: not a statement
inti,j;
^
colorpicker.java:46: ';' expected
inti,j;
    ^
colorpicker.java:47: not a statement
intix,iy;
^
colorpicker.java:47: ';' expected
intix,iy;
     ^
colorpicker.java:48: not a statement
intcol;
^
colorpicker.java:49: not a statement
floath,s,b;
^
colorpicker.java:49: ';' expected
floath,s,b;
      ^
colorpicker.java:75: not a statement
floath,s,b;
^
colorpicker.java:75: ';' expected
floath,s,b;
      ^
colorpicker.java:76: not a statement
intcol;
^
colorpicker.java:77: not a statement
intix,iy,i,j;
^
colorpicker.java:77: ';' expected
intix,iy,i,j;
     ^
colorpicker.java:111: not a statement
floath,s,b;
^
colorpicker.java:111: ';' expected
floath,s,b;
      ^
colorpicker.java:112: not a statement
intcol;
^
colorpicker.java:113: not a statement
Stringwks,outs;
^
colorpicker.java:113: ';' expected
Stringwks,outs;
         ^
colorpicker.java:114: not a statement
intred,green,blue;
^
colorpicker.java:114: ';' expected
intred,green,blue;
      ^

Und noch der passende Code dazu:
Code:
/* 1 */ // 
/* 2 */ //Color Picker Copyright(C)1996. Masakazu Fujimiya 
/* 3 */ //m-fujimiya@nri.co.jp 
/* 4 */ // 
/* 5 */ 
/* 6 */ import java.awt.*; 
/* 7 */ 
/* 8 */ public class colorpicker extends java.applet.Applet { 
/* 9 */ ColorfColor; 
/* 10 */ intcx,cy,cw,ch; 
/* 11 */ intxsep,ysep; 
/* 12 */ intpx,py,sy; 
/* 13 */ intsatx,saty,satw,sath; 
/* 14 */ intmainx,mainy,mainw,mainh; 
/* 15 */ doublehValue,sValue,bValue; 
/* 16 */ intpox[],poy[]; 
/* 17 */ Imageoffs;// Offscreen image 
/* 18 */ Graphicsgrf;// Offscreen graph port 
/* 19 */ 
/* 20 */ public void init() { 
/* 21 */ pox = new int[4]; 
/* 22 */ poy = new int[4]; 
/* 23 */ 
/* 24 */ // Off screen bitmap image 
/* 25 */ offs = createImage(size().width, size().height); 
/* 26 */ grf = offs.getGraphics(); 
/* 27 */ 
/* 28 */ cx = cy = 10; 
/* 29 */ cw = 4 ; ch = 8; 
/* 30 */ xsep = 64 ; ysep = 16; 
/* 31 */ hValue = 0; sValue = 0; bValue = 1; 
/* 32 */ 
/* 33 */ satx = xsep*cw + cx*2; 
/* 34 */ satw = cx*2; 
/* 35 */ saty = cy; 
/* 36 */ sath = ysep*ch; 
/* 37 */ sy = saty + sath; 
/* 38 */ mainx = px = cx; 
/* 39 */ mainy = py = cy; 
/* 40 */ mainw = xsep*cw; 
/* 41 */ mainh = ysep*ch; 
/* 42 */ } 
/* 43 */ 
/* 44 */ 
/* 45 */ public void paint(Graphics g) { 
/* 46 */ inti,j; 
/* 47 */ intix,iy; 
/* 48 */ intcol; 
/* 49 */ floath,s,b; 
/* 50 */ 
/* 51 */ grf.setColor(Color.lightGray); 
/* 52 */ grf.fillRect(0, 0, size().width, size().height); 
/* 53 */ for (i=0 ; i/* 54 */ for (j=0 ; j/* 55 */ ix = i*cw + cx; 
/* 56 */ iy = j*ch + cy; 
/* 57 */ h = (float)((double)i/(double)xsep); 
/* 58 */ s = (float)((double)j/(double)ysep); 
/* 59 */ b = (float)bValue; 
/* 60 */ col = Color.HSBtoRGB(h,s,b); 
/* 61 */ grf.setColor(new java.awt.Color(col)); 
/* 62 */ grf. fillRect(ix,iy,cw,ch); 
/* 63 */ } 
/* 64 */ } 
/* 65 */ g.drawImage(offs, 0, 0, this); 
/* 66 */ paintAns(g); 
/* 67 */ 
/* 68 */ g.setColor(Color.lightGray); 
/* 69 */ g.draw3DRect(satx-1, saty-1, satw+1, sath+1, true); 
/* 70 */ g.draw3DRect(mainx-1, mainy-1, mainw+1, mainh+1, true); 
/* 71 */ } 
/* 72 */ 
/* 73 */ 
/* 74 */ public void paintAns(Graphics g) { 
/* 75 */ floath,s,b; 
/* 76 */ intcol; 
/* 77 */ intix,iy,i,j; 
/* 78 */ 
/* 79 */ for (j=0 ; j/* 80 */ ix = xsep*cw + cx + cx; 
/* 81 */ iy = j*ch + cy; 
/* 82 */ h = (float)hValue; 
/* 83 */ s = (float)sValue; 
/* 84 */ b = (float)((double)j/(double)ysep); 
/* 85 */ col = Color.HSBtoRGB(h,s,b); 
/* 86 */ g.setColor(new java.awt.Color(col)); 
/* 87 */ g. fillRect(ix,iy,cx*2,ch); 
/* 88 */ } 
/* 89 */ 
/* 90 */ ix = (int)(hValue*(double)cw*(double)xsep) + cx; 
/* 91 */ iy = (int)(sValue*(double)ch*(double)ysep) + cy; 
/* 92 */ g.setColor(Color.yellow); 
/* 93 */ g.drawRect(ix-1,iy-1,2,2); 
/* 94 */ g.setColor(Color.blue); 
/* 95 */ g.drawRect(ix-2,iy-2,4,4); 
/* 96 */ 
/* 97 */ pox[0] = pox[3] = xsep*cw + cx*3; 
/* 98 */ poy[0] = poy[3] = (int)(bValue*(double)ysep*(double)ch) + cy; 
/* 99 */ pox[1] = pox[2] = pox[0] + 4; 
/* 100 */ poy[1] = poy[0] + 4; 
/* 101 */ poy[2] = poy[0] - 4; 
/* 102 */ g.setColor(Color.yellow); 
/* 103 */ g.fillPolygon(pox, poy, 3); 
/* 104 */ g.setColor(Color.blue); 
/* 105 */ g.drawPolygon(pox, poy, 4); 
/* 106 */ paintValue(g); 
/* 107 */ } 
/* 108 */ 
/* 109 */ 
/* 110 */ public void paintValue(Graphics g) { 
/* 111 */ floath,s,b; 
/* 112 */ intcol; 
/* 113 */ Stringwks,outs; 
/* 114 */ intred,green,blue; 
/* 115 */ 
/* 116 */ h = (float)hValue; 
/* 117 */ s = (float)sValue; 
/* 118 */ b = (float)bValue; 
/* 119 */ col = Color.HSBtoRGB(h,s,b); 
/* 120 */ g.setColor(new java.awt.Color(col)); 
/* 121 */ g. fill3DRect(mainx, mainy+mainh+cy, mainw+cx+satw,cy*2, true); 
/* 122 */ 
/* 123 */ int wk = col/256/256/256; 
/* 124 */ col = col - wk; 
/* 125 */ red = col/256/256; 
/* 126 */ green = (col-red*256*256)/256; 
/* 127 */ blue = col-red*256*256-green*256; 
/* 128 */ 
/* 129 */ wks = Integer.toString(255+red,16); 
/* 130 */ if (wks.length()==1) wks = "0" + wks; 
/* 131 */ outs = wks; 
/* 132 */ wks = Integer.toString(255+green,16); 
/* 133 */ if (wks.length()==1) wks = "0" + wks; 
/* 134 */ outs = outs + wks; 
/* 135 */ wks = Integer.toString(255+blue,16); 
/* 136 */ if (wks.length()==1) wks = "0" + wks; 
/* 137 */ outs = outs + wks; 
/* 138 */ 
/* 139 */ g.clearRect(0, mainy+mainh+cy*3, size().width, 35); 
/* 140 */ g.setColor(Color.black); 
/* 141 */ g.drawString("Color value = " + outs.toUpperCase(), mainx+5, mainy+mainh+cy*3+25); 
/* 142 */ } 
/* 143 */ 
/* 144 */ 
/* 145 */ public boolean mouseUp(java.awt.Event evt, int jx, int jy) { 
/* 146 */ intdt=1; 
/* 147 */ 
/* 148 */ if ((jx >= satx-dt)&&(jx <= satx+satw+dt)&&(jy >= saty-dt)&&(jy <= saty+sath+dt)) { 
/* 149 */ bValue = (double)(jy - saty)/(double)sath; 
/* 150 */ hValue = (double)(px - mainx)/(double)mainw; 
/* 151 */ sValue = (double)(py - mainy)/(double)mainh; 
/* 152 */ if(bValue<0) bValue=0; 
/* 153 */ if(bValue>1) bValue=1; 
/* 154 */ repaint(); 
/* 155 */ sy = jy; 
/* 156 */ } 
/* 157 */ if ((jx >= mainx-dt)&&(jx <= mainx+mainw+dt)&&(jy >= mainy-dt)&&(jy <= mainy+mainh+dt)) { 
/* 158 */ repaint(px-4, py-4, 8, 8); 
/* 159 */ px = jx ; py = jy; 
/* 160 */ hValue = (double)(jx - mainx)/(double)mainw; 
/* 161 */ sValue = (double)(jy - mainy)/(double)mainh; 
/* 162 */ if(hValue<0) hValue=0; 
/* 163 */ if(hValue>0.999) hValue=0.999; 
/* 164 */ if(sValue<0) sValue=0; 
/* 165 */ if(sValue>0.995) sValue=0.995; 
/* 166 */ paintAns(getGraphics()); 
/* 167 */ } 
/* 168 */ return(true); 
/* 169 */ } 
/* 170 */ 
/* 171 */ 
/* 172 */ public boolean mouseDrag(java.awt.Event evt, int jx, int jy) { 
/* 173 */ intdt=1; 
/* 174 */ 
/* 175 */ if ((jx >= satx-dt)&&(jx <= satx+satw+dt)&&(jy >= saty-dt)&&(jy <= saty+sath+dt)) { 
/* 176 */ bValue = (double)(jy - saty)/(double)sath; 
/* 177 */ hValue = (double)(px - mainx)/(double)mainw; 
/* 178 */ sValue = (double)(py - mainy)/(double)mainh; 
/* 179 */ } else { 
/* 180 */ if ((jx >= mainx-dt)&&(jx <= mainx+mainw+dt)&&(jy >= mainy-dt)&&(jy <= mainy+mainh+dt)) { 
/* 181 */ bValue = (double)(sy - saty)/(double)sath; 
/* 182 */ hValue = (double)(jx - mainx)/(double)mainw; 
/* 183 */ sValue = (double)(jy - mainy)/(double)mainh; 
/* 184 */ } else { 
/* 185 */ bValue = (double)(sy - saty)/(double)sath; 
/* 186 */ hValue = (double)(px - mainx)/(double)mainw; 
/* 187 */ sValue = (double)(py - mainy)/(double)mainh; 
/* 188 */ } 
/* 189 */ } 
/* 190 */ if(bValue<0) bValue=0; 
/* 191 */ if(bValue>1) bValue=1; 
/* 192 */ if(hValue<0) hValue=0; 
/* 193 */ if(hValue>0.999) hValue=0.999; 
/* 194 */ if(sValue<0) sValue=0; 
/* 195 */ if(sValue>0.995) sValue=0.995; 
/* 196 */ paintValue(getGraphics()); 
/* 197 */ return(true); 
/* 198 */ } 
/* 199 */ 
/* 200 */ 
/* 201 */ public void update(Graphics g) { 
/* 202 */ paint(g); 
/* 203 */ } 
/* 204 */ 
/* 205 */ }
 
Zuletzt bearbeitet:
Das Java Zeugs hat sich erledigt. Habe etwas auf http://www.interclasse.com/scripts/colorpicker.php gefunden. In JS.

Jetzt noch eine Frage. Ist es möglich, wenn man jetzt z.B. den Farbcode #3eaf00 (ein grün) hat, dass dann im Feld rechts ein farbverlauf von schwarz über (dieses) grün nach weiß ist? Von schwarz nach weiß ist kein Problem. Nur dieses Grün (bzw die gerade gewählte Farbe) da hineinzubringen.
 
Aber nur die Farbe zuweißen langt ja nicht. Da soll doch ein Farbverlauf von schwarz über die aktuelle farbe nach weiß drin sein. Oder versteh ich da grad was falsch?
 
Oh man, du kannst doch mehre div's nehmen und die Farbe entsprechend immer dunkler bzw. heller machen du brauchst doch nur die Ausgangsfarbe nehmen und ihre rbg werte erhöhen bzw. erniedrigen und dann diese Farbwerte den divs zuweisen.
 
Wenn das für mich so einfach wäre. Ich hab überhaupt keine Ahnung, wie das in JS zu lösen ist (bin noch Anfänger.) Also das heller bzw dunkler machen mein ich
 

Neue Beiträge

Zurück