Autor Zpráva
návštěvník
Profil *
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));
        }); 
...
};
Což do pole o.colors vkládá barvy které jsem zadal ve vstupním objektu a do pole t.blendColors vkládá barvy již nablendované. Ale je to v poměru 1:1. Máte nějaký nápad jak by se to dalo vylepšít, aby výrazně převažovala barva pozadí (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
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();  
}
Po této úpravě si můžeš nastavit jakýkoli poměr mezi 0 (popředí je neviditelné) až po 1 (dokonale překrývá pozadí).
Je to ekvivalentní původnímu kódu s alpha=0.5.
návštěvník
Profil *
Díky moc, ani jsem nečekal tak rychlou odpověď. Vypadá to slibně!

Vaše odpověď


Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm: