SkiaSharp 之 WPF 自绘 拖曳小球(案例版)
感谢各位大佬和粉丝的厚爱和关心( 催更),我会再接再厉的,其实这也是督促自己的一种方式,非常感谢。
刚写了一篇万字长文,自己也休养生息(低调发育)了一段时间,接下来来几个小案例。
拖曳小球
WPF的拖曳效果,基本配置一下,就可以了,但是自绘的话,就得自己控制,按键点击,按键移动和按键松开的事件,与其配合达到目的。
这个效果实现了,其实也变相的实现了WPF里的拖动效果,这个效果用着还是很方便的。
但是代码,确十分的简单。
Wpf 和 SkiaSharp
新建一个WPF项目,然后,Nuget包即可 要添加Nuget包
Install-Package SkiaSharp.Views.WPF -Version 2.88.0
其中核心逻辑是这部分,会以我设置的60FPS来刷新当前的画板。
skContainer.PaintSurface += SkContainer_PaintSurface;
_ = Task.Run(() =>
{while (true){try{Dispatcher.Invoke(() =>{skContainer.InvalidateVisual();});_ = SpinWait.SpinUntil(() => false, 1000 / 60);//每秒60帧}catch{break;}}
});
实现代码的 鼠标按下,移动,鼠标松开
先对SkiaSharp对象,增加相关事件
skContainer.MouseDown += SkContainer_MouseDown;skContainer.MouseUp += SkContainer_MouseUp;skContainer.MouseMove += SkContainer_MouseMove;
然后增加相关事件处理代码,我这边都统一处理了.
private void SkContainer_MouseDown(object sender, MouseButtonEventArgs e)
{var cur = e.GetPosition(sender as IInputElement);drawClock.MouseDown(new SKPoint((float)cur.X, (float)cur.Y), true);
}
private void SkContainer_MouseUp(object sender, MouseEventArgs e)
{var cur = e.GetPosition(sender as IInputElement);drawClock.MouseDown(new SKPoint((float)cur.X, (float)cur.Y), false);
}
private void SkContainer_MouseMove(object sender, MouseEventArgs e)
{var cur = e.GetPosition(sender as IInputElement);drawClock.MouseMove(new SKPoint((float)cur.X, (float)cur.Y));
}
拖曳核心类
/// <summary>
/// 拖曳
/// </summary>
public class Drag
{public SKPoint centerPoint;public int Radius = 0;private bool Pressed = false;private bool CirclePressend = false;private SKPoint sKPoint = SKPoint.Empty;private SKPoint CirclePoint = SKPoint.Empty;private SKCanvas canvas;private float dx = 0;private float dy = 0;/// <summary>/// 渲染/// </summary>public void Render(SKCanvas canvas, SKTypeface Font, int Width, int Height){this.canvas = canvas;centerPoint = new SKPoint(Width / 2, Height / 2);this.Radius = 40;canvas.Clear(SKColors.White);if (CirclePoint.IsEmpty){CirclePoint = new SKPoint(centerPoint.X, centerPoint.Y);}if (CirclePressend){CirclePoint = new SKPoint(sKPoint.X - dx, sKPoint.Y - dy);DrawCircle(this.canvas, CirclePoint);}else{DrawCircle(this.canvas, CirclePoint);}using var paint = new SKPaint{Color = SKColors.Black,IsAntialias = true,Typeface = Font,TextSize = 24};var msg = $"X:{ sKPoint.X} Y:{sKPoint.Y} Pressed:{Pressed} CirclePressend:{CirclePressend}";canvas.DrawText(msg, 0, 30, paint);}public void MouseMove(SKPoint sKPoint){this.sKPoint = sKPoint;if (CirclePressend)//按下,就开始拖动{CirclePoint = sKPoint;}}public void MouseDown(SKPoint sKPoint, bool Pressed){this.sKPoint = sKPoint;this.Pressed = Pressed;if (this.Pressed){this.CirclePressend = CheckPoint(sKPoint, CirclePoint);if (this.CirclePressend){dx = sKPoint.X - CirclePoint.X;dy = sKPoint.Y - CirclePoint.Y;}}else{this.CirclePressend = false;}}public bool CheckPoint(SKPoint sKPoint, SKPoint CirclePoint){var d = Math.Sqrt(Math.Pow(sKPoint.X - CirclePoint.X, 2) + Math.Pow(sKPoint.Y - CirclePoint.Y, 2));return this.Radius >= d;}/// <summary>/// 画一个圆/// </summary>public void DrawCircle(SKCanvas canvas, SKPoint sKPoint){using var paint = new SKPaint{Color = SKColors.Blue,Style = SKPaintStyle.Fill,IsAntialias = true,StrokeWidth = 2};canvas.DrawCircle(sKPoint.X, sKPoint.Y, Radius, paint);}
}
效果如下:
我可以点的球的边边哦,这也是一个小技巧,点到球哪里,停止的时候,鼠标还在那个位置,是不是有点像拖动窗体的感觉了。
总结
以前对拖曳总是很好奇,一直想是如何实现的,现在自己也自己从头到尾的实现了,那么,它就是已知的,这就是可以写出来的进步,每天都应该有一点这样的进步。
代码地址
https://github.com/kesshei/WPFSkiaDragDemo.git
https://gitee.com/kesshei/WPFSkiaDragDemo.git
阅
一键三连呦!,感谢大佬的支持,您的支持就是我的动力!
版权
蓝创精英团队(公众号同名,CSDN同名)
SkiaSharp 之 WPF 自绘 拖曳小球(案例版)相关推荐
- SkiaSharp 之 WPF 自绘时钟(案例版)
SkiaSharp是一个跨平台2D图形API,用于.NET平台,基于Google's Skia Graphics库(skia.org网站). 它提供了一个全面的2D API,可以跨移动.服务器和桌面模 ...
- SkiaSharp 之 WPF 自绘 粒子花园(案例版)
此案例包含了简单的碰撞检测,圆形碰撞检测方法,也可以说是五环弹球的升级版,具体可以根据例子参考. 粒子花园 这名字是案例的名字,效果更加具有科技感,很是不错,搞搞做成背景特效也是不错的选择. Wpf ...
- SkiaSharp 之 WPF 自绘 投篮小游戏(案例版)
此案例主要是针对光线投影法碰撞检测功能的示例,顺便做成了一个小游戏,很简单,但是,效果却很不错. 投篮小游戏 规则,点击投篮目标点,就会有一个球沿着相关抛物线,然后,判断是否进入篮子里,其实就是一个矩 ...
- 使用WPF+MVVM模式的小案例
WPF+MVVM模式的小案例案例主要的目录结构 下面一步一步建立整个小程序的目录和相应的代码程序. 1.打开VS, 新建项目WPFDemo.Client.CustType(自己可以写自己的程序名称,这 ...
- 《Axure RP7网站和APP原型制作从入门到精通(60小时案例版)》一1.3 部件概述...
本节书摘来自异步社区<Axure RP7网站和APP原型制作从入门到精通(60小时案例版)>一书中的第1章,第1.3节,作者 金乌,更多章节内容可以访问云栖社区"异步社区&quo ...
- 图书推荐:《ASP.NET.基础教程——C#案例版》
本书结合用C#语言编写的可实际运行的示例代码,讨论了ASP.NET的构架.Web窗体.配置.HTTP管道.故障诊断和错误处理.验证.数据绑定.自定义控件.缓存.状态管理和安全性,阐述用C#构建基于We ...
- 《数位板这样玩——Photoshop+Painter数码手绘必修课(第2版)》目录—导读
版权声明 数位板这样玩--Photoshop+Painter数码手绘必修课(第2版) The Photoshop and Painter Artist Tablet Book, Second Edit ...
- C与C++游戏项目练习1:弹跳的小球简易版
C与C++游戏项目练习1:弹跳的小球简易版 最近在研究知乎上看见的游戏专栏,被童晶老师的<C语言课程设计与游戏开发实践教程>种草了,我本来就喜欢并且专业方向也选的游戏,于是就买了一本,有空 ...
- matlab模糊集合及其运算,模糊数学-Matlab案例版.pdf
模糊数学-Matlab案例版 1 基本编程思想 例题 设有矩阵 a 83 64 50 30 89 54 1 a 42 30 80 75 36 28 2 ...
最新文章
- 10 python中的常量
- angularJS1笔记-(18)-$http及用angular实现JSONP跨域访问过程
- 算法62---最长回文子序列长度(子串)、回文子序列总共个数(子串)【动态规划】...
- ios序列化与反序列化,本地化
- Sentinel+Nacos实现Sentinel的持久化规则,就很nice!
- android 点击item跳转页面,Android RecyclerView Item 点击事件,简单
- WPF的转换器中使用Brush应注意问题
- linux下关闭网络服务,Linux 关闭网络管理服务
- 国企营业收入逾17万亿 同比增长24.2%
- Tosca 添加 modules,添加Library,引用重复步骤
- 概率论与数理统计图解.tex
- 经典人生感悟 看看你少了那一条
- 线程池原理_Java线程池实现原理
- JAVA构造方法与构造方法的执行原理简单理解(栈与堆)
- ODIN SNN处理器
- 【无人驾驶系列一】激光雷达(LiDAR)在无人驾驶技术中的应用
- centos下smartctl安装配置(硬盘S.M.A.R.T信息及坏块检测命令)
- python表示倍数_python 求倍数
- ai 分形艺术_作为艺术家的AI?
- 信噪比db换算_DB和dBm有哪些区别 DB和dBm区别介绍【图文】
热门文章
- STM32单片机与蓝牙模块HC-05通信数据帧处理
- NMEA GPRMC 格式图解,NMEA 工具的比较
- Java虚拟机学习笔记(一)--运行时数据区域
- html 微信语音聊天,layaBOX实时语音聊天与微信登陆接口分享
- 数据结构1800关于图的代码精选(三)
- 趣文:三分钟了解敏捷开发
- android照片如何查看时间,【技巧】如何查看图片的拍摄地点和日期时间等信息...
- php输出3d彩票号码,3D彩票开出罕见“豹子号“!彩票中心要“赔钱”
- 【线段树】【cogs775】山海经
- 绝妙的 channel