[UWP]用Win2D實現(xiàn)鏤空文字

1. 前言

之前用PointLight做了一個番茄鐘，效果還不錯，具體可見這篇文章：

成都創(chuàng)新互聯(lián)專注為客戶提供全方位的互聯(lián)網(wǎng)綜合服務(wù)，包含不限于成都網(wǎng)站設(shè)計、網(wǎng)站制作、蚌山網(wǎng)絡(luò)推廣、微信小程序開發(fā)、蚌山網(wǎng)絡(luò)營銷、蚌山企業(yè)策劃、蚌山品牌公關(guān)、搜索引擎seo、人物專訪、企業(yè)宣傳片、企業(yè)代運營等，從售前售中售后，我們都將竭誠為您服務(wù)，您的肯定，是我們最大的嘉獎；成都創(chuàng)新互聯(lián)為所有大學(xué)生創(chuàng)業(yè)者提供蚌山建站搭建服務(wù)，24小時服務(wù)熱線：13518219792，官方網(wǎng)址：www.muchs.cn

[UWP]使用PointLight并實現(xiàn)動畫效果

后來試玩了Win2D，這次就用Win2D實現(xiàn)文字的鏤空效果，配合PointLight做一個內(nèi)斂不張揚的番茄鐘。

實現(xiàn)鏤空文字的核心思想是使用CanvasGeometry.CreateText從TextLayout獲取一個Geometry，然后使用DrawGeometry將它畫到DrawingSurface。這篇文章介紹了具體的實現(xiàn)步驟。

2. 參考例子

Win2D Gallery提供了大量Win2D的Sample，這次就參考了其中的文字鏤空效果例子，地址和運行效果如下：

https://github.com/microsoft/Win2D-Samples/blob/master/ExampleGallery/TextOutlines.xaml.cs

3. 實現(xiàn)步驟

Sample的代碼量雖多，其實核心并不復(fù)雜，下面講講需要用到的API：

3.1 CanvasDevice.GetSharedDevice

因為要用到Win2D，所以首先要引用Win2D.uwp nuget包。因為我的目標(biāo)不是輸出到CanvasControl上，而是想要輸出到一個SpriteVisual上，所以使用CanvasDevice：

var canvasDevice = CanvasDevice.GetSharedDevice();

3.2 CanvasComposition.CreateCompositionGraphicsDevice

然后創(chuàng)建一個Compositor，并將這個Compositor和CanvasDevice關(guān)聯(lián)起來，這里需要使用 CanvasComposition 創(chuàng)建 GraphicsDevice：

var compositor = ElementCompositionPreview.GetElementVisual(this).Compositor;
var graphicsDevice = CanvasComposition.CreateCompositionGraphicsDevice(compositor, canvasDevice);

3.3 CompositionGraphicsDevice.CreateDrawingSurface

然后使用CompositionGraphicsDevice.CreateDrawingSurface創(chuàng)建一個CompositionDrawingSurface對象，它是用來繪畫內(nèi)容的表面：

var drawingSurface = graphicsDevice.CreateDrawingSurface(e.NewSize, DirectXPixelFormat.B8G8R8A8UIntNormalized, DirectXAlphaMode.Premultiplied);

3.4 Compositor.CreateSurfaceBrush

使用Compositor.CreateSurfaceBrush創(chuàng)建一個CompositionSurfaceBrush，它的作用是使用像素繪制SpriteVisual，簡單來說它就是一張位圖，然后輸出到SpriteVisual上：

var maskSurfaceBrush = compositor.CreateSurfaceBrush(drawingSurface);
spriteTextVisual.Brush = maskSurfaceBrush;

3.5 CanvasComposition.CreateDrawingSession

有了CompositionDrawingSurface就可以為所欲為了，將這個DrawingSurface作為參數(shù)，調(diào)用CanvasComposition.CreateDrawingSession創(chuàng)建DrawingSession，DrawingSession提供了多個函數(shù)，可以自由地在DrawingSurface上畫文字、形狀、圖片甚至SVG。

using (var session = CanvasComposition.CreateDrawingSession(drawingSurface))
{

}

3.6 CanvasTextFormat和CanvasTextLayout

要再DrawingSurface上寫字，需要CanvasTextLayout，而CanvasTextLayout中的文字大小、格式等則由CanvasTextFormat定義：

using (var textFormat = new CanvasTextFormat()
{
    FontSize = (float)FontSize,
    Direction = CanvasTextDirection.LeftToRightThenTopToBottom,
    VerticalAlignment = CanvasVerticalAlignment.Center,
    HorizontalAlignment = CanvasHorizontalAlignment.Center,

})
{
    using (var textLayout = new CanvasTextLayout(session, Text, textFormat, width, height))
    {
        Color fontColor = FontColor;
        session.DrawTextLayout(textLayout, 0, 0, fontColor);
    }
}

3.7 CanvasGeometry.CreateText

因為我的目標(biāo)是鏤空的文字，所以不能直接使用DrawTextLayout。這里需要使用CanvasGeometry.CreateText從TextLayout獲取一個Geometry，然后使用DrawGeometry將它畫到DrawingSurface。CanvasStrokeStyle是可選的，它控制邊框的虛線。

using (var textGeometry = CanvasGeometry.CreateText(textLayout))
{
    var dashedStroke = new CanvasStrokeStyle()
    {
        DashStyle = DashStyle
    };
    session.DrawGeometry(textGeometry, OutlineColor, (float)StrokeWidth, dashedStroke);
}

4. 封裝為控件

將上面的代碼總結(jié)一下，封裝為一個OutlineTextControl 控件，它提供了Text、OutlineColor、FontColor等屬性，在控件SizeChanged時，或者各個屬性改變時調(diào)用DrawText重新在CompositionDrawingSurface上繪制文字。代碼大致如下：

public class OutlineTextControl : Control
{
    private CompositionDrawingSurface _drawingSurface;

    public OutlineTextControl()
    {
        var compositor = ElementCompositionPreview.GetElementVisual(this).Compositor;
        var graphicsDevice = CanvasComposition.CreateCompositionGraphicsDevice(compositor, CanvasDevice.GetSharedDevice());
        var spriteTextVisual = compositor.CreateSpriteVisual();

        ElementCompositionPreview.SetElementChildVisual(this, spriteTextVisual);
        SizeChanged += (s, e) =>
        {
            _drawingSurface = graphicsDevice.CreateDrawingSurface(e.NewSize, DirectXPixelFormat.B8G8R8A8UIntNormalized, DirectXAlphaMode.Premultiplied);
            DrawText();
            var maskSurfaceBrush = compositor.CreateSurfaceBrush(_drawingSurface);
            spriteTextVisual.Brush = maskSurfaceBrush;
            spriteTextVisual.Size = e.NewSize.ToVector2();
        };
        RegisterPropertyChangedCallback(FontSizeProperty, new DependencyPropertyChangedCallback((s, e) =>
        {
            DrawText();
        }));
    }

    private void DrawText()
    {
        if (ActualHeight == 0 || ActualWidth == 0 || string.IsNullOrWhiteSpace(Text) || _drawingSurface == null)
            return;

        var width = (float)ActualWidth;
        var height = (float)ActualHeight;
        using (var session = CanvasComposition.CreateDrawingSession(_drawingSurface))
        {
            session.Clear(Colors.Transparent);
            using (var textFormat = new CanvasTextFormat()
            {
                FontSize = (float)FontSize,
                Direction = CanvasTextDirection.LeftToRightThenTopToBottom,
                VerticalAlignment = CanvasVerticalAlignment.Center,
                HorizontalAlignment = CanvasHorizontalAlignment.Center,

            })
            {
                using (var textLayout = new CanvasTextLayout(session, Text, textFormat, width, height))
                {
                    if (ShowNonOutlineText)
                    {
                        session.DrawTextLayout(textLayout, 0, 0, FontColor);
                    }

                    using (var textGeometry = CanvasGeometry.CreateText(textLayout))
                    {
                        var dashedStroke = new CanvasStrokeStyle()
                        {
                            DashStyle = DashStyle
                        };
                        session.DrawGeometry(textGeometry, OutlineColor, (float)StrokeWidth, dashedStroke);
                    }
                }
            }
        }
    }

//SOME CODE AND PROPERTIES

}

5. 結(jié)語

文章開頭的那個番茄鐘源碼可以在這里查看：

OnePomodoro_OutlineTextView.xaml at master

也可以安裝我的番茄鐘應(yīng)用試玩一下，安裝地址：

一個番茄鐘

6. 參考

CanvasComposition Class

CanvasDrawingSession Class

CanvasGeometry Class

CompositionGraphicsDevice Class (Windows.UI.Composition) - Windows UWP applications _ Microsoft Docs

CompositionDrawingSurface Class (Windows.UI.Composition) - Windows UWP applications _ Microsoft Docs

CompositionGraphicsDevice Class (Windows.UI.Composition) - Windows UWP applications _ Microsoft Docs

CompositionSurfaceBrush Class (Windows.UI.Composition) - Windows UWP applications _ Microsoft Docs

網(wǎng)頁標(biāo)題：[UWP]用Win2D實現(xiàn)鏤空文字
網(wǎng)頁網(wǎng)址：http://www.muchs.cn/article34/gdgcpe.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供面包屑導(dǎo)航、、域名注冊、App設(shè)計、微信小程序、定制開發(fā)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)