| Autor | Zpráva | ||
|---|---|---|---|
| návštěvník Profil * |
#1 · Zasláno: 14. 5. 2015, 14:12:25 · Upravil/a: návštěvník
Hledal jsem na netu jak to udělat pomocí Javascriptu když chci smíchat dvě barvy našel jsem:
http://stackoverflow.com/q/1892020/240324 ukázka: http://jsbin.com/afomim/1/edit?css,js Jde mi o to, že kreslím do canvasu a mám nastavenou barvu pozadí konkrétně: #d9c195. Pak mám nějaké barvičky které chci použít na kreslení do canvasu: '#00A0B0', '#6A4A3C', '#CC333F', '#EB6841', '#EDC951' a chtěl bych je smíchat. Pomocí tehle knihovny to jde. Jde mi o vytvoření blendingu jako když máte obrázek, který chcete potlačit na pozadí, tak ho smýcháte s barvou pozadí. U obrázku png v DOM je to jednoduché. Mám obrázek png kde mám masku, která překryje původní obrázek barvou pozadí dokumentu. Maska má překryv #cac9c9 ale je to ve Photoshpu tak tam je asi nějaký efekt v té masce, nevím přesně (nastavení blending "Pass Through" a poklepnutí na masku vidím "opacity 50%"). Takže nevím jaká je výsledná hodnota barvy v té mazce. Ale podstatné je že chci, aby to smíchání dvou barev nebylo v poměru 1:1, ale aby mnohem více převážila barva na pozadí. Takže jediné co zvládnu je toto: <html>
<body>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="http://cloud.github.com/downloads/harthur/color/color-0.4.1.min.js"
graph.createEdges({colors:['#00A0B0', '#6A4A3C', '#CC333F', '#EB6841', '#EDC951'],
fadeColor:'#d9c195',
weights:[5,3,2,2],
blendingFnc:
/* Using Github harthur/color library 0.4.1: */
function RGBMix(color1, color2) {
// create color object from string color
color1 = Color(color1);
color2 = Color(color2);
var r = (color1.red() + color2.red()) / 2;
var g = (color1.green() + color2.green()) / 2;
var b = (color1.blue() + color2.blue()) / 2;
return Color().rgb([r, g, b]).hexString();
}
} );Aplikováno takto: Graph.prototype.createEdges = function(o) {
t=this;
o.colors.forEach(function(e) {
t.colors.push(e);
t.blendColors.push(o.blendingFnc(e,o.fadeColor));
});
...
};oprava: ne do pole objektu o, ale do objektu t čili do objektu graph. Není to kompletní kód jen pro ilustraci problému |
||
| juriad Profil |
#2 · Zasláno: 14. 5. 2015, 14:29:45
Poměr míchání je natvrdo na řádcích 14 - 16.
function RGBMix(color1, color2, alpha) {
// create color object from string color
color1 = Color(color1);
color2 = Color(color2);
var r = color1.red() * alpha + color2.red() * (1-alpha);
var g = color1.green() * alpha + color2.green() * (1-alpha);
var b = color1.blue() * alpha + color2.blue() * (1-alpha);
return Color().rgb([r, g, b]).hexString();
}Je to ekvivalentní původnímu kódu s alpha=0.5.
|
||
| návštěvník Profil * |
#3 · Zasláno: 14. 5. 2015, 14:46:16
Díky moc, ani jsem nečekal tak rychlou odpověď. Vypadá to slibně!
|
||
|
Časová prodleva: 8 let
|
|||
0