我們將繪制一個圓形的音樂播放控件，它包含一個圓形的進(jìn)度條、專輯頁面和播放按鈕。

關(guān)于圖形繪制

使用MAUI的繪制功能，需要Microsoft.Maui.Graphics庫。

Microsoft.Maui.Graphics 是一個實驗性的跨平臺圖形庫，它可以在 .NET MAUI 中使用。它提供了一組基本的圖形元素，如矩形、圓形、線條、路徑、文本和圖像。它還提供了一組基本的圖形操作，如填充、描邊、裁剪、變換和漸變。

Microsoft.Maui.Graphics在不同的目標(biāo)平臺上使用一致的API訪問本機圖形功能，而底層實現(xiàn)使用了不同的圖形渲染引擎。其中通用性較好的是SkiaSharp圖形庫，支持幾乎所有的操作系統(tǒng)，在不同平臺上的表現(xiàn)也近乎一致。

創(chuàng)建自定義控件

在項目中添加SkiaSharp繪制功能的引用Microsoft.Maui.Graphics.Skia以及SkiaSharp.Views.Maui.Controls。

<ItemGroup><PackageReference Include="Microsoft.Maui.Graphics.Skia" Version="7.0.59" /><PackageReference Include="SkiaSharp.Views.Maui.Controls" Version="2.88.3" />
</ItemGroup>

創(chuàng)建CircleSlider.xaml文件，添加如下內(nèi)容：

<?xml version="1.0" encoding="UTF-8"?>
<ContentView xmlns="http://schemas.microsoft.com/dotnet/2021/maui" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"xmlns:forms="clr-namespace:SkiaSharp.Views.Maui.Controls;assembly=SkiaSharp.Views.Maui.Controls"x:Class="MatoMusic.Controls.CircleSlider"><ContentView.Content><forms:SKCanvasView x:Name="canvasView"PaintSurface="OnCanvasViewPaintSurface" /></ContentView.Content>
</ContentView>

SKCanvasView是SkiaSharp.Views.Maui.Controls封裝的View控件。

打開CircleSlider.xaml.cs文件

控件將包含以下可綁定屬性：

• Maximum：最大值
• Minimum：最小值
• Value：當(dāng)前值
• TintColor：進(jìn)度條顏色
• ContainerColor：進(jìn)度條背景顏色
• BorderWidth：進(jìn)度條寬度

定義兩個SKPaint畫筆屬性，OutlinePaint用于繪制進(jìn)度條背景，ArcPaint用于繪制進(jìn)度條本身。他們的描邊寬度StrokeWidth則是圓形進(jìn)度條的寬度。
兩個畫筆的初始值樣式為SKPaintStyle.Stroke，描邊寬度為BorderWidth的值。

private SKPaint _outlinePaint;public SKPaint OutlinePaint
{get{if (_outlinePaint == null){SKPaint outlinePaint = new SKPaint{Style = SKPaintStyle.Stroke,StrokeWidth = BorderWidth,};_outlinePaint = outlinePaint;}return_outlinePaint;}set { _outlinePaint = value; }
}private SKPaint _arcPaint;public SKPaint ArcPaint
{get{if (_arcPaint == null){SKPaint arcPaint = new SKPaint{Style = SKPaintStyle.Stroke,StrokeWidth = BorderWidth,};_arcPaint = arcPaint;}return _arcPaint;}set { _arcPaint = value; }
}

SetStrokeWidth用于設(shè)置描邊寬度，并產(chǎn)生一個動效，

在BorderWidth發(fā)生變更的時候，會出現(xiàn)一個動效。寬度會緩慢地變化至新的值。刷新率為10ms一次，每次變化的值為1。

private float _borderWidth;public float BorderWidth
{get { return _borderWidth; }set{var old_borderWidth = _borderWidth;var span = value - old_borderWidth;SetStrokeWidth(span, old_borderWidth);_borderWidth = value;this.ArcPaint.StrokeWidth = _borderWidth;this.OutlinePaint.StrokeWidth = _borderWidth;}
}private async void SetStrokeWidth(float span, float old_borderWidth)
{if (span > 0){for (int i = 0; i <= span; i++){await Task.Delay(10);this.ArcPaint.StrokeWidth = old_borderWidth + i;this.OutlinePaint.StrokeWidth = old_borderWidth + i;RefreshMainRectPadding();}}else{for (int i = 0; i >= span; i--){await Task.Delay(10);this.ArcPaint.StrokeWidth = old_borderWidth + i;this.OutlinePaint.StrokeWidth = old_borderWidth + i;RefreshMainRectPadding();}}}

于此同時，因為描邊寬度變化了，需要對Padding進(jìn)行補償。調(diào)用RefreshMainRectPadding方法計算一個新的Padding值，BoderWidth縮小時，Padding也隨之增大。

private void RefreshMainRectPadding()
{this._mainRectPadding =  this.BorderWidth / 2;
}

在視覺上，進(jìn)度條寬度從內(nèi)向外擴張變細(xì)。

若設(shè)為原寬度減去計算值，從視覺上是從外向內(nèi)收縮變細(xì)。

private void RefreshMainRectPadding()
{this._mainRectPadding =  15 -  this.BorderWidth / 2;
}

接下來寫訂閱了CanvaseView的PaintSurface事件的方法OnCanvasViewPaintSurface。在這個方法中，我們將編寫圓形進(jìn)度條的繪制邏輯。

PaintSurface事件在繪制圖形時觸發(fā)。程序運行時會實時觸發(fā)這個方法，它的參數(shù)SKPaintSurfaceEventArgs事件附帶的對象具有兩個屬性：

• Info類型SKImageInfo
• Surface類型SKSurface

SKImageInfo對象包含如寬度和高度等有關(guān)繪圖區(qū)域的信息，對象SKSurface為繪制本身，我們需要利用SKImageInfo寬度和高度等信息，結(jié)合業(yè)務(wù)數(shù)據(jù)，在SKSurface繪制出我們想要的圖形。

清空上一次繪制的圖形，調(diào)用SKSurface.Canvas獲取Canvas對象，調(diào)用Canvas.Clear方法清空上一次繪制的圖形。

canvas.Clear();

rect是一個SKRect對象，進(jìn)度條本身是圓形，我們需要一個正方形的區(qū)域來控制圓形區(qū)域。

sweepAngle是當(dāng)前進(jìn)度對應(yīng)的角度，首先計算出總進(jìn)度值，通過計算當(dāng)前進(jìn)度對應(yīng)總進(jìn)度的比值，換算成角度，將這一角度賦值給sweepAngle。

startAngle是進(jìn)度條的起始角度，我們將其設(shè)置為-90度，即從正上方開始繪制。

SKRect rect = new SKRect(_mainRectPadding, _mainRectPadding, info.Width - _mainRectPadding, info.Height - _mainRectPadding);
float startAngle = -90;
float sweepAngle = (float)((Value / SumValue) * 360);

調(diào)用Canvas.DrawOval，使用OutlinePaint畫筆繪制進(jìn)度條背景，它是一個圓形

canvas.DrawOval(rect, OutlinePaint);

創(chuàng)建繪制路徑path，調(diào)用AddArc方法，將rect對象和起始角度和終止角度傳入，即可繪制出弧形。

using (SKPath path = new SKPath())
{path.AddArc(rect, startAngle, sweepAngle);canvas.DrawPath(path, ArcPaint);
}

繪制部分的完整代碼如下：

private void OnCanvasViewPaintSurface(object sender, SKPaintSurfaceEventArgs args)
{var SumValue = Maximum - Minimum;SKImageInfo info = args.Info;SKSurface surface = args.Surface;SKCanvas canvas = surface.Canvas;canvas.Clear();SKRect rect = new SKRect(_mainRectPadding, _mainRectPadding, info.Width - _mainRectPadding, info.Height - _mainRectPadding);float startAngle = -90;float sweepAngle = (float)((Value / SumValue) * 360);canvas.DrawOval(rect, OutlinePaint);using (SKPath path = new SKPath()){path.AddArc(rect, startAngle, sweepAngle);canvas.DrawPath(path, ArcPaint);}
}

使用控件

在MainPage.xaml中添加一個CircleSlider控件,
設(shè)置的Maximum，是當(dāng)前曲目的時長，Value是當(dāng)前曲目的進(jìn)度

<controls:CircleSlider HeightRequest="250"WidthRequest="250"x:Name="MainCircleSlider"Maximum="{Binding Duration}"Minimum="0.0"TintColor="#FFFFFF"ContainerColor="#4CFFFFFF"IsEnabled="{Binding Canplay}"ValueChanged="OnValueChanged"Value="{Binding CurrentTime,Mode=TwoWay} ">
</controls:CircleSlider>

創(chuàng)建專輯封面

使用MAUI的VisualElement中的Clip屬性，創(chuàng)建Clip裁剪，可以傳入一個Geometry對象，這里我們使用RoundRectangleGeometry，將它的CornerRadius屬性設(shè)置為圖片寬度的一半，即可實現(xiàn)圓形圖片。

<Image HeightRequest="250"WidthRequest="250"Margin="7.5"Source="{Binding  CurrentMusic.AlbumArt}"VerticalOptions="CenterAndExpand"HorizontalOptions="CenterAndExpand"Aspect="AspectFill"><Image.Clip><RoundRectangleGeometry  CornerRadius="125" Rect="0,0,250,250" /></Image.Clip>
</Image>

設(shè)置一個半透明背景的播放狀態(tài)指示器，當(dāng)IsPlaying為False時將顯示一個播放按鈕

<Grid IsVisible="{Binding IsPlaying, Converter={StaticResource True2FalseConverter}}"><BoxView HeightRequest="250"WidthRequest="250"Margin="7.5"Color="#60000000"VerticalOptions="CenterAndExpand"HorizontalOptions="CenterAndExpand"CornerRadius="250" ></BoxView><Label  x:Name="PauseLabel"                               HorizontalOptions="CenterAndExpand"FontSize="58"  TextColor="{Binding Canplay,Converter={StaticResource Bool2StringConverter},ConverterParameter=White|#434343}"FontFamily="FontAwesome"Margin="0"></Label>
</Grid>

創(chuàng)建PanContainer對象，用于實現(xiàn)拖動效果，設(shè)置AutoAdsorption屬性為True，即可實現(xiàn)拖動后自動吸附效果。

關(guān)于PanContainer請查看上期的文章：平移手勢交互

用一個Grid將專輯封面，CircleSlider，以及播放狀態(tài)指示器包裹起來。完整代碼如下

 <controls1:PanContainer BackgroundColor="Transparent"x:Name="DefaultPanContainer"OnTapped="DefaultPanContainer_OnOnTapped"AutoAdsorption="True"OnfinishedChoise="DefaultPanContainer_OnOnfinishedChoise"><Grid PropertyChanged="BindableObject_OnPropertyChanged"VerticalOptions="Start"HorizontalOptions="Start"><Image HeightRequest="250"WidthRequest="250"Margin="7.5"Source="{Binding  CurrentMusic.AlbumArt}"VerticalOptions="CenterAndExpand"HorizontalOptions="CenterAndExpand"Aspect="AspectFill"><Image.Clip><RoundRectangleGeometry  CornerRadius="125" Rect="0,0,250,250" /></Image.Clip></Image><controls:CircleSlider>...</controls:CircleSlider><Grid IsVisible="{Binding IsPlaying, Converter={StaticResource True2FalseConverter}}"><BoxView HeightRequest="250"WidthRequest="250"Margin="7.5"Color="#60000000"VerticalOptions="CenterAndExpand"HorizontalOptions="CenterAndExpand"CornerRadius="250" ></BoxView><Label  x:Name="PauseLabel"                               HorizontalOptions="CenterAndExpand"FontSize="58"  TextColor="{Binding Canplay,Converter={StaticResource Bool2StringConverter},ConverterParameter=White|#434343}"FontFamily="FontAwesome"Margin="0"></Label></Grid></Grid>
</controls1:PanContainer>

以上就是這個項目的全部內(nèi)容，感謝閱讀

項目地址

Github:maui-samples