C# 與 SkiaSharp 平移技巧全解析：掌握核心指南

作者：iamrick 2025-09-29 08:19:44

開發開發工具

SkiaSharp中的平移變換是構建復雜圖形應用的基礎。本文介紹了平移變換的基本原理、實現方法以及實際應用場景，希望能幫助開發者更好地理解和應用這一技術。

平移變換是計算機圖形學中最基本的變換之一，它允許我們將圖形在坐標系中移動位置，而不改變其形狀和大小。在SkiaSharp中，平移變換是通過矩陣運算來實現的，它是構建復雜圖形應用的基礎。

本文將深入探討SkiaSharp中的平移變換，提供詳細的代碼示例和實際應用場景，幫助開發者充分掌握這一基礎技術。

SkiaSharp基礎知識

在深入了解平移變換之前，讓我們先簡單了解一下SkiaSharp。

SkiaSharp是Google的Skia圖形庫的.NET綁定，提供了高性能的2D圖形API。它可以在多個平臺上運行，包括Windows、macOS、iOS、Android和Linux，是跨平臺圖形應用的理想選擇。

使用SkiaSharp需要安裝以下NuGet包：

Install-Package SkiaSharp
Install-Package SkiaSharp.Views.WindowsForms

平移變換的基本原理

在SkiaSharp中，平移變換基于以下矩陣運算：

| 1 0 tx |
| 0 1 ty |
| 0 0 1  |

其中tx和ty分別表示X軸和Y軸的平移量。

在SkiaSharp中實現平移變換

使用Canvas.Translate方法

最直接的平移方法是使用SKCanvas的Translate方法：

using SkiaSharp.Views.Desktop;
using SkiaSharp;

namespace AppTranslation
{
    public partial class Form1 : Form
    {
        public Form1()
        {
            InitializeComponent();

            // 創建一個SkiaSharp控件  
            SKControl skControl = new SKControl();
            skControl.Dock = DockStyle.Fill;
            skControl.PaintSurface += SkControl_PaintSurface;

            // 將控件添加到窗體  
            this.Controls.Add(skControl);
        }

        private void SkControl_PaintSurface(object sender, SKPaintSurfaceEventArgs e)
        {
            // 獲取畫布和相關信息  
            SKSurface surface = e.Surface;

            // 創建畫布  
            using (SKCanvas canvas = surface.Canvas)
            {
                // 清除背景  
                canvas.Clear(SKColors.White);

                // 創建畫筆  
                using (SKPaint paint = new SKPaint
                {
                    Color = SKColors.Blue,
                    StrokeWidth = 5,
                    IsAntialias = true,
                    Style = SKPaintStyle.Stroke
                })
                {
                    // 繪制原始矩形  
                    canvas.DrawRect(10, 10, 100, 100, paint);

                    // 應用平移變換 (向右移動150像素，向下移動50像素)  
                    canvas.Translate(150, 50);

                    // 繪制平移后的矩形 (注意坐標還是使用原來的坐標)  
                    paint.Color = SKColors.Red;
                    canvas.DrawRect(10, 10, 100, 100, paint);
                }
            }
        }
    }
}

圖片

使用SKMatrix進行平移

更靈活的方式是使用SKMatrix：

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows.Forms;
using SkiaSharp;
using SkiaSharp.Views.Desktop;

namespace AppTranslation
{
    public partial class Form2 : Form
    {
        public Form2()
        {
            InitializeComponent();
            // 創建 SKControl 控件  
            SKControl skControl = new SKControl();
            skControl.Dock = DockStyle.Fill;
            skControl.PaintSurface += SKControl_PaintSurface;

            this.Controls.Add(skControl);
        }

        private void SKControl_PaintSurface(object sender, SKPaintSurfaceEventArgs e)
        {
            SKSurface surface = e.Surface;

            using (SKCanvas canvas = surface.Canvas)
            {
                canvas.Clear(SKColors.White);

                using (SKPaint paint = new SKPaint
                {
                    Color = SKColors.Blue,
                    StrokeWidth = 5,
                    IsAntialias = true,
                    Style = SKPaintStyle.Stroke
                })
                {
                    // 繪制原始矩形  
                    canvas.DrawRect(10, 10, 100, 100, paint);

                    // 創建平移矩陣  
                    SKMatrix matrix = SKMatrix.CreateTranslation(150, 50);

                    // 應用變換  
                    canvas.SetMatrix(matrix);

                    // 繪制平移后的矩形  
                    paint.Color = SKColors.Red;
                    canvas.DrawRect(10, 10, 100, 100, paint);
                }
            }
        }
    }
}

復雜應用示例

創建動畫效果

以下是一個使用平移變換創建簡單動畫的例子：

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows.Forms;
using SkiaSharp.Views.Desktop;
using SkiaSharp;
using Timer = System.Windows.Forms.Timer;

namespace AppTranslation
{
    public partial class Form3 : Form
    {
        privatefloat translationX = 0;
        privatefloat translationY = 0;
        privateconstfloat Speed = 5;
        private Timer animationTimer;
        private SKControl canvasView;
        public Form3()
        {
            InitializeComponent();

            SetupUI();
            SetupTimer();
        }

        private void SetupUI()
        {
            // 創建并配置SKCanvasView  
            canvasView = new SKControl();
            canvasView.Dock = DockStyle.Fill;
            canvasView.PaintSurface += OnCanvasViewPaintSurface;

            // 將控件添加到窗體  
            this.Controls.Add(canvasView);
        }

        private void SetupTimer()
        {
            // 創建并配置動畫計時器  
            animationTimer = new Timer();
            animationTimer.Interval = 30; // 約33fps  
            animationTimer.Tick += (sender, e) => UpdateAnimation();
            animationTimer.Start();
        }

        // 在定時器或動畫循環中調用  
        private void UpdateAnimation()
        {
            // 更新平移值  
            translationX += Speed;

            // 如果移出屏幕，重置位置  
            if (translationX > canvasView.Width)
            {
                translationX = -100;
            }

            // 觸發重繪  
            canvasView.Invalidate();
        }

        // 繪制事件處理  
        private void OnCanvasViewPaintSurface(object sender, SKPaintSurfaceEventArgs e)
        {
            SKSurface surface = e.Surface;
            SKCanvas canvas = surface.Canvas;

            canvas.Clear(SKColors.White);

            using (SKPaint paint = new SKPaint
            {
                Color = SKColors.Blue,
                IsAntialias = true,
                Style = SKPaintStyle.Fill
            })
            {
                // 應用當前平移值  
                canvas.Translate(translationX, translationY);

                // 繪制一個移動的矩形  
                canvas.DrawRect(0, 100, 100, 50, paint);
            }
        }

        protected override void OnFormClosing(FormClosingEventArgs e)
        {
            // 確保在窗體關閉時停止計時器  
            if (animationTimer != null)
            {
                animationTimer.Stop();
                animationTimer.Dispose();
            }

            base.OnFormClosing(e);
        }
    }
}

圖片

實現拖拽功能

以下是一個簡單的拖拽實現：

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows.Forms;
using SkiaSharp.Views.Desktop;
using SkiaSharp;

namespace AppTranslation
{
    public partial class Form4 : Form
    {
        private SKControl skControl;

        private SKPoint dragOffset = new SKPoint(0, 0);
        privatebool isDragging = false;
        private SKRect rectangle = new SKRect(100, 100, 200, 200);
        public Form4()
        {
            InitializeComponent();
            SetupComponents();
        }


        private void SetupComponents()
        {
            // 設置窗體屬性  
            this.Text = "拖拽矩形示例";
            this.Size = new System.Drawing.Size(800, 600);

            // 創建 SKControl  
            skControl = new SKControl();
            skControl.Dock = DockStyle.Fill;
            skControl.PaintSurface += OnPaintSurface;
            this.Controls.Add(skControl);

            // 添加鼠標事件處理  
            skControl.MouseDown += OnMouseDown;
            skControl.MouseMove += OnMouseMove;
            skControl.MouseUp += OnMouseUp;
        }

        private void OnMouseDown(object sender, MouseEventArgs e)
        {
            SKPoint point = new SKPoint(e.X, e.Y);
            if (rectangle.Contains(point))
            {
                isDragging = true;
                dragOffset = new SKPoint(point.X - rectangle.Left, point.Y - rectangle.Top);
            }
        }

        private void OnMouseMove(object sender, MouseEventArgs e)
        {
            if (isDragging)
            {
                float newX = e.X - dragOffset.X;
                float newY = e.Y - dragOffset.Y;
                rectangle = new SKRect(newX, newY, newX + rectangle.Width, newY + rectangle.Height);
                skControl.Invalidate(); // 請求重繪  
            }
        }

        private void OnMouseUp(object sender, MouseEventArgs e)
        {
            isDragging = false;
            skControl.Invalidate(); // 請求重繪以更新顏色  
        }

        // 繪制函數  
        private void OnPaintSurface(object sender, SKPaintSurfaceEventArgs e)
        {
            SKSurface surface = e.Surface;
            SKCanvas canvas = surface.Canvas;

            canvas.Clear(SKColors.White);

            using (SKPaint paint = new SKPaint
            {
                Color = isDragging ? SKColors.Red : SKColors.Blue,
                IsAntialias = true,
                Style = SKPaintStyle.Fill
            })
            {
                // 直接繪制在當前位置  
                canvas.DrawRect(rectangle, paint);
            }
        }
    }
}

圖片

總結

無論是簡單的UI元素移動，還是復雜的圖形動畫，掌握平移變換都是必不可少的。通過本文提供的代碼示例和最佳實踐，相信讀者能夠在自己的項目中靈活運用平移變換，創造出更加豐富的圖形體驗。

責任編輯：武曉燕來源：技術老小子

C#SkiaSharp 平移