SkiaSharp 之 WPF 自繪 拖曳小球(案例版)

来源:https://www.cnblogs.com/kesshei/archive/2022/07/28/16526795.html
-Advertisement-
Play Games

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同名,CNBlogs同名)


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • static關鍵字 1.Java中的靜態 1.1static修飾成員變數 static修飾的成員變數屬於類、也稱為類變數,類對象可以使用。使用時可以直接用類名調用。 定義格式:`static 數據類型 變數名;` 例子: class A{ static String city="China"; } ...
  • 1.此為GitHub項目的學習記錄,記錄著我的思考,代碼基本都有註釋。 2.可以作為Python初學者鞏固基礎的絕佳練習,原題有些不妥的地方我也做了一些修正。 3.建議大家進行Python編程時使用英語,工作時基本用英語。 4.6~17題為level1難度,18-22題為level3難度,其餘都為l ...
  • [數據結構-線性表1.1] 數組(.NET源碼學習) 數組,一種數據類型(在絕大數語言中不是基本數據類型)且為引用類型,在記憶體中以連續的記憶體單元進行分配,所以其大小在創建對象後為定值,不可更改。 一.記憶體分配 對於兩種不同數據類型而言,其記憶體分配方式是不同的。值類型直接在棧(C#中稱為堆棧Stack ...
  • 一 併發編程簡介 1.1 關於併發和並行 併發和並行的概念: 併發:(Concurrent),在某個時間段內,如果有多個任務執行,即有多個線程在操作時,如果系統只有一個CPU,則不能真正同時進行一個以上的線程, 它只能把CPU運行時間劃分成若幹個時間段,再將時間段分配給各個線程執行,在一個時間段的線 ...
  • 前言 接著上周寫的截圖控制項繼續更新 縮放操作。 1.WPF實現截屏「仿微信」 2.WPF 實現截屏控制項之移動(二)「仿微信」 正文 實現拉伸放大或縮小縮放操作需在矩形四個方向繪製8個Thumb,這裡有兩種方式 1)可以自行在XAML中硬編寫8個Thumb 2)使用裝飾器Adorner 本章使用了第二 ...
  • ASP.NET Web 應用 Docker踩坑歷程發表後,也開始使用Docker了,然而發佈的過程比較痛苦,經常發生下圖的事情: 據說是nuget包還原時發生錯誤 百度了半天也找不到解決的方法,而發生的概率有相當高,很是無語。 仔細看了自動生成的Dockerfile FROM mcr.microso ...
  • 今天在處理一個接收API通過Post方式傳送Json數據的方法時,碰到接收的Json數據一直是空的問題。最好找了好久才解決,現在把需要的問題列出來。 1. 在一般處理程式中,需要設置 context.Request.InputStream.Position = 0; 剛開始設置了這個,但後面還是為空 ...
  • 前言 如標題所述,在ASP.NET應用程式開發中,兩個集合做比較時 我們使用微軟IEnumerable封裝的 Except/Intersect/Union 取 差集/交集/並集 方法是非常的方便的; 但以上對於不太熟悉的小伙伴來講,在遇到求包含引用類型(不包含string)集合時就非常的苦惱; 下麵 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...