SkiaSharp blend 모드SkiaSharp blend modes

샘플 다운로드 샘플 다운로드Download Sample Download the sample

이러한 문서에 집중 합니다 BlendMode 속성을 SKPaint 합니다.These articles focus on the BlendMode property of SKPaint. 합니다 BlendMode 형식의 속성은 SKBlendMode , 29 멤버로 구성 된 열거형입니다.The BlendMode property is of type SKBlendMode, an enumeration with 29 members.

BlendMode 속성 결정 하는 경우 그래픽 개체를 (라고도 합니다 원본) 기존 그래픽 개체 맨 위에 렌더링 됩니다 (호출 합니다 대상).The BlendMode property determines what happens when a graphical object (often called the source) is rendered on top of existing graphical objects (called the destination). 일반적으로 새 그래픽 개체 아래에 있는 개체를가 려 서 예정입니다.Normally, we expect the new graphical object to obscure the objects underneath it. 기본 blend 모드 이므로 이런 하지만 SKBlendMode.SrcOver, 즉, 원본 그려집니다 를 통해 대상입니다.But that happens only because the default blend mode is SKBlendMode.SrcOver, which means that the source is drawn over the destination. 다른 28 멤버 SKBlendMode 다른 작업이 발생 합니다.The other 28 members of SKBlendMode cause other effects. 그래픽 프로그래밍에서는 다양 한 방법으로 그래픽 개체를 결합 하는 기술을 이라고 _합치기_합니다.In graphics programming, the technique of combining graphical objects in various ways is known as compositing.

SKBlendModes 열거형The SKBlendModes enumeration

SkiaSharp blend 모드는 W3C에서 설명 하는 것을 정확 하 게 일치 합성 하 고 수준 1 혼합 사양입니다.The SkiaSharp blend modes correspond closely to those described in the W3C Compositing and Blending Level 1 specification. Skia SkBlendMode 참조 도 유용한 배경 정보를 제공 합니다.The Skia SkBlendMode Reference also provides helpful background information. 한 모드를 혼합 하려면 일반적인 소개는 혼합 모드 Wikipedia의 문서는 좋은 출발 합니다.For a general introduction to blend modes, the Blend modes article in Wikipedia is a good start. 해당 컨텍스트에서 blend 모드에 대 한 훨씬 추가적인 온라인 정보 이므로 Adobe Photoshop에서 혼합 모드가 지원 됩니다.Blend modes are supported in Adobe Photoshop, so there is much additional online information about blend modes in that context.

29 멤버는 SKBlendMode 열거형 세 가지 범주로 나눌 수 있습니다.The 29 members of the SKBlendMode enumeration can be divided into three categories:

Porter 임신Porter-Duff 분리 가능한Separable 분리 가능한 비Non-Separable
Clear Modulate Hue
Src Screen Saturation
Dst Overlay Color
SrcOver Darken Luminosity
DstOver Lighten
SrcIn ColorDodge
DstIn ColorBurn
SrcOut HardLight
DstOut SoftLight
SrcATop Difference
DstATop Exclusion
Xor Multiply
Plus

이러한 세 가지 범주의 이름이 나오는 토론에서 더 많은 의미 수행 합니다.The names of these three categories will take on more meaning in the discussions that follow. 멤버 여기 나열 된 순서와 동일의 정의 SKBlendMode 열거형입니다.The order that the members are listed here is the same as in the definition of the SKBlendMode enumeration. 첫 번째 열에서 13 열거형 멤버는 0 ~ 12 정수 값을 갖습니다.The 13 enumeration members in the first column have the integer values 0 to 12. 두 번째 열은 정수 13 ~ 24에 해당 하는 열거형 멤버 있고 세 번째 열에 있는 멤버 25 ~ 28의 값입니다.The second column are enumeration members that correspond to integers 13 to 24, and the members in the third column have values of 25 to 28.

이러한 blend 모드는 W3C 합성 및 혼합 수준 1 문서에서 거의 동일한 순서로 설명 되지만 몇 가지 차이점이 있습니다. W3C 문서에서이 Plus 모드를복사라고하며,이는더가벼운이라고Src 합니다.These blend modes are discussed in approximately the same order in the W3C Compositing and Blending Level 1 document, but there are a few differences: The Src mode is called Copy in the W3C document, and Plus is called Lighter. W3C 문서 정의 정규 에 포함 되지 않은 혼합 모드 SKBlendModes 것이 동일 하기 때문에 SrcOver입니다.The W3C document defines a Normal blend mode that isn't included in SKBlendModes because it would be the same as SrcOver. Modulate 혼합 모드 (첫 번째 열의 맨 위에 있음) W3C 문서와의 토론에 포함 되지 합니다 Multiply 모드 앞에 오는 Screen합니다.The Modulate blend mode (at the top of the first column) isn't included in the W3C document, and discussion of the Multiply mode precedes Screen.

때문에 Modulate blend 모드가 Skia에 고유한, 추가 Porter 임신 모드를와 분리 가능 모드를 설명 합니다.Because the Modulate blend mode is unique to Skia, it will be discussed as an additional Porter-Duff mode and as a separable mode.

투명도의 중요성The importance of transparency

합성 개념이와 함께에서 지금까지 개발한 합니다 _알파 채널_합니다.Historically, compositing was developed in conjunction with the concept of the alpha channel. SKCanvas 개체 및 전체 색 비트맵과 같은 표시 표면에서 각 픽셀은 4 바이트로 구성 됩니다. 빨강, 녹색 및 파랑 구성 요소 각각에 대해 1 바이트, 투명성에 대 한 추가 바이트In a display surface such as the SKCanvas object and a full-color bitmap, each pixel consists of 4 bytes: 1 byte each for the red, green, and blue components, and an additional byte for transparency. 이 알파 구성 요소에는 완전 한 투명성에 대 한 0에서 0xFF 투명도 값 간의 차이 사용 하 여 전체 불투명도 합니다.This alpha component is 0 for full transparency and 0xFF for full opacity, with different levels of transparency between those values.

다양 한 혼합 모드 투명도에 의존합니다.Many of the blend modes rely on transparency. 일반적으로 경우는 SKCanvas 에 처음으로 가져올를 PaintSurface 처리기 때나는 SKCanvas 만들어집니다 비트맵에 그릴 첫 번째 단계는이 호출:Usually, when an SKCanvas is first obtained in a PaintSurface handler, or when an SKCanvas is created to draw on a bitmap, the first step is this call:

canvas.Clear();

이 메서드 투명 검정 픽셀에 해당 하는 캔버스의 모든 픽셀 바꿉니다 new SKColor(0, 0, 0, 0) 또는 0x00000000 정수입니다.This method replaces all the pixels of the canvas with transparent black pixels, equivalent to new SKColor(0, 0, 0, 0) or the integer 0x00000000. 모든 픽셀의 모든 바이트를 0으로 초기화 됩니다.All the bytes of all the pixels are initialized to zero.

그리기 화면을 SKCanvas 에서 가져온를 PaintSurface 처리기 흰색 배경이 있는 것으로 나타날 수 있지만 때문에는 SKCanvasView 자체에 투명 한 배경이 있으며 페이지 흰색 배경.The drawing surface of an SKCanvas that is obtained in a PaintSurface handler might appear to have a white background, but that's only because the SKCanvasView itself has a transparent background, and the page has a white background. Xamarin.Forms를 설정 하 여 자신에 게이 팩트를 시연할 수 있습니다 BackgroundColor 속성의 SKCanvasView Xamarin.Forms 색:You can demonstrate this fact to yourself by setting the Xamarin.Forms BackgroundColor property of SKCanvasView to a Xamarin.Forms color:

canvasView.BackgroundColor = Color.Red;

또는에서 파생 된 클래스 ContentPage, 페이지 배경색을 설정할 수 있습니다.Or, in a class that derives from ContentPage, you can set the page background color:

BackgroundColor = Color.Red;

SkiaSharp 그래픽 뒤 빨간색 배경이이 자체는 SkiaSharp 캔버스 이므로 투명 하 게 볼 수 있습니다.You'll see this red background behind your SkiaSharp graphics because the SkiaSharp canvas itself is transparent.

이 문서 SkiaSharp 투명도 투명도 사용 하 여 복합 이미지에 여러 그래픽을 정렬 하려면 몇 가지 기본적인 방법에 설명 했습니다.The article SkiaSharp Transparency showed some basic techniques in using transparency to arrange multiple graphics in a composite image. 그 외에도 혼합 모드 이동 그대로 투명도 blend 모드 하는 데 중요 합니다.The blend modes go beyond that, but transparency remains crucial to the blend modes.

SkiaSharp Porter 임신 blend 모드SkiaSharp Porter-Duff blend modes

원본 및 대상 이미지를 기반으로 하는 백그라운드에서 작성 하는 Porter 임신 blend 모드를 사용 합니다.Use the Porter-Duff blend modes to compose scenes based on source and destination images.

SkiaSharp 분리 가능한 blend 모드SkiaSharp separable blend modes

빨강, 녹색 및 파랑 색을 변경 하려면 분리 가능한 혼합 모드를 사용 합니다.Use the separable blend modes to alter red, green, and blue colors.

SkiaSharp 분리 되지 않은 혼합 모드SkiaSharp non-separable blend modes

색상, 채도 또는 명도 변경 하려면 분리 되지 않은 혼합 모드를 사용 합니다.Use the non-separable blend modes to alter hue, saturation, or luminosity.