12.旋轉、縮放、傾斜、平移Transform

来源:https://www.cnblogs.com/MingQiu/p/18000496
-Advertisement-
Play Games

RotateTransform旋轉 RotateTransform表示旋轉一個對象的角度。首先我們來看一下它的定義 public sealed class RotateTransform : Transform { public static readonly DependencyProperty ...


RotateTransform旋轉

RotateTransform表示旋轉一個對象的角度。首先我們來看一下它的定義

public sealed class RotateTransform : Transform
{
 
    public static readonly DependencyProperty AngleProperty;
    public static readonly DependencyProperty CenterXProperty;
    public static readonly DependencyProperty CenterYProperty;
 
    public RotateTransform();
    public RotateTransform(double angle);
    public RotateTransform(double angle, double centerX, double centerY);
 
    public double Angle { get; set; }
    public double CenterX { get; set; }
    public double CenterY { get; set; }
    public override Matrix Value { get; }
 
public RotateTransform Clone();
public RotateTransform CloneCurrentValue();
protected override Freezable CreateInstanceCore();
}

Angle屬性表示獲取或設置順時針旋轉的角度（以度為單位）。預設值是0度。

CenterX 和CenterY 表示獲取或設置旋轉中心點的 x y坐標，Value屬性表示當前轉換的矩陣。

通常我們只需要設置Angle、CenterX 和CenterY即可

案列：

 <Button Grid.Column="1" 
                Width="100" 
                Height="25" 
                Content="RotateTransform" 
                HorizontalAlignment="Center" 
                VerticalAlignment="Center">
            <Button.RenderTransform>
                <RotateTransform Angle="{Binding ElementName=slider,Path=Value}" 
                                 CenterX="50" CenterY="12.5"/>
            </Button.RenderTransform>
        </Button>


<Slider x:Name="slider" 
                Grid.ColumnSpan="3" 
                Margin="30" 
                HorizontalAlignment="Left" 
                VerticalAlignment="Bottom" 
                Value="0" 
                Maximum="720" 
                Width="400" />

 

ScaleTransform縮放

ScaleTransform表示在二維xy坐標系內縮放對象。所以它放大縮小的方向只有兩個，分別是X方向和Y方向。另外，每個方向上需要設置一個中心點。

public sealed class ScaleTransform : Transform
{
    public static readonly DependencyProperty ScaleXProperty;
    public static readonly DependencyProperty ScaleYProperty;
    public static readonly DependencyProperty CenterXProperty;
    public static readonly DependencyProperty CenterYProperty;
 
    public ScaleTransform();
    public ScaleTransform(double scaleX, double scaleY);
    public ScaleTransform(double scaleX, double scaleY, double centerX, double centerY);
 
    public double ScaleX { get; set; }
    public double ScaleY { get; set; }
    public double CenterX { get; set; }
    public double CenterY { get; set; }
    public override Matrix Value { get; }
 
    public ScaleTransform Clone();
    public ScaleTransform CloneCurrentValue();
    protected override Freezable CreateInstanceCore();
}

ScaleX屬性：獲取或設置X軸縮放比例。

ScaleY屬性：獲取或設置Y軸縮放比例。

CenterX屬性：獲取或設置當前縮放對象的X軸的中心坐標。

CenterY屬性：獲取或設置當前縮放對象的Y軸的中心坐標。

案例：

<Button Grid.Column="0" 
                Width="100" 
                Height="25" 
                Content="ScaleTransform" 
                HorizontalAlignment="Center" 
                VerticalAlignment="Center">
            <Button.RenderTransform>
                <ScaleTransform ScaleX="{Binding ElementName=sliderX,Path=Value}"
                                ScaleY="{Binding ElementName=sliderY,Path=Value}"/>
            </Button.RenderTransform>
        </Button>       
        
        <Button x:Name="button" 
                Grid.Column="1" 
                Width="100" 
                Height="25" 
                Content="ScaleTransform" 
                HorizontalAlignment="Center" 
                VerticalAlignment="Center">
            <Button.RenderTransform>
                <ScaleTransform CenterX="50" CenterY="12.5"/>
            </Button.RenderTransform>
        </Button>
<Slider x:Name="sliderX" 
                Grid.ColumnSpan="3" 
                Margin="40 25 20 15" 
                HorizontalAlignment="Left" 
                VerticalAlignment="Bottom" 
                Value="1" 
                Maximum="10" 
                Width="400" />
        <Slider x:Name="sliderY" 
                Orientation="Vertical"
                Grid.ColumnSpan="3" 
                Margin="20" 
                HorizontalAlignment="Left" 
                VerticalAlignment="Bottom" 
                Value="1" 
                Maximum="10" 
                Height="300" />

 

SkewTransform傾斜

SkewTransform表示傾斜某個對象，它有兩個方向的傾斜角度可以設置，AngleX表示設置x 軸傾斜角度，該角度是從 y 軸逆時針旋轉後測量得到，單位為度。AngleY表示設置y 軸傾斜角度，該角度通過測量從 x 軸逆時針旋轉得到的角度度數。另外，它也有CenterX和CenterY，表示傾斜轉換中心的xy坐標。

public sealed class SkewTransform : Transform
{
   public static readonly DependencyProperty AngleXProperty;
   public static readonly DependencyProperty AngleYProperty;
   public static readonly DependencyProperty CenterXProperty;
   public static readonly DependencyProperty CenterYProperty;
 
   public SkewTransform();
   public SkewTransform(double angleX, double angleY);
   public SkewTransform(double angleX, double angleY, double centerX, double centerY);
 
   public double AngleX { get; set; }
   public double AngleY { get; set; }
   public double CenterX { get; set; }
   public double CenterY { get; set; }
   public override Matrix Value { get; }
 
   public SkewTransform Clone();
   public SkewTransform CloneCurrentValue();
 
}

案例：

<Border Grid.Column="0" 
                Width="120" 
                Height="120" 
                Background="LightBlue"
                HorizontalAlignment="Center" 
                VerticalAlignment="Center">
            <Border.RenderTransform>
                <SkewTransform CenterX="0" CenterY="0"
                               AngleX="{Binding ElementName=sliderX,Path=Value}"
                               AngleY="{Binding ElementName=sliderY,Path=Value}"/>
            </Border.RenderTransform>
        </Border>       
        
        <Button x:Name="button" 
                Grid.Column="1" 
                Background="LightBlue"
                Width="120" 
                Height="120" 
                Content="SkewTransform傾斜" 
                HorizontalAlignment="Center" 
                VerticalAlignment="Center">
            <Button.RenderTransform>
                <SkewTransform CenterX="60" CenterY="60"
                               AngleX="{Binding ElementName=sliderX,Path=Value}"
                               AngleY="{Binding ElementName=sliderY,Path=Value}"/>
            </Button.RenderTransform>
        </Button>
        <Slider x:Name="sliderX" 
                Grid.ColumnSpan="3" 
                Margin="40 25 20 15" 
                HorizontalAlignment="Left" 
                VerticalAlignment="Bottom" 
                Value="0" 
                Maximum="180" 
                Width="400" />
        <Slider x:Name="sliderY" 
                Orientation="Vertical"
                Grid.ColumnSpan="3" 
                Margin="20" 
                HorizontalAlignment="Left" 
                VerticalAlignment="Bottom" 
                Value="0" 
                Maximum="180" 
                Height="300" />

 

TranslateTransform平移

TranslateTransform只有X和Y兩個屬性，分別代表X軸和Y軸上的平移距離。

public sealed class TranslateTransform : Transform
{
    public static readonly DependencyProperty XProperty;
    public static readonly DependencyProperty YProperty;
 
    public TranslateTransform();
    public TranslateTransform(double offsetX, double offsetY);
 
    public double X { get; set; }
    public double Y { get; set; }
    public override Matrix Value { get; }
 
    public TranslateTransform Clone();
    public TranslateTransform CloneCurrentValue();
 
}

 

案例：

<Border Grid.Column="0" 
                Width="120" 
                Height="120" 
                Background="LightBlue"
                HorizontalAlignment="Center" 
                VerticalAlignment="Center">
            <Border.RenderTransform>
                <TranslateTransform 
                               X="{Binding ElementName=sliderX,Path=Value}"
                               Y="{Binding ElementName=sliderY,Path=Value}"/>
            </Border.RenderTransform>
        </Border>
 
        <Border x:Name="border" 
                Grid.Column="1" 
                Background="LightGreen"
                Width="120" 
                Height="120" 
                HorizontalAlignment="Center" 
                VerticalAlignment="Center">
            <Border.RenderTransform>
                <TranslateTransform/>
            </Border.RenderTransform>
        </Border>
        <Slider x:Name="sliderX" 
                Grid.ColumnSpan="3" 
                Margin="40 25 20 15" 
                HorizontalAlignment="Left" 
                VerticalAlignment="Bottom" 
                Value="0" 
                Maximum="180" 
                Width="400" />
        <Slider x:Name="sliderY" 
                Orientation="Vertical"
                Grid.ColumnSpan="3" 
                Margin="20" 
                HorizontalAlignment="Left" 
                VerticalAlignment="Bottom" 
                Value="0" 
                Maximum="180" 
                Height="300" />

在這個例子中，左邊的border的TranslateTransform 對象的值直接綁定到slider，拖動兩個slider就可以控制border水平和垂直方向的位置。右邊的border則利用滑鼠按下、移動和抬起事件，初步實現了用滑鼠去移動位置的功能

public partial class MainWindow : Window
{
    public Point DownPoint { get; private set; } = new Point(0, 0);
    public bool IsMouseDown { get; private set; } = false;
    public MainWindow()
    {
        InitializeComponent();
    }
 
    private void Window_MouseMove(object sender, MouseEventArgs e)
    {
        if (!IsMouseDown) return;
 
        if (border.RenderTransform is TranslateTransform t)
        {
            Point point = e.GetPosition(this);
            t.X = (point.X - DownPoint.X);
            t.Y = (point.Y - DownPoint.Y);
        }
    }
 
    private void Window_MouseDown(object sender, MouseButtonEventArgs e)
    {
        IsMouseDown = true;
        DownPoint = e.GetPosition(this);
    }
 
    private void Window_MouseUp(object sender, MouseButtonEventArgs e)
    {
        IsMouseDown = false;
    }
}

 


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

-Advertisement-
Play Games
更多相關文章
  • 2.Prism框架ModuleAttribute、IOC擴展、功能註冊
    ModuleAttribute(按需延遲載入) ModuleAttribute 是 Prism 框架中用於標識模塊的屬性。通過使用 ModuleAttribute，可以將模塊與特定的模塊目錄進行關聯，從而使 Prism 應用程式能夠動態載入和初始化模塊。 在使用 WPF ModuleAttribut ...
  • 1.Prism框架介紹
    什麼是Prism： 1.WPF Prism是一個用於構建模塊化、可擴展和可重用的WPF應用程式的框架。它基於MVVM模式，提供了一種簡單且靈活的方式來管理複雜的WPF應用程式。 2.Prism框架提供了一些核心概念，包括模塊化開發、依賴註入、命令模式、導航和事件聚合等。它還提供了一些實用工具和類來簡 ...
  • MVVM-命令模式的實現與應用
    MVVM-命令模式的實現與應用 本文同時為b站WPF課程的筆記，相關示例代碼 綁定 這個其實前面已經講過一部分 使用{Binding}設置數據綁定，將控制項的屬性綁定到 ViewModel 的相應屬性。 比如說需要註意，在xaml中綁定的不再是UserName和Password了，而是loginMod ...
  • WPF魔法：輕鬆實現依賴註入與控制反轉提升代碼優雅性與可維護性
    概述：在WPF中實現依賴註入和控制反轉，通過定義介面、實現類，配置容器，實現組件解耦、提高可維護性。 什麼是依賴註入和控制反轉？ 依賴註入（Dependency Injection，DI）： 是一種設計模式，旨在減少組件之間的耦合度。通過依賴註入，對象不再自行創建或查找依賴對象，而是通過外部註入的方 ...
  • WPF界面魔法：探秘Template奇妙世界，個性化定製你的UI
    概述：WPF中的Template機製為界面定製提供了強大工具，包括控制項模板、ItemsPresenter、ItemsPanel、和ItemContainerStyle。通過這些功能，開發者能精確定義控制項外觀和佈局，個性化每個項的樣式，實現靈活而美觀的用戶界面。 WPF中各種Template功能用途： ...
  • 13.畫刷（Brush）
    在進行WPF界面設計時，我們需要在很多地方設置顏色屬性，比如元素的背景色、前景色以及邊框的顏色，還有形狀的內部填充和筆畫，這些顏色的設置在WPF中都以畫刷（Brush）的形式實現。比如最常用的畫刷就是SolidColorBrush，它表示一種純色。 public abstract class Bru ...
  • 使用C# asp.net core 同步資料庫
    代碼片段： 文末附鏈接。 using DataSync.Core; using Furion.Logging.Extensions; using Microsoft.Data.SqlClient; using Microsoft.Extensions.Logging; using System.Da ...
  • 【OpenVINO™】在 Windows 上使用 OpenVINO™ C# API 部署 Yolov8-obb 實現任意方向的目標檢測
    Ultralytics YOLOv8 基於深度學習和電腦視覺領域的尖端技術，在速度和準確性方面具有無與倫比的性能。其流線型設計使其適用於各種應用，並可輕鬆適應從邊緣設備到雲 API 等不同硬體平臺。YOLOv8 OBB 模型是YOLOv8系列模型最新推出的任意方向的目標檢測模型，可以檢測任意方向的... ...
一周排行
    -Advertisement-
    Play Games
  • 海康網路相機封裝庫分享
    最近做項目過程中，使用到了海康相機，官方只提供了C/C++的SDK，沒有搜尋到一個合適的封裝了的C#庫，故自己動手，簡單的封裝了一下，方便大家也方便自己使用和二次開發 ...
  • .NET 8 中利用 MediatR 實現高效消息傳遞
    前言 MediatR 是 .NET 下的一個實現消息傳遞的庫，輕量級、簡潔高效，用於實現進程內的消息傳遞機制。它基於中介者設計模式，支持請求/響應、命令、查詢、通知和事件等多種消息傳遞模式。通過泛型支持，MediatR 可以智能地調度不同類型的消息，非常適合用於領域事件處理。 在本文中，將通過一個簡 ...
  • .NET 7 + Vue 許可權管理系統 小白快速上手
    前言 今天給大家推薦一個超實用的開源項目《.NET 7 + Vue 許可權管理系統 小白快速上手》，DncZeus的願景就是做一個.NET 領域小白也能上手的簡易、通用的後臺許可權管理模板系統基礎框架。 不管你是技術小白還是技術大佬或者是不懂前端Vue 的新手，這個項目可以快速上手讓我們從0到1，搭建自 ...
  • CH01_WPF概述
    第1章：WPF概述 本章目標 瞭解Windows圖形演化 瞭解WPF高級API 瞭解解析度無關性概念 瞭解WPF體繫結構 瞭解WPF 4.5 WPF概述 ​ 歡迎使用 Windows Presentation Foundation (WPF) 桌面指南，這是一個與解析度無關的 UI 框架，使用基於矢 ...
  • .NET輔助角色服務入門簡介
    在日常開發中，並不是所有的功能都是用戶可見的，還在一些背後默默支持的程式，這些程式通常以服務的形式出現，統稱為輔助角色服務。今天以一個簡單的小例子，簡述基於.NET開發輔助角色服務的相關內容，僅供學習分享使用，如有不足之處，還請指正。 ...
  • CH03_佈局
    第3章：佈局 本章目標 理解佈局的原則 理解佈局的過程 理解佈局的容器 掌握各類佈局容器的運用 理解 WPF 中的佈局 WPF 佈局原則 ​ WPF 視窗只能包含單個元素。為在WPF 視窗中放置多個元素並創建更貼近實用的用戶男面，需要在視窗上放置一個容器，然後在這個容器中添加其他元素。造成這一限制的 ...
  • .NET 輕量化定時任務調度 FreeScheduler
    前言 在平時項目開發中，定時任務調度是一項重要的功能，廣泛應用於後臺作業、計劃任務和自動化腳本等模塊。 FreeScheduler 是一款輕量級且功能強大的定時任務調度庫，它支持臨時的延時任務和重覆迴圈任務（可持久化），能夠按秒、每天/每周/每月固定時間或自定義間隔執行（CRON 表達式）。 此外 ...
  • .NET8 Blazor 從入門到精通：（二）組件
    目錄Blazor 組件基礎路由導航參數組件參數路由參數生命周期事件狀態更改組件事件 Blazor 組件 基礎 新建一個項目命名為 MyComponents ，項目模板的交互類型選 Auto ，其它保持預設選項： 客戶端組件 (Auto/WebAssembly): 最終解決方案裡面會有兩個項目：伺服器 ...
  • WPF 怎麼把checkbox改成開關樣式
    先看一下效果吧： isChecked = false 的時候的效果 isChecked = true 的時候的效果 然後我們來實現一下這個效果吧 第一步：創建一個空的wpf項目； 第二步：在項目裡面添加一個checkbox <Grid> <CheckBox HorizontalAlignment=" ...
  • C# 使用特性的方式封裝報文
    在編寫上位機軟體時，需要經常處理命令拼接與其他設備進行通信，通常對不同的命令封裝成不同的方法，擴展稍許麻煩。 本次擬以特性方式實現，以兼顧維護性與擴展性。 思想： 一種命令對應一個類，其類中的各個屬性對應各個命令段，通過特性的方式，實現其在這包數據命令中的位置、大端或小端及其轉換為對應的目標類型； ...
所有分類