[MAUI 项目实战] 手势控制音乐播放器（四）：圆形进度条

news2024/10/6 21:26:38

文章目录

    • 关于图形绘制
    • 创建自定义控件
    • 使用控件
    • 创建专辑封面
    • 项目地址

我们将绘制一个圆形的音乐播放控件，它包含一个圆形的进度条、专辑页面和播放按钮。

在这里插入图片描述

关于图形绘制

使用MAUI的绘制功能，需要Microsoft.Maui.Graphics库。

Microsoft.Maui.Graphics 是一个实验性的跨平台图形库，它可以在 .NET MAUI 中使用。它提供了一组基本的图形元素，如矩形、圆形、线条、路径、文本和图像。它还提供了一组基本的图形操作，如填充、描边、裁剪、变换和渐变。

Microsoft.Maui.Graphics在不同的目标平台上使用一致的API访问本机图形功能，而底层实现使用了不同的图形渲染引擎。其中通用性较好的是SkiaSharp图形库，支持几乎所有的操作系统，在不同平台上的表现也近乎一致。

创建自定义控件

在项目中添加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>

创建CircleSlider.xaml文件，添加如下内容：

<?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：当前值
  • TintColor：进度条颜色
  • ContainerColor：进度条背景颜色
  • BorderWidth：进度条宽度

定义两个SKPaint画笔属性，OutlinePaint用于绘制进度条背景，ArcPaint用于绘制进度条本身。他们的描边宽度StrokeWidth则是圆形进度条的宽度。
两个画笔的初始值样式为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用于设置描边宽度，并产生一个动效，

在BorderWidth发生变更的时候，会出现一个动效。宽度会缓慢地变化至新的值。刷新率为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进行补偿。调用RefreshMainRectPadding方法计算一个新的Padding值，BoderWidth缩小时，Padding也随之增大。

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

在视觉上，进度条宽度从内向外扩张变细。

在这里插入图片描述

若设为原宽度减去计算值，从视觉上是从外向内收缩变细。

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

在这里插入图片描述

接下来写订阅了CanvaseView的PaintSurface事件的方法OnCanvasViewPaintSurface。在这个方法中，我们将编写圆形进度条的绘制逻辑。

PaintSurface事件在绘制图形时触发。程序运行时会实时触发这个方法，它的参数SKPaintSurfaceEventArgs事件附带的对象具有两个属性：

  • Info类型SKImageInfo
  • Surface类型SKSurface

SKImageInfo对象包含如宽度和高度等有关绘图区域的信息，对象SKSurface为绘制本身，我们需要利用SKImageInfo宽度和高度等信息，结合业务数据，在SKSurface绘制出我们想要的图形。

清空上一次绘制的图形，调用SKSurface.Canvas获取Canvas对象，调用Canvas.Clear方法清空上一次绘制的图形。

canvas.Clear();

rect是一个SKRect对象，进度条本身是圆形，我们需要一个正方形的区域来控制圆形区域。

sweepAngle是当前进度对应的角度，首先计算出总进度值，通过计算当前进度对应总进度的比值，换算成角度，将这一角度赋值给sweepAngle。

startAngle是进度条的起始角度，我们将其设置为-90度，即从正上方开始绘制。


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

调用Canvas.DrawOval，使用OutlinePaint画笔绘制进度条背景，它是一个圆形

canvas.DrawOval(rect, OutlinePaint);

创建绘制路径path，调用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控件,
设置的Maximum，是当前曲目的时长，Value是当前曲目的进度

<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>

创建专辑封面

使用MAUI的VisualElement中的Clip属性，创建Clip裁剪，可以传入一个Geometry对象，这里我们使用RoundRectangleGeometry，将它的CornerRadius属性设置为图片宽度的一半，即可实现圆形图片。

<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>

设置一个半透明背景的播放状态指示器，当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>

在这里插入图片描述

创建PanContainer对象，用于实现拖动效果，设置AutoAdsorption属性为True，即可实现拖动后自动吸附效果。

关于PanContainer请查看上期的文章：平移手势交互

用一个Grid将专辑封面，CircleSlider，以及播放状态指示器包裹起来。完整代码如下

 <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>

在这里插入图片描述
以上就是这个项目的全部内容，感谢阅读

项目地址

Github:maui-samples

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/418836.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

【技术】《Netty》从零开始学netty源码（三十七）之ByteBufAllocator

【技术】《Netty》从零开始学netty源码（三十七）之ByteBufAllocator

ByteBufAllocator 在channel的配置类中有一个属性allocator&#xff0c;我们知道netty有自己的缓冲区&#xff0c;可以使用该缓存分配器来分配所需的缓存。在config类中默认使用ByteBufAllocator.DEFAULT&#xff0c;它的初始化过程如下&#xff1a; 在开始分析PooledByteBufA…
阅读更多...
基于 QT 开发 FLIPPED ：简易且漂亮的跨平台截图贴图软件

基于 QT 开发 FLIPPED ：简易且漂亮的跨平台截图贴图软件

文章目录FLIPPED运行预览视频演示截图演示特性快捷键架构思路思路细节打磨实际问题解决方案编译依赖WindowsMacOS / Linux运行效果作者贡献者反馈下载安装包系列地址简 述: 新开发的一款跨平台的截图贴图的软件作品&#xff0c; FLIPPED&#xff1a;Simple and beautiful cross…
阅读更多...
基于Web的智慧LNG加气站2D组态控制系统

基于Web的智慧LNG加气站2D组态控制系统

LNG(Liquefied Natural Gas)&#xff0c;即液化天然气的英文缩写。LNG是通过在常压下气态的天然气&#xff0c;经过预处理&#xff0c;脱除重烃、硫化物、二氧化碳和水等杂质后&#xff0c;冷却至-162℃&#xff0c;使之凝结成液体。LNG无色无毒无味&#xff0c;是天然气经净化…
阅读更多...
算法分析与设计—分治法

算法分析与设计—分治法

分治者&#xff0c;分而治之也。概述分治法也称为分解法、分治策略等。分治法算法思想如下&#xff1a;(1) 将一个问题划分为同一类型的若干子问题&#xff0c;子问题最好规模相同。(2) 对这些子问题求解&#xff08;一般使用递归方法&#xff0c;但在问题规模足够小时&#xf…
阅读更多...
fileinclude（通过cookie赋值的文件包含）

fileinclude（通过cookie赋值的文件包含）

打开链接&#xff0c;提示flag在flag.php里 内容里还有一个路径/var/www/html/index.php&#xff0c;猜测flag.php应该也是在这个路径下 Ctrlu查看网页源码 代码中发现 include($lan.".php"); 可知这里存在文件包 且包含与lan的值有关 由代码 $lan $_COOKIE[lang…
阅读更多...
安装kafka及一些命令

安装kafka及一些命令

1&#xff0c;先把压缩包放到/opt/install目录下 2&#xff0c;解压&#xff0c;更名 解压&#xff1a;[rootsiwen install]# tar -zxf kafka_2.12-2.8.0.tgz -C ../soft 更名&#xff1a;[rootsiwen soft]# mv kafka_2.12-2.8.0/ kafka212 3&#xff0c;配置文件 cd opt/so…
阅读更多...
讯飞 语音唤醒 Android SDK

讯飞 语音唤醒 Android SDK

语音唤醒 Android SDK 文档 | 讯飞开放平台文档中心https://www.xfyun.cn/doc/asr/awaken/Android-SDK.html前往控制台&#xff0c;设置唤醒关键词&#xff1a; 控制台-讯飞开放平台https://console.xfyun.cn/services/awaken注意&#xff0c;可以对唤醒词进行评估&#xff0c…
阅读更多...
游戏开发需要学什么

游戏开发需要学什么

游戏开发可以说是当下最热门的专业了&#xff0c;不过这一行业虽然很火热&#xff0c;但也有一定的竞争压力。这个行业需要大量的人才&#xff0c;而且游戏开发这个行业目前还处于初级阶段&#xff0c;所以发展空间还是很大的。现在有很多人都想进入这个行业&#xff0c;但却不…
阅读更多...
ESP32-IDF开发笔记 | 03 - 使用SPI外设驱动ST7789 SPILCD

ESP32-IDF开发笔记 | 03 - 使用SPI外设驱动ST7789 SPILCD

一、硬件说明 ST7789屏幕引脚ESP32C3F引脚3V33V3GNDGNDMOSIIO_07CLKIO_06DCIO_08RSTIO_04BLIO_05 二、ESP32的SPI外设 1. 外设功能 ESP32-C3具有三个SPI接口(SPI0、SPI1和SPI2)。 SPI0和SPI1只能配置为在SPI内存模式下操作&#xff0c;而SPI2可以配置为在SPI内存和通用SPI模…
阅读更多...
2023年MathorCup数学建模C题电商物流网络包裹应急调运与结构优化问题解题全过程

2023年MathorCup数学建模C题电商物流网络包裹应急调运与结构优化问题解题全过程

2023年第十三届MathorCup高校数学建模挑战赛 C题 电商物流网络包裹应急调运与结构优化问题 原题再现&#xff1a; 电商物流网络由物流场地&#xff08;接货仓、分拣中心、营业部等&#xff09;和物流场地之间的运输线路组成&#xff0c;如图 1 所示。受节假日和“双十一”、“…
阅读更多...
手机应用开发之如何利用蓝牙与HC-05通信？

手机应用开发之如何利用蓝牙与HC-05通信？

文章目录0、引言1、创建工程2、准备真机调试3、应用布局4、代码编写5、功能演示0、引言 本文通过AndroidStudio开发手机应用软件&#xff0c;实现蓝牙连接功能&#xff0c;并且能发送消息给HC-05蓝牙&#xff0c;也能接收HC-05回传的消息。本文在【AndroidStudio如何进行手机应…
阅读更多...
C++基础学习笔记（八）——提高编程PART3

C++基础学习笔记（八）——提高编程PART3

参考链接&#xff1a;https://www.bilibili.com/video/BV1et411b73Z/p237&spm_id_frompageDriver&vd_sourceb4d9cee68649c8adcb1e266f7147cd5c 4 STL- 函数对象 4.1 函数对象 4.1.1 函数对象概念 概念&#xff1a; 重载函数调用操作符的类&#xff0c;其对象常称为…
阅读更多...
STL的并行遍历：for_each(依赖TBB)和omp parallel

STL的并行遍历：for_each(依赖TBB)和omp parallel

文章目录OMP parallelOpenMP安装OpenMP示例1) OMP Hello World2) OMP for 并行3. OMP 官方示例4) map使用OMP遍历TBB的安装和使用Gcc9的安装TBB 安装TBB使用在图像处理等应用中&#xff0c;我们经常需要对矩阵&#xff0c;大数量STL对象进行遍历操作&#xff0c;因此并行化对算…
阅读更多...
R语言与作物模型（以DSSAT模型为例）融合应用

R语言与作物模型（以DSSAT模型为例）融合应用

随着基于过程的作物生长模型&#xff08;Process-based Crop Growth Simulation Model&#xff09;的发展&#xff0c;R语言在作物生长模型和数据分析、挖掘和可视化中发挥着越来越重要的作用。想要成为一名优秀的作物模型使用者与科研团队不可或缺的人才&#xff0c;除了掌握对…
阅读更多...
MySQL存储过程 if、case、while、loop、游标、变量、条件处理程序

MySQL存储过程 if、case、while、loop、游标、变量、条件处理程序

存储过程是事先经过编译并存储在数据库中的一段 SQL 语句的集合&#xff0c;调用存储过程可以简化很多工作&#xff0c;减少数据在数据库和应用服务器之间的传输&#xff0c;对于提高数据处理的效率是有好处的。 存储过程思想上很简单&#xff0c;就是数据库 SQL 语言层面的代…
阅读更多...
barret reduction原理详解及硬件优化

barret reduction原理详解及硬件优化

背景介绍 约减算法&#xff0c;通常应用在硬件领域&#xff0c;因为模运算mod是一个除法运算&#xff0c;在硬件中实现速度会比乘法慢的多&#xff0c;并且还会占用大量资源&#xff0c;因此需要想办法用乘法及其它简单运算来替代模运算。模约减算法可以利用乘法、加法和移位等…
阅读更多...
怎么评价2023年第十三届MathorCup高校数学建模挑战赛？

怎么评价2023年第十三届MathorCup高校数学建模挑战赛？

文章目录赛题思路选题建议1 竞赛信息2 竞赛时间3 组织机构4 建模常见问题类型4.1 分类问题4.2 优化问题4.3 预测问题4.4 评价问题赛题思路 &#xff08;赛题出来以后第一时间在CSDN分享&#xff09; 选题建议 首先要注意&#xff0c;A、B题为研究生组可选题目&#xff0c;A…
阅读更多...
还在用 if else 做参数校验？快来学习高级参数校验吧

还在用 if else 做参数校验？快来学习高级参数校验吧

文章目录一、前言二、自定义校验2.1 定义 GenderArrayValuable 接口2.2 定义性别 GenderEnum 枚举类2.3 自定义 GenderCheck 自定义约束注解2.4 自定义约束的校验器 GenderValidator2.5 定义 UserUpdateGenderDTO2.6 定义一个对外访问接口2.7 请求接口 进行验证三、总结一、前言…
阅读更多...
从C出发 17 --- 函数调用

从C出发 17 --- 函数调用

从表面上来看&#xff0c;函数就是一个代码片段&#xff0c;只不过说这个代码片段可以反复利用&#xff0c;通过调用的方式反复利用&#xff0c;通过函数调用&#xff0c;我们可以将参数传到函数所对应的代码片段里面&#xff0c;然后代码片段去处理这些参数&#xff0c;得到一…
阅读更多...
Linux下Samba服务器的安装与配置（简单实用）

Linux下Samba服务器的安装与配置（简单实用）

为了可以实现Linux与windows之间实现文件的共享&#xff0c;方便文件可以直接修改&#xff0c;而不是像以前需要拷贝文件再进行修改&#xff0c;samba的诞生是为了实现现在的这些需求。我们知道Linux之间可以使用NFS服务器来实现文件的共享&#xff0c;samba的诞生就是为了使wi…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023