使用 Win2D 實現融合效果

来源:https://www.cnblogs.com/dino623/archive/2022/09/22/gooey_effect_with_win2d.html
-Advertisement-
Play Games

1. 融合效果 在 CSS 中有一種實現融合效果的技巧,使用模糊濾鏡(blur)疊加對比度濾鏡(contrast)使兩個接近的元素看上去“粘”在一起,如下圖所示: 博客園的 ChokCoco 就用這個技巧實現了很多不同的玩法並寫了很多文章,例如這篇: 你所不知道的 CSS 濾鏡技巧與細節 我一直對這 ...


1. 融合效果

在 CSS 中有一種實現融合效果的技巧,使用模糊濾鏡(blur)疊加對比度濾鏡(contrast)使兩個接近的元素看上去“粘”在一起,如下圖所示:

博客園的 ChokCoco 就用這個技巧實現了很多不同的玩法並寫了很多文章,例如這篇:

你所不知道的 CSS 濾鏡技巧與細節

我一直對這種效果很感興趣,總想自己親自玩一玩,當然,是在自己熟悉的 Xaml 平臺。這篇文章我將介紹如何使用 Win2D 在 UWP / WinUI 3 中實現融合效果。

2. 使用 Win2D 實現融合效果

Win2D 是一個很簡單使用的底層圖形 Windows Runtime API。它利用了 Direct2D 的強大功能,並與 UWP 和 WinUI 3 的 Xaml 無縫集成,可以使用強大的渲染得到漂亮界面。UWP 和 WinUI 3 版本的 Nuget 安裝腳本分別為:

Install-Package Win2D.uwp -Version 1.26.0

Install-Package Microsoft.Graphics.Win2D -Version 1.0.3.1

安裝後將 CanvasControl 添加到 XAML 樹中並訂閱 CanvasControl.CreateResources 事件,這個事件在 CanvasControl 首次初始化時觸發一次,可以在這個事件中創建畫圖需要的資源。現在我需要畫兩個圓,並對這兩個圓應用 Effect,所以我用以下代碼初始化了一些資源:

private ICanvasBrush _leftBrush;
private ICanvasBrush _rightBrush;
private ICanvasImage _image;
private GaussianBlurEffect _blurEffect;

private void OnCreateResource(CanvasControl sender, CanvasCreateResourcesEventArgs args)
{
    _leftBrush = new CanvasSolidColorBrush(sender, Colors.Black);
    _rightBrush = new CanvasSolidColorBrush(sender, Colors.Blue);
    _blurEffect = new GaussianBlurEffect
    {
        BlurAmount = 20f
    };

    _image = new ColorMatrixEffect
    {
        ColorMatrix = new Matrix5x4
        {
            M11 = 1,
            M12 = 0,
            M13 = 0,
            M14 = 0,
            M21 = 0,
            M22 = 1,
            M23 = 0,
            M24 = 0,
            M31 = 0,
            M32 = 0,
            M33 = 1,
            M34 = 0,
            M41 = 0,
            M42 = 0,
            M43 = 0,
            M44 = 18,
            M51 = 0,
            M52 = 0,
            M53 = 0,
            M54 = -7
        },
        Source = _blurEffect
    };
}

在上面的代碼中我創建了一藍一黑兩個 CanvasSolidColorBrush,以及一個 GaussianBlurEffect 和一個 ColorMatrixEffect,前者作為後者的 Source。和 CSS 不同的是,Win2D 不是使用 ContrastEffect,而是使用 ColorMatrixEffect 實現融合效果(至於 ColorMatrixEffect 中的參數設置將在下一節中講解)。下一步,訂閱 CanvasControl 的 SizeChanged 事件並實時獲得它的中間點:

private void OnCanvasSizeChanged(object sender, SizeChangedEventArgs e)
{
    _centerPoint = Canvas.ActualSize / 2;
}

最後,訂閱 CanvasControl.Draw 事件,當 CanvasControl 首次變為可見時,將觸發這個件一次,然後在需要重繪其內容時再次觸發。下麵的代碼在 Draw 觸發時用之前創建的資源畫出兩個圓。

private void OnDraw(CanvasControl sender, CanvasDrawEventArgs args)
{
    var source = new CanvasCommandList(sender);
    using (var drawingSession = source.CreateDrawingSession())
    {
        drawingSession.FillCircle(_centerPoint + new Vector2(-75, 0), 100, _leftBrush);
        drawingSession.FillCircle(_centerPoint + new Vector2(75, 0), 60, _rightBrush);
    }

    _blurEffect.Source = source;
    args.DrawingSession.DrawImage(_image);
}

上面的代碼首先創建一個 CanvasCommandList,然後用它再創建 DrawingSession 並用 DrawingSession 的 FillCircle 畫出兩個圓形。接下來把 CanvasCommandList 作為輸入源交給 GaussianBlurEffect 進行高斯模糊,而這個 GaussianBlurEffect 又是 ColorMatrixEffect 的輸入源,相當於原始的圖像應用過一次 GaussianBlurEffect 後,再應用用一次 ColorMatrixEffect。最後用 CanvasDrawEventArgs.DrawImage 將 ColorMatrixEffect 輸出到 UI。最終效果如下:

如果在 OnDraw 的最後調用 CanvasControl.Invalidate 函數可以觸發 CanvasControl 重繪,從而實現動畫效果。利用這個方法,再加上一些計算,就可以實現融合融合效果的動畫:

3. Win2D 中融合效果的原理

上面的代碼實現了融合效果,但當我想換個顏色玩些新花樣時卻發現了詭異的狀況,例如我將兩個 Brush 改為 IndianRed(205, 92, 92)PaleVioletRed(219, 112, 147),兩個圓形居然變成了空心圓形:

雖然還挺好看的,而且會有很多種玩法,但這不符合我現在的預期。接著我又發現只要使用的顏色的 RGB 三個通道中有一個的值不是 0 或255,融合效果出來的顏色就會被改變,即 Blue(0, 0, 255) 不會改變, IndianRed(205, 92, 92) 會變成 (255, 255, 255) 。也就是說,現在我沒辦法準確控制融合效果的顏色。為瞭解決這個問題,我們需要從融合效果的原理開始入手。

3.1 GaussianBlurEffect

融合效果使用了 GaussianBlurEffect 和 ColorMatrixEffect 兩個 Effect,先說說 GaussianBlurEffect 。GaussianBlurEffect 即高斯模糊效果,它用正態分佈計算圖像中每個像素的變換,每個像素的值都是周圍相鄰像素值的加權平均。原始像素的值有最大的高斯分佈值,所以有最大的權重,相鄰像素隨著距離原始像素越來越遠,其權重也越來越小。

上圖左邊是沒應用任何 Effect 的圖像,右邊是應用了高斯模糊效果的圖像。高斯模糊讓兩個圓形的邊緣變得模糊,多了一圈半透明的像素。仔細觀察兩個黑色圓形的結合處,由於高斯模糊每個像素的值都是周圍相鄰像素值的加權平均,所以結合處的像素同時受左右兩個圓形的影響, 產生了粘連的效果。

3.2 ColorMatrixEffect

融合效果的第二步,是提高圖像的對比度,將上面右圖中 Alpha 值超過某個閾值的半透明像素塗抹成完全不透明。這時候用到的是 ColorMatrixEffect。

ColorMatrixEffect 使用 Matrix5x4 修改圖像的顏色。這個 Matrix5x4 的預設值是:

var identity = new Matrix5x4
{ 
    M11 = 1, M12 = 0, M13 = 0, M14 = 0,
    M21 = 0, M22 = 1, M23 = 0, M24 = 0,
    M31 = 0, M32 = 0, M33 = 1, M34 = 0,
    M41 = 0, M42 = 0, M43 = 0, M44 = 1,
    M51 = 0, M52 = 0, M53 = 0, M54 = 0
};

通過修改這個矩陣,可以控制輸出圖像的每一個像素的 ARGB 四個通道,具體的公式為:

result.R = (src.R * matrix.M11) + (src.G * matrix.M21) + (src.B * matrix.M31) + (src.A * matrix.M41) + matrix.M51
result.G = (src.R * matrix.M12) + (src.G * matrix.M22) + (src.B * matrix.M32) + (src.A * matrix.M42) + matrix.M52
result.B = (src.R * matrix.M13) + (src.G * matrix.M23) + (src.B * matrix.M33) + (src.A * matrix.M43) + matrix.M53
result.A = (src.R * matrix.M14) + (src.G * matrix.M24) + (src.B * matrix.M34) + (src.A * matrix.M44) + matrix.M54

假設我需要將圖像中所有像素的 Alpha 指變為 0,根據上面的公式,只需要將 matrix.M44 設為 0 即可。

現在我們回過頭來看看前文中實現融合效果的 ColorMatrixEffect。矩陣的前三列都保持預設值不變,即 RGB 三個通道不作改變,M44 設置為 18,M54 設置為 -7,根據公式即每個像素作了以下變換:

result.A =  (src.A * 18) -7

把這個公式輸入計算器的繪圖中,得到以下圖形。

可以看到這個公式的輸出幾乎是一條垂直於 X 軸的直線,以這條直線為區分,X 值在這條線左邊的結果為 0,在這條線右邊的結果為 1。這是一個很明顯的二值化操作。當這個 ColorMatrixEffect 應用在之前高斯模糊產生的圖像上,由高斯模糊產生的 Alpha 通道大於 0 的像素要麼都變得清晰,要麼就消失不見(只剩下 Alpha 值為 0.39 到 0.45 之間的像素仍為半透明,用於消除形狀邊緣的鋸齒),從而使兩個圓型之前的銜接處變得清晰而平滑,這就實現了融合效果。

3.3 ClampOutput

但是這個 ColorMatrixEffect 並不是真正的二值化,而是將 Alpha 通道轉換成一個遠大於 1 或遠小於 0 的值。當 Alpha 遠大於 1 ,這個像素在 UI 上會變成透明或白色。究其原因,應該是因為 Win2D 圖像效果使用直接和預乘 alpha 的混合,所以 Win2D 在某個環節做了類似下麵這種處理:

result.R = source.R * source.A;
result.G = source.G * source.A;
result.B = source.B * source.A;
result.A = source.A;

結果在 Alpha 值遠大於 1 的情況下, RGB 三個值不是 0 就是 1。即 Blue(0, 0, 255) 應用了這個 ColorMatrixEffect 後還是 Blue(0, 0, 255),而 IndianRed(205, 92, 92) 會變成 (255, 255, 255)。為了應對這種情況, Win2D 在部分 Effect 中提供了 ClampOutput 屬性,當它設置為 True 時,Effect 的輸出都保持在 [0, 1] 範圍內。應用在上面的 ColorMatrixEffect 上可確保輸出的 Alpha 通道不會超出 [0, 1] 這個範圍,避免了修改透明度以外的任何副作用。

關於預乘的更多信息,可以看這篇文章:

Win2D: Premultiplied alpha

4. 最後

將 ColorMatrixEffect.ClampOutput 設置為 True 後,Win2D 就可以使用任何顏色實現融合效果,這樣玩法就更多了,例如下麵這種:

雖然我之前也用 Win2D 做過一些東西,但這確實觸及了我的知識盲區,尤其是 CanvasAnimatedControl 和 CanvasControl 的使用,所以我請教了 火火 不少關鍵代碼和概念,謝謝他的指導。

5. 源碼

https://github.com/DinoChan/uwp_design_and_animation_lab
https://github.com/DinoChan/winui3_design_and_animation_lab

6. 參考

你所不知道的 CSS 濾鏡技巧與細節

cnbluefire_GooeyButton

https://github.com/Microsoft/Win2D

顏色矩陣效果 - Win32 apps Microsoft Docs

ColorMatrixEffect Class

GaussianBlurEffect Class


作者:dino.c
出處:http://www.cnblogs.com/dino623/
說明:歡迎轉載並請標明來源和作者。如有錯漏請指出,謝謝。
您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 框架介紹 1.1.1 概述 Dubbo是阿裡巴巴公司開源的一個高性能優秀的服務框架,使得應用可通過高性能的 RPC 實現服務的輸出和輸入功能,可以和 Spring框架無縫集成。 Dubbo是一款高性能、輕量級的開源Java RPC框架,它提供了三大核心能力:面向介面的遠程方法調用,智能容錯和負載均衡 ...
  • 容器設計是項目編碼中非常常見的一個場景,本文從項目中習以為常的一些場景作為切入點,聊一聊容器設計的一些思考、聊一聊元素遍歷的思路、以及身為設計模式之一的迭代器模式。 ...
  • 我的博客 一直有個想法,想要弄個微信機器人,然而出師不利,剛開始就碰壁了 先上代碼,這個是用來接收消息的,是個測試腳本 #!/usr/bin/python # coding: utf-8 import itchat def write_infomation(text_value): print(te ...
  • WPS表格文件是金山開發的專門用於處理表格數據的Office工具,屬於WPS Office中WPS文字、WPS表格和WPS演示三大功能模塊之一。通常以.et和.ett作為文件尾碼。我們在通過後端來操作WPS表格文件時,可以通過以下方法來載入、編輯以及保存WPS表格文件,本文將對此做詳細介紹。 引入j ...
  • 1 #include <stdio.h> 2 #include <malloc.h> 3 #include <stdlib.h> 4 #define MaxSize 50 5 #define InitSize 100 6 typedef int ElemType; 7 typedef struct ...
  • 問題描述:新創建maven項目後,在父工程中dependencyManagement時,會報紅線錯誤,刷新後還是報紅,例如:${spring.version}爆紅: Maven使用dependencyManagement元素來進行依賴版本的管理。具體來說,maven沿著父子層向上尋找,直到找到dep ...
  • 在上一篇:UWP/WinUI3 PixelShaderEffect 實現ThresholdEffect 濾鏡。 - 吃飯/睡覺 - 博客園 (cnblogs.com) 已經價紹瞭如何編寫hsls,編譯,和使用 PixelShaderEffect 來實現自定義濾鏡效果了,那麼本編將介紹如何編寫一個 “ ...
  • 在上一個文章中,傳送門,給大家介紹了怎麼在配置文件中使用 Kestrel 部署 Https,正好今天有小伙伴穩問到:可以通過代碼的方式實現 Kestrel 的 Https 的部署嗎?答案是肯定的,我們這次一樣去不是多個功能變數名稱。 在使用代碼實現中,我是主要使用到 ListenOptions.UseHtt ...
一周排行
    -Advertisement-
    Play Games
  • 一:背景 1.講故事 在分析的眾多dump中,經常會遇到各種奇葩的問題,僅通過dump這種快照形式還是有很多問題搞不定,而通過 perfview 這種粒度又太粗,很難找到問題之所在,真的很頭疼,比如本篇的 短命線程 問題,參考圖如下: 我們在 t2 時刻抓取的dump對查看 短命線程 毫無幫助,我根 ...
  • 在日常後端Api開發中,我們跟前端的溝通中,通常需要協商好入參的數據類型,和參數是通過什麼方式存在於請求中的,是表單(form)、請求體(body)、地址欄參數(query)、還是說通過請求頭(header)。 當協商好後,我們的介面又需要怎麼去接收這些數據呢?很多小伙伴可能上手就是直接寫一個實體, ...
  • 許多情況下我們需要用到攝像頭獲取圖像,進而處理圖像,這篇博文介紹利用pyqt5、OpenCV實現用電腦上連接的攝像頭拍照並保存照片。為了使用和後續開發方便,這裡利用pyqt5設計了個相機界面,後面將介紹如何實現,要點包括界面設計、邏輯實現及完整代碼。 ...
  • 思路分析 註冊頁面需要對用戶提交的數據進行校驗,並且需要對用戶輸入錯誤的地方進行提示! 所有我們需要使用forms組件搭建註冊頁面! 平時我們書寫form是組件的時候是在views.py裡面書寫的, 但是為了接耦合,我們需要將forms組件都單獨寫在一個地方,需要用的時候導入就行! 例如,在項目文件 ...
  • 思路分析 登錄頁面,我們還是採用ajax的方式提交用戶數據 唯一需要學習的是如何製作圖片驗證碼! 具體的登錄頁面效果圖如下: 如何製作圖片驗證碼 推導步驟1:在img標簽的src屬性里放上驗證碼的請求路徑 補充1.img的src屬性: 1.圖片路徑 2.url 3.圖片的二進位數據 補充2:字體樣式 ...
  • 哈嘍,兄弟們! 最近有許多小伙伴都在吐槽打工好難。 每天都是執行許多重覆的任務 例如閱讀新聞、發郵件、查看天氣、打開書簽、清理文件夾等等, 使用自動化腳本,就無需手動一次又一次地完成這些任務, 非常方便啊有木有?! 而在某種程度上,Python 就是自動化的代名詞。 今天就來和大家一起學習一下, 用 ...
  • 作者:IT王小二 博客:https://itwxe.com 前面小二介紹過使用Typora+PicGo+LskyPro打造舒適寫作環境,那時候需要使用水印功能,但是小二在升級LskyPro2.x版本發現有很多不如人意的東西,遂棄用LskyPro使用MinIO結合代碼實現自己需要的圖床功能,也適合以後 ...
  • OpenAI Gym是一款用於研發和比較強化學習演算法的工具包,本文主要介紹Gym模擬環境的功能和工具包的使用方法,並詳細介紹其中的經典控制問題中的倒立擺(CartPole-v0/1)問題。最後針對倒立擺問題如何建立控制模型並採用爬山演算法優化進行了介紹,並給出了相應的完整python代碼示例和解釋。要... ...
  • python爬蟲瀏覽器偽裝 #導入urllib.request模塊 import urllib.request #設置請求頭 headers=("User-Agent","Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, l ...
  • 前端代碼搭建 主要利用的是bootstrap3中js插件里的模態框版塊 <li><a href="" data-toggle="modal" data-target=".bs-example-modal-lg">修改密碼</a></li> <div class="modal fade bs-exam ...