WPF+SkiaSharp实现自绘拖曳小球

 更新时间:2022年07月28日 09:45:12   作者:蓝创精英团队  
WPF的拖曳效果,基本配置一下,就可以了,但是自绘的话,就得自己控制。本文将利用WPF+SkiaSharp实现自绘拖曳小球,感兴趣的可以动手尝试一下

拖曳小球

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);
    }
}

效果如下

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

到此这篇关于WPF+SkiaSharp实现自绘拖曳小球的文章就介绍到这了,更多相关WPF SkiaSharp拖曳小球内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • C# 关于LoadLibrary的疑问详解

    C# 关于LoadLibrary的疑问详解

    这篇文章主要介绍了C# 关于LoadLibrary的疑问详解,本篇文章通过简要的案例,讲解了该项技术的了解与使用,以下就是详细内容,需要的朋友可以参考下
    2021-08-08
  • Unity实现场景漫游相机

    Unity实现场景漫游相机

    这篇文章主要为大家详细介绍了Unity实现场景漫游相机,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-10-10
  • C#使用DropDownList绑定添加新数据的方法汇总

    C#使用DropDownList绑定添加新数据的方法汇总

    这篇文章主要介绍了C#使用DropDownList绑定添加新数据的方法汇总的相关资料,需要的朋友可以参考下
    2016-03-03
  • C# 使用 GDI+ 实现添加中心旋转(任意角度)的文字

    C# 使用 GDI+ 实现添加中心旋转(任意角度)的文字

    这篇文章主要介绍了C# 使用 GDI+ 实现添加中心旋转(任意角度)的文字,需要的朋友可以参考下
    2018-04-04
  • 同时兼容JS和C#的RSA加密解密算法详解(对web提交的数据加密传输)

    同时兼容JS和C#的RSA加密解密算法详解(对web提交的数据加密传输)

    这篇文章主要给大家介绍了关于同时兼容JS和C#的RSA加密解密算法,通过该算法可以对web提交的数据进行加密传输,文中通过图文及示例代码介绍的非常详细,需要的朋友们可以参考借鉴,下面来一起看看吧。
    2017-07-07
  • 浅析C#中不同格式请求的区别

    浅析C#中不同格式请求的区别

    form-data 请求和 x-www-form-urlencoded 请求是两种常见的 HTTP 请求体格式,这篇文章主要为大家详细介绍了二者的区别与应用,希望对大家有所帮助
    2023-08-08
  • C#开发WinForm根据条件改变DataGridView行颜色

    C#开发WinForm根据条件改变DataGridView行颜色

    这篇文章介绍了C#开发WinForm根据条件改变DataGridView行颜色的方法,文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2022-03-03
  • 一文掌握C# JSON(2023最新整理)

    一文掌握C# JSON(2023最新整理)

    JSON的全称是JavaScript Object Notation,意思是JavaScript对象表示法,它是一种基于文本,独立于语言的轻量级数据交换格式,这篇文章主要介绍了C#中的JSON(2023最新整理),需要的朋友可以参考下
    2023-05-05
  • unity中点击某一个按钮播放某一个动作的操作

    unity中点击某一个按钮播放某一个动作的操作

    这篇文章主要介绍了unity中点击某一个按钮播放某一个动作的操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2021-04-04
  • 详解WMI RPC 服务器不可用的解决方案

    详解WMI RPC 服务器不可用的解决方案

    这篇文章主要介绍了详解WMI RPC 服务器不可用的解决方案,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-01-01

最新评论