SkiaSharp 之 WPF 自绘 拖曳小球（案例版）

感谢各位大佬和粉丝的厚爱和关心( 催更)，我会再接再厉的，其实这也是督促自己的一种方式，非常感谢。

刚写了一篇万字长文，自己也休养生息(低调发育)了一段时间，接下来来几个小案例。

拖曳小球

WPF的拖曳效果，基本配置一下，就可以了，但是自绘的话，就得自己控制，按键点击，按键移动和按键松开的事件，与其配合达到目的。
这个效果实现了，其实也变相的实现了WPF里的拖动效果，这个效果用着还是很方便的。
但是代码，确十分的简单。
Wpf 和 SkiaSharp

新建一个WPF项目，然后，Nuget包即可
要添加Nuget包

1. Install-Package SkiaSharp.Views.WPF -Version 2.88.0

复制代码

其中核心逻辑是这部分，会以我设置的60FPS来刷新当前的画板。

1. skContainer.PaintSurface += SkContainer_PaintSurface;
2. _ = Task.Run(() =>
3. {
4.     while (true)
5.     {
6.         try
7.         {
8.             Dispatcher.Invoke(() =>
9.             {
10.                 skContainer.InvalidateVisual();
11.             });
12.             _ = SpinWait.SpinUntil(() => false, 1000 / 60);//每秒60帧
13.         }
14.         catch
15.         {
16.             break;
17.         }
18.     }
19. });

复制代码

实现代码的 鼠标按下，移动，鼠标松开

先对SkiaSharp对象，增加相关事件

1.     skContainer.MouseDown += SkContainer_MouseDown;
2.     skContainer.MouseUp += SkContainer_MouseUp;
3.     skContainer.MouseMove += SkContainer_MouseMove;   

复制代码

然后增加相关事件处理代码，我这边都统一处理了.

1. private void SkContainer_MouseDown(object sender, MouseButtonEventArgs e)
2. {
3.     var cur = e.GetPosition(sender as IInputElement);
4.     drawClock.MouseDown(new SKPoint((float)cur.X, (float)cur.Y), true);
5. }
6. private void SkContainer_MouseUp(object sender, MouseEventArgs e)
7. {
8.     var cur = e.GetPosition(sender as IInputElement);
9.     drawClock.MouseDown(new SKPoint((float)cur.X, (float)cur.Y), false);
10. }
11. private void SkContainer_MouseMove(object sender, MouseEventArgs e)
12. {
13.     var cur = e.GetPosition(sender as IInputElement);
14.     drawClock.MouseMove(new SKPoint((float)cur.X, (float)cur.Y));
15. }

复制代码

拖曳核心类

1. /// <summary>
2. /// 拖曳
3. /// </summary>
4. public class Drag
5. {
6.     public SKPoint centerPoint;
7.     public int Radius = 0;
8.     private bool Pressed = false;
9.     private bool CirclePressend = false;
10.     private SKPoint sKPoint = SKPoint.Empty;
11.     private SKPoint CirclePoint = SKPoint.Empty;
12.     private SKCanvas canvas;
13.     private float dx = 0;
14.     private float dy = 0;
15.     /// <summary>
16.     /// 渲染
17.     /// </summary>
18.     public void Render(SKCanvas canvas, SKTypeface Font, int Width, int Height)
19.     {
20.         this.canvas = canvas;
21.         centerPoint = new SKPoint(Width / 2, Height / 2);
22.         this.Radius = 40;
23.         canvas.Clear(SKColors.White);
24.         if (CirclePoint.IsEmpty)
25.         {
26.             CirclePoint = new SKPoint(centerPoint.X, centerPoint.Y);
27.         }
28.         if (CirclePressend)
29.         {
30.             CirclePoint = new SKPoint(sKPoint.X - dx, sKPoint.Y - dy);
31.             DrawCircle(this.canvas, CirclePoint);
32.         }
33.         else
34.         {
35.             DrawCircle(this.canvas, CirclePoint);
36.         }
38.         using var paint = new SKPaint
39.         {
40.             Color = SKColors.Black,
41.             IsAntialias = true,
42.             Typeface = Font,
43.             TextSize = 24
44.         };
45.         var msg = $"X:{ sKPoint.X}  Y:{sKPoint.Y}  Pressed:{Pressed} CirclePressend:{CirclePressend}";
46.         canvas.DrawText(msg, 0, 30, paint);
47.     }
48.     public void MouseMove(SKPoint sKPoint)
49.     {
50.         this.sKPoint = sKPoint;
51.         if (CirclePressend)//按下，就开始拖动
52.         {
53.             CirclePoint = sKPoint;
54.         }
55.     }
56.     public void MouseDown(SKPoint sKPoint, bool Pressed)
57.     {
58.         this.sKPoint = sKPoint;
59.         this.Pressed = Pressed;
60.         if (this.Pressed)
61.         {
62.             this.CirclePressend = CheckPoint(sKPoint, CirclePoint);
63.             if (this.CirclePressend)
64.             {
65.                 dx = sKPoint.X - CirclePoint.X;
66.                 dy = sKPoint.Y - CirclePoint.Y;
67.             }
68.         }
69.         else
70.         {
71.             this.CirclePressend = false;
72.         }
73.     }
74.     public bool CheckPoint(SKPoint sKPoint, SKPoint CirclePoint)
75.     {
76.         var d = Math.Sqrt(Math.Pow(sKPoint.X - CirclePoint.X, 2) + Math.Pow(sKPoint.Y - CirclePoint.Y, 2));
77.         return this.Radius >= d;
78.     }
79.     /// <summary>
80.     /// 画一个圆
81.     /// </summary>
82.     public void DrawCircle(SKCanvas canvas, SKPoint sKPoint)
83.     {
84.         using var paint = new SKPaint
85.         {
86.             Color = SKColors.Blue,
87.             Style = SKPaintStyle.Fill,
88.             IsAntialias = true,
89.             StrokeWidth = 2
90.         };
91.         canvas.DrawCircle(sKPoint.X, sKPoint.Y, Radius, paint);
92.     }
93. }

复制代码

效果如下:


我可以点的球的边边哦，这也是一个小技巧，点到球哪里，停止的时候，鼠标还在那个位置，是不是有点像拖动窗体的感觉了。
总结

以前对拖曳总是很好奇，一直想是如何实现的，现在自己也自己从头到尾的实现了，那么，它就是已知的，这就是可以写出来的进步，每天都应该有一点这样的进步。
代码地址

https://github.com/kesshei/WPFSkiaDragDemo.git
https://gitee.com/kesshei/WPFSkiaDragDemo.git
阅

一键三连呦！，感谢大佬的支持，您的支持就是我的动力!
版权

蓝创精英团队（公众号同名，CSDN同名,CNBlogs同名）

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！