[MAUI 项目实战] 手势控制音乐播放器(四):圆形进度条
@
我们将绘制一个圆形的音乐播放控件,它包含一个圆形的进度条、专辑页面和播放按钮。
关于图形绘制
使用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>
以上就是这个项目的全部内容,感谢阅读
项目地址
[MAUI 项目实战] 手势控制音乐播放器(四):圆形进度条的更多相关文章
- Android第三方开源SeekBarCompat:音乐类播放器等APP进度条常用
Android第三方开源SeekBarCompat:音乐类播放器等APP进度条常用 Android平台原生的SeekBar设计简单,然而,比如现在流行的一些音乐播放器的播放进度控制条,如果直接使 ...
- 团队项目 NABCD分析java音乐播放器
NABCD分析java音乐播放器 程设计题目:java音乐播放器 一.课程设计目的 1.编程设计音乐播放软件,使之实现音乐播放的功能. 2.培养学生用程序解决实际问题的能力和兴趣. 3.加深java中 ...
- Android开发实战之简单音乐播放器
最近开始学习音频相关.所以,很想自己做一个音乐播放器,于是,花了一天学习,将播放器的基本功能实现了出来.我觉得学习知识点还是蛮多的,所以写篇博客总结一下关于一个音乐播放器实现的逻辑.希望这篇博文对你的 ...
- Android(java)学习笔记234: 服务(service)之音乐播放器
1.我们播放音乐,希望在后台长期运行,不希望因为内存不足等等原因,从而导致被gc回收,音乐播放终止,所以我们这里使用服务Service创建一个音乐播放器. 2.创建一个音乐播放器项目(使用服务) (1 ...
- Android(java)学习笔记177: 服务(service)之音乐播放器
1.我们播放音乐,希望在后台长期运行,不希望因为内存不足等等原因,从而导致被gc回收,音乐播放终止,所以我们这里使用服务Service创建一个音乐播放器. 2.创建一个音乐播放器项目(使用服务) (1 ...
- Andriod小项目——在线音乐播放器
转载自: http://blog.csdn.net/sunkes/article/details/51189189 Andriod小项目——在线音乐播放器 Android在线音乐播放器 从大一开始就已 ...
- Swift实战-豆瓣电台(九)简单手势控制暂停播放(全文完)
Swift实战-豆瓣电台(九)简单手势控制暂停播放 全屏清晰观看地址:http://www.tudou.com/programs/view/tANnovvxR8U/ 这节我们主要讲UITapGestu ...
- Android应用--简、美音乐播放器增加音量控制
Android应用--简.美音乐播放器增加音量控制 2013年6月26日简.美音乐播放器继续完善中.. 题外话:上一篇博客是在6月11号发的,那篇博客似乎有点问题,可能是因为代码结构有点乱的原因,很难 ...
- 自定义css样式结合js控制audio做音乐播放器
最近工作需求需要播放预览一些音乐资源,所以自己写了个控制audio的音乐播放器. 实现的原理主要是通过js调整audio的对象属性及对象方法来进行控制: 1.通过play().pause()来控制音乐 ...
- HTML5项目笔记4:使用Audio API设计绚丽的HTML5音乐播放器
HTML5 有两个很炫的元素,就是Audio和 Video,可以用他们在页面上创建音频播放器和视频播放器,制作一些效果很不错的应用. 无论是视屏还是音频,都是一个容器文件,包含了一些音频轨道,视频轨道 ...
随机推荐
- 20181224蒋嘉豪-exp4
20181224蒋嘉豪-exp4 目录 20181224蒋嘉豪-exp4 实验概况 1.实践目标 2.实践内容概述 知识点总结 1.有关schtasks 2.有关Sysmon(参考链接) 3.恶意代码 ...
- node.js与js的关系
- Java基础进阶内容 - 随笔
JAVA进阶 1 对象序列化 1.1 对象要序列化要实现Serializable接口 1.2 然后通过ObjectInputStream 对象读入流来读入一个对象 new ObjectOutputSt ...
- 剑指offer-孩子们的游戏
题目描述:每年六一儿童节,牛客都会准备一些小礼物去看望孤儿院的小朋友,今年亦是如此.HF作为牛客的资深元老,自然也准备了一些小游戏.其中,有个游戏是这样的:首先,让小朋友们围成一个大圈.然后,他随机指 ...
- Docker不启动容器的情况下修改配置文件
应用场景: 1.容器中配置文件错误无法启动. 2.任何不启动容器时修改配置文件. 方法: 1.Copy容器中的配置文件出来. 2.修改此配置文件 3.将配置文件重新覆盖回容器内 命令 docker c ...
- How to Change Reset Retrieve the WebLogic Server Administrator Password on WLS 10.3.6 or earlier
To change the Administrator password on WLS 10.3.6 or earlier, perform the following steps depending ...
- vue打包记录
这里的确是css以及js文件的路径问题,但解决时并不需要手动改路径或者加一段判断去修改,最方便的办法时在项目打包前的vue.config.js里面将publicPath属性添加或者修改为 public ...
- CentOS7-jdk1.8下载安装
一.下载网址 jdk全版本:https://www.oracle.com/java/technologies/downloads/archive/ 本次安装版本(jdk1.8.0_151):https ...
- C++初识指针之一
新手学习C/C++都跳不过去的地方,就是指针,用的话,确实好用,但是概念比较绕, 指针的通俗说法 1.简单的来说,就是说每一个变量,在电脑内都占一个地方,这个地方用一个16进掉的编号来进行标记,类似于 ...
- Jenkins搭建项目过程中遇到的问题解决方法
1.运行时,报没有权限 报错: rm -rf '/root/jar/*' rm: cannot remove '/root/jar/*': Permission denied 解决方法: 将Jenki ...