Zielony Smok - logo witryny

Składanie kolorów w przeglądarkach

Jak już wiemy kolor RGBA może być opisany przez cztery liczby, które oznaczają odpowiednio:

  • R – kolor czerwony, 0-255
  • G – kolor zielony, 0-255
  • B – kolor niebieski, 0-255
  • A – przezroczystość, 0-255, oznaczaną jako α = 0.0 – 1.0, gdzie 0.0 oznacza zupełną przezroczystość, 1.0 zupełną nieprzezroczystość, a liczby pośrednie – kolory z pewną przezroczystością, gdzie α= A/255. Jeżeli A =200, to α = 200/255≈0.784

Mamy 2 zbiory.:

  • D(destination), rgba(255,0, 0,0.5)
  • S (source), rgba(0,0,255,0.6)

Składanie kolorów w przeglądarkach

Jeżeli przezroczystość S wynosi Składanie kolorów w przeglądarkach to tło ma przezroczystość Składanie kolorów w przeglądarkach. Przenikająca część tła to Składanie kolorów w przeglądarkach, a blokowana część tła to Składanie kolorów w przeglądarkach.

Jeżeli przygotujemy tabelkę dla wszystkich możliwości to otrzymamy:

  S Składanie kolorów w przeglądarkach D
tło Składanie kolorów w przeglądarkach Składanie kolorów w przeglądarkach Składanie kolorów w przeglądarkach
tło blokowane Składanie kolorów w przeglądarkach Składanie kolorów w przeglądarkach Składanie kolorów w przeglądarkach
tło przechodzące Składanie kolorów w przeglądarkach Składanie kolorów w przeglądarkach Składanie kolorów w przeglądarkach

Rozważamy tutaj cztery możliwości w sensie teorii zbiorów:

opis Składanie kolorów w przeglądarkach przezroczystość Bierzemy pod uwagę Oznaczenie
obszar poza S i obszar poza D, czyli tło T , nie zajęte ani przez S ani przez D Składanie kolorów w przeglądarkach Składanie kolorów w przeglądarkach 0(Tło) 0
obszar S i obszar poza D, czyli obszar S nie nakładający się z D Składanie kolorów w przeglądarkach Składanie kolorów w przeglądarkach 0, S S
obszar poza S i obszar D, czyli obszar D nie nakładający się z S Składanie kolorów w przeglądarkach Składanie kolorów w przeglądarkach 0, D D
obszar S i obszar D, czyli obszar nakładania się S i D Składanie kolorów w przeglądarkach Składanie kolorów w przeglądarkach 0, S, D SD

Reguły Portera – Duffa

Jeżeli przemnożymy liczby elementów w kolumnie 'Bierzemy pod uwagę’ to otrzymamy: 1 x 2 x 2 x 3 = 12 możliwości, które ujmujemy w tabelce:

Reguła Portera-Duffa FS FD
clear (w JavaScript nie występuje) 0 0
copy 0 1
destination-atop Składanie kolorów w przeglądarkach Składanie kolorów w przeglądarkach
destination-in 0 Składanie kolorów w przeglądarkach
destination-out 0 Składanie kolorów w przeglądarkach
destination-over Składanie kolorów w przeglądarkach 1
lighter 1 0
source-atop Składanie kolorów w przeglądarkach Składanie kolorów w przeglądarkach
source-in Składanie kolorów w przeglądarkach 0
source-out Składanie kolorów w przeglądarkach 0
source-over 1 Składanie kolorów w przeglądarkach
xor Składanie kolorów w przeglądarkach Składanie kolorów w przeglądarkach

F- oznacza frakcję, w jakim kolor S lub D występuje w miejscu złożenia kolorów  

Przezroczystość wynikowa Składanie kolorów w przeglądarkachbędzie wynosiła:

Składanie kolorów w przeglądarkach

Kolor wynikowy Składanie kolorów w przeglądarkach będzie wynosił:

Składanie kolorów w przeglądarkach

gdzie Składanie kolorów w przeglądarkach jest składnikiem koloru przemnożonym wstępnie przez Składanie kolorów w przeglądarkach (jeżeli np. kolor czerwony = 255, a przezroczystość koloru wynosi to za Składanie kolorów w przeglądarkach podstawiamy 255*0.5 i podobnie dla Składanie kolorów w przeglądarkach, gdzie podajemy kolor przemnożony wstępnie przez Składanie kolorów w przeglądarkach

Obliczenia

  • D(destination), rgba(255,0, 0,0.5)
  • S (source), rgba(0,0,255,0.6)

zastosowana była zasada source-over, a zatem

Składanie kolorów w przeglądarkach

Składanie kolorów w przeglądarkach

Z tabeli:

Składanie kolorów w przeglądarkach,

Składanie kolorów w przeglądarkach

Składanie kolorów w przeglądarkach

Składanie kolorów w przeglądarkach

Składanie kolorów w przeglądarkach

Składanie kolorów w przeglądarkach

Kolor wynikowy to rgba (51, 0, 153, 0.8).

Składanie kolorów w przeglądarkach

Do obliczenia koloru można użyć funkcji:

Listing

	var kolor=function(rgba1, rgba2, rule){
	var adst= rgba1.split(",");
	var asrc=rgba2.split(",");
	var src=parseFloat(asrc[3]);
	var dst=parseFloat(adst[3]);
	var fs=0;
	var fd=0;
	switch(rule){
	case "copy":
	      fs=0;
	      fd=1.00;
	      break;
	case "destination-atop":
	      fs=1.0-dst;
	      fd=src;
	      break;
	case "destination-in":
	      fs=0;
	      fd=src;
	      break;
	case "destination-out":
	      fs=0;
	      fd=1.0-src;
	      break;
	case "destination-over":
	      fs=1.0-dst;
	      fd=1.0;
	      break;
	case "lighter":
	      fs=1.00;
	      fd=0;
	      break;
	case "source-atop":
	      fs=dst;
	      fd=1.0-src;
	      break;
	case "source-in":
	      fs=dst;
	      fd=0;
	      break;
	case "source-out":
	      fs=1.0-dst;
	      fd=0;
	      break;
	case "source-over":
	      fs=1.0;
	      fd=1.0-src;
	      break;
	case "xor":
	      fs=1.0-dst;
	      fd=1.0-src;
	      break;
	}
	var a=fs*src+fd*dst;
	var r=fs*parseInt(asrc[0].substring(5))*src + fd*parseInt(adst[0].substring(5))*dst;
	var g=fs*parseInt(asrc[1])*src + fd*parseInt(adst[1])*dst;
	var b=fs*parseInt(asrc[2])*src + fd*parseInt(adst[2])*dst;
	return "rgba("+Math.round(r)+","+Math.round(g)+","+Math.round(b)+","+a+")";
	};
	

Listing

	...
	var col1="rgba(255,0,0,0.5)";//destination
	var col2="rgba(0,0,255,0.6)";     //source
	ctx.fillStyle=kolor(col1, col2, "source-over");
	ctx.fillRect(270,75, 50,50);
	ctx.fillText(ctx.fillStyle, 200,170);

Składanie kolorów w przeglądarkach

Reguły

copy

Składanie kolorów w przeglądarkach

Składanie kolorów w przeglądarkach

Składanie kolorów w przeglądarkach

Obszar 0 S D SD
Wyświetlany 0 0 D D

Składanie kolorów w przeglądarkach

Składanie kolorów w przeglądarkach

destination-atop

Składanie kolorów w przeglądarkach

Składanie kolorów w przeglądarkach

Składanie kolorów w przeglądarkach

Obszar 0 S D SD
Wyświetlany 0 S 0 D

Składanie kolorów w przeglądarkach

Składanie kolorów w przeglądarkach

destination-in

Składanie kolorów w przeglądarkach

Składanie kolorów w przeglądarkach

Składanie kolorów w przeglądarkach

Obszar 0 S D SD
Wyświetlany 0 0 0 D

Składanie kolorów w przeglądarkach

Składanie kolorów w przeglądarkach

destination-out

Składanie kolorów w przeglądarkach

Składanie kolorów w przeglądarkach

Składanie kolorów w przeglądarkach

Obszar 0 S D SD
Wyświetlany 0 0 D 0

Składanie kolorów w przeglądarkach

Składanie kolorów w przeglądarkach

destination-over

Składanie kolorów w przeglądarkach

Składanie kolorów w przeglądarkach

Składanie kolorów w przeglądarkach

Obszar 0 S D SD
Wyświetlany 0 S D D

Składanie kolorów w przeglądarkach

Składanie kolorów w przeglądarkach

lighter

Składanie kolorów w przeglądarkach

Składanie kolorów w przeglądarkach

Składanie kolorów w przeglądarkach

Obszar 0 S D SD
Wyświetlany 0 S 0 S

Składanie kolorów w przeglądarkach

Składanie kolorów w przeglądarkach

source-atop

Składanie kolorów w przeglądarkach

Składanie kolorów w przeglądarkach

Składanie kolorów w przeglądarkach

Obszar 0 S D SD
Wyświetlany 0 0 D S

Składanie kolorów w przeglądarkach

Składanie kolorów w przeglądarkach

source-in

Składanie kolorów w przeglądarkach

Składanie kolorów w przeglądarkach

Składanie kolorów w przeglądarkach

Obszar 0 S D SD
Wyświetlany 0 0 0 S

Składanie kolorów w przeglądarkach

Składanie kolorów w przeglądarkach

source-out

Składanie kolorów w przeglądarkach

Składanie kolorów w przeglądarkach

Składanie kolorów w przeglądarkach

Obszar 0 S D SD
Wyświetlany 0 S 0 0

Składanie kolorów w przeglądarkach

Składanie kolorów w przeglądarkach

source-over

Składanie kolorów w przeglądarkach

Składanie kolorów w przeglądarkach

Składanie kolorów w przeglądarkach

Obszar 0 S D SD
Wyświetlany 0 S D S

Składanie kolorów w przeglądarkach

Składanie kolorów w przeglądarkach

xor

Składanie kolorów w przeglądarkach

Składanie kolorów w przeglądarkach

Składanie kolorów w przeglądarkach

Obszar 0 S D SD
Wyświetlany 0 S D 0

Składanie kolorów w przeglądarkach

Składanie kolorów w przeglądarkach