기고글 토론 "CCanvas 클래스 공부하기. 투명 개체를 그리는 방법" - 페이지 6

 
Nikolai Semko:

그건 너무 쉬워요, 피터.

다음은 질문의 본질을 마스터하고 통합하기 위한 과제입니다:

- 각각 고유한 투명도 A1과 A2를 가진 두 가지 색상 ARGB(a1,r1,g1,b1)와 ARGB(a2,r2,g2,b2)를 하나의 레이어 내에서 혼합하는 방법은 무엇인가요?

이 블렌딩이 없으면 앤티 앨리어싱된 오브젝트를 서로 위에 제대로 오버레이할 수 없습니다.

간단히 설명: 초기 레이어 색상에는 문서에 설명된 방법을 사용하여 첫 번째 ARGB(a1,r1,g1,b1 )를 오버레이합니다. 그런 다음 첫 번째 색상 위에 두 번째 색상을 적용하여 동일한 공식에 따라 ARGB 계산을 수행합니다. 이번에는 맨 아래 색상이 첫 번째 색상이되어 원래 레이어 색상 위에 놓습니다.

제가 틀렸을 수도 있지만 왜 작동하지 않을까요?

아직 실험해 보지 않았지만 두 개의 상단 레이어의 최종 투명도가 잘못 계산되어 첫 번째 옵션이 작동하지 않을 수 있습니다. 이 경우 중간 레이어를 상단 레이어와 혼합하고 공통 색상을 얻은 후 원래 레이어에 오버레이해야합니다.

 
Реter Konow:

한눈에 보기: 초기 레이어 색상에는 문서에 설명된 방법을 사용하여 첫 번째 ARGB(a1,r1,g1,b1 )를 오버레이합니다. 그런 다음 첫 번째 색상 위에 두 번째 색상을 적용하여 동일한 공식에 따라 ARGB 계산을 수행합니다. 이번에는 맨 아래 색이 첫 번째 색이 되어 초기 레이어 색상 위에 적용됩니다.

내가 틀렸을 수도 있지만, 니콜라이, 왜 작동하지 않아야합니까?

ZY. 아직 실험해 보지 않았지만 두 개의 상단 레이어의 최종 투명도가 잘못 계산되어 첫 번째 옵션이 작동하지 않을 수 있습니다. 이 경우 중간 레이어를 상단 레이어와 혼합하고 공통 색상을 얻은 후 원래 레이어에 오버레이해야합니다.

이것은 실제로 쉬운 일이 아닙니다.
그러나 스스로 해결할 수있는 사람은 누구나 당연히 색상 전문가로 간주 될 수 있습니다.
이 기사는 이 공식이 없기 때문에 학문과는 거리가 멀다.
 
Nikolai Semko:
사실 쉽지 않은 도전입니다.
하지만 스스로 해결할 수 있는 사람은 컬러 전문가라고 할 수 있습니다.

어떻게요? 직접 실험해 보셨나요? 아마도 상단 색상을 필터로 사용하고 상단 레이어의 해당 구성 요소 수준과 투명도에 비례하여 하단 레이어의 각 구성 요소 (RGB)를 계산합니다 (하단에서 상단으로 통과하는 양이 결정됨). 그런 다음 불투명도에 따라 상단 구성 요소의 수준을 다시 계산합니다 (상단의 남은 양이 결정됨). 마지막에 하단 및 상단 레이어의 각 구성 요소의 평균을 계산합니다 (원래 하단 및 상단이 아니라 작성된대로 다시 계산 된 것). 나는 그것을 시도하지 않았습니다.

아니면 투명도에 비례하여 구성 요소를 더할 수도 있습니다.

실험해 봐야겠네요... 흥미로운 작업입니다.

 
Dmitry Fedoseev:

어떻게요? 직접 실험해 보셨나요?

저는 4년 전에 이 문제를 해결했지만 많은 브레인스토밍을 통해 해결했습니다.
많은 두뇌 활동을 했는데도 아무도 해결책을 찾지 못하면 해결책을 게시하겠습니다.
 

Uffff... 모든 것이 훨씬 더 간단 해졌으며 스태킹하기 전에 필터링 할 필요가 없습니다. 구성 요소는 투명도와 불투명도에 비례하여 간단히 추가됩니다:

r=lr*(255-Alpha)/255+ur*Alpha/255;
g=lg*(255-Alpha)/255+ug*Alpha/255;
b=lb*(255-Alpha)/255+ub*Alpha/255;

알파: 255 - 최상위 레이어는 불투명, 0 - 완전히 투명합니다.

lr, lg, lb - 하단 레이어의 구성 요소입니다.

ur, ug, ub - 최상위 레이어의 구성 요소입니다.

여기 터미널에서 검정색 배경, 빨간색 사각형 불투명, 파란색 투명도 50 %, 노란색 투명도 50 %입니다.

다음은 포토샵에서도 마찬가지입니다:


 
Dmitry Fedoseev:

Uffff... 모든 것이 훨씬 더 간단 해졌으며 스태킹하기 전에 필터링 할 필요가 없습니다. 구성 요소는 투명도와 불투명도에 비례하여 간단히 추가됩니다:

알파: 255 - 최상위 레이어는 불투명, 0 - 완전히 투명합니다.

lr, lg, lb - 하단 레이어의 구성 요소입니다.

ur, ug, ub - 최상위 레이어의 구성 요소입니다.

컴퓨터에 도착하면 이 플루뮬러를 사용하여 두 개의 투명한 이미지를 혼합하고 어떤 일이 일어나는지 확인해 보겠습니다. :))
 
Nikolai Semko:
컴퓨터로 가서 이 플루뮬라를 사용하여 두 개의 투명한 사진을 혼합하고 어떤 일이 일어나는지 보겠습니다. :))

두 개의 투명한 사진을 어떻게 혼합하나요? 첫 번째는 배경에 겹쳐지고 두 번째는 결과에 겹쳐집니다.

일반적으로 어떻게 든 두 개의 투명도를 접은 다음 배경에 오버레이 할 수도 있지만 지금은 그것에 대해서는 아닙니다.

***

특히 흥미로운 것은 포토샵에서와 같이 레이어를 오버레이하는 모든 방법을 배우는 것입니다.

 
Dmitry Fedoseev:

Uffff... 모든 것이 훨씬 더 간단 해졌으며 스태킹하기 전에 필터링 할 필요가 없습니다. 구성 요소는 투명도와 불투명도에 비례하여 간단히 추가됩니다:

r=lr*(255-Alpha)/255+ur*Alpha/255;
g=lg*(255-Alpha)/255+ug*Alpha/255;
b=lb*(255-Alpha)/255+ub*Alpha/255;

알파: 255 - 최상위 레이어는 불투명, 0 - 완전히 투명합니다.

lr, lg, lb - 하단 레이어의 구성 요소입니다.

ur, ug, ub-상위 레이어의 구성 요소입니다.

여기 터미널에서는 검정색 배경, 빨간색 사각형 불투명, 그 위에 파란색 투명도 50%, 노란색 투명도 50%가 표시됩니다.

여기 포토샵에서도 마찬가지입니다:

그게 아니라 ...

요점은 알파1과 알파2가 있다는 것입니다.

따라서 새로 형성되는 혼합 색상뿐만 아니라 새로 형성되는 투명도도 계산해야 합니다.

기본적으로 투명 색상과 배경을 혼합하는 기사 작성자의 공식을 반복한 것입니다:

result=backgraund*(1-alpha)+foreground

그리고 당신은 그랬죠:

result=backgraund*(1-alpha)+foreground*alpha

귀하의 변형은 정확하지만 기사 작성자는 간단한 공식에서 실수를했으며 Peter가이 공식에 대해 그에게 감사하는 것이 재미 있습니다 :))))

결국 저자의 공식에서 uchar 오버플로가 쉽게 발생한다는 것을 육안으로 볼 수 있습니다. 4 년 동안 아무도이 심각한 오류를 보지 못했다는 것이 이상합니다.

 

다른 투명한 색상을 혼합하는 알고리즘이 적용되는 곳입니다:


 
두 개의 투명 레이어를 혼합한 다음 적용하는 이유는 무엇인가요? 한 레이어를 먼저 적용한 다음 다른 레이어를 적용합니다.