如何在 WPF 中繪制矩形？

Question

我需要在畫布上繪制矩形。 我知道怎么畫。 但是我沒搞定會畫上360度

例子。 藍色，淡紫色，綠色它們是同一個矩形，我更改了顏色，例如紅點是起始位置矩形。

編輯：

我的行動：

LeftMouseDown in x=50;y=50 (press) MoveMouse to 100;100 - 現在它適用於 MoveMouse 到 30;150 或 MoveMouse 到 10;10 - 現在我不能這樣做，但我需要它

Answer 1

除非你需要一個旋轉的矩形，否則我不會費心使用變換。 只需將 Left 和 Top 設置為最小 x 和 y，將寬度設置為 max-x，將高度設置為 maxy-y。

<Canvas x:Name="canvas" MouseDown="Canvas_MouseDown" MouseMove="Canvas_MouseMove" MouseUp="Canvas_MouseUp" Background="Transparent" />

private Point startPoint;
private Rectangle rect;

private void Canvas_MouseDown(object sender, MouseButtonEventArgs e)
{
    startPoint = e.GetPosition(canvas);

    rect = new Rectangle
    {
        Stroke = Brushes.LightBlue,
        StrokeThickness = 2
    };
    Canvas.SetLeft(rect,startPoint.X);
    Canvas.SetTop(rect,startPoint.Y);
    canvas.Children.Add(rect);
}

private void Canvas_MouseMove(object sender, MouseEventArgs e)
{
    if(e.LeftButton == MouseButtonState.Released || rect == null)
        return;

    var pos = e.GetPosition(canvas);

    var x = Math.Min(pos.X, startPoint.X);
    var y = Math.Min(pos.Y, startPoint.Y);

    var w = Math.Max(pos.X, startPoint.X) - x;
    var h = Math.Max(pos.Y, startPoint.Y) - y;

    rect.Width = w;
    rect.Height = h;

    Canvas.SetLeft(rect, x);
    Canvas.SetTop(rect, y);
}

private void Canvas_MouseUp(object sender, MouseButtonEventArgs e)
{
    rect = null;
}

Answer 2

腳步：

1. 在 MouseLeftButtonDown 上：如果您不旋轉：添加一個矩形，其左上角位於鼠標坐標處，其高度和寬度由頂角和鼠標坐標之間的差異計算。 將布爾值設置為 true 以指示您正在繪圖。 如果您正在旋轉：通過將旋轉布爾值設置為 false 來停止旋轉。

2. 在 MouseMove 上：檢查鼠標左鍵是否仍然按下並且您正在繪圖（來自上一步的布爾值）。 重新計算矩形的寬度和高度。 如果您正在旋轉，則通過計算釋放按鈕的點、RenderTransformOrigin 和鼠標當前位置之間的角度來調整矩形的旋轉。 （使用 Vector.AngleBetween()

3. 在 MouseLeftButtonUp 上：如果繪圖為 true，則將繪圖布爾值設置為 false，並將旋轉布爾值設置為 true。

此流程將允許您單擊（設置矩形的角），拖動並釋放以設置對角，移動鼠標以旋轉矩形並單擊以固定矩形。

使用 RenderTransform: 放置和旋轉矩形：這比在矩形上設置邊距或 Canvas.Left 更容易。

如果您需要幫助，請告訴我。

Answer 3

您實際上並不需要這樣旋轉 - 只需根據鼠標位置調整矩形的高度、寬度和左上角。

這對您來說可能是一個很好的起點：

XAML：

<Canvas x:Name="MyCanvas"
        Background="White"
        IsHitTestVisible="True"
        MouseDown="Canvas_MouseDown"
        MouseMove="Canvas_MouseMove"
        MouseUp="Canvas_MouseUp">
</Canvas>

背后的代碼：

    private bool _mouseDown = false;
    private Rectangle _current;
    private Point _initialPoint;

    private void Canvas_MouseDown(object sender, MouseButtonEventArgs e)
    {
        _mouseDown = (e.ButtonState == MouseButtonState.Pressed) 
                                     && (e.ChangedButton == MouseButton.Left);
        if (!_mouseDown)
            return;

        _current = new Rectangle();
        _initialPoint = e.MouseDevice.GetPosition(MyCanvas);
        _current.Fill = new SolidColorBrush(Colors.Blue);
        MyCanvas.Children.Add(_current);
    }
    private void Canvas_MouseMove(object sender, MouseEventArgs e)
    {
        if (!_mouseDown)
            return;

        Point position = e.MouseDevice.GetPosition(MyCanvas);
        _current.SetValue(Canvas.LeftProperty,
                                         Math.Min(position.X, _initialPoint.X));
        _current.SetValue(Canvas.TopProperty,
                                         Math.Min(position.Y, _initialPoint.Y));
        _current.Width = Math.Abs(position.X - _initialPoint.X);
        _current.Height = Math.Abs(position.Y - _initialPoint.Y);
          }
    private void Canvas_MouseUp(object sender, MouseButtonEventArgs e)
    {
        if (e.ChangedButton == MouseButton.Left)
            _mouseDown = false;
    }

Answer 4

如果有人感興趣，這是 UWP 的解決方案。 （基於@Kris 的回答）。

它適用於鼠標、觸摸和筆。

后面的代碼：

private Point startPoint;
private Rectangle rect;

private void canvas_PointerPressed(object sender, PointerRoutedEventArgs e)
{
    startPoint = e.GetCurrentPoint(canvas).Position;
    rect = new Rectangle()
    {
        Stroke = new SolidColorBrush(Colors.LightCoral),
        StrokeThickness = 5
    };

    Canvas.SetLeft(rect, startPoint.X);
    Canvas.SetTop(rect, startPoint.Y);
    canvas.Children.Add(rect);
}

private void canvas_PointerMoved(object sender, PointerRoutedEventArgs e)
{
    if (!e.Pointer.IsInContact || rect == null)
        return;

    var pos = e.GetCurrentPoint(canvas).Position;

    var x = Math.Min(pos.X, startPoint.X);
    var y = Math.Min(pos.Y, startPoint.Y);

    var w = Math.Max(pos.X, startPoint.X) - x;
    var h = Math.Max(pos.Y, startPoint.Y) - y;

    rect.Width = w;
    rect.Height = h;

    Canvas.SetLeft(rect, x);
    Canvas.SetTop(rect, y);
}

private void canvas_PointerReleased(object sender, PointerRoutedEventArgs e)
{
    rect = null;
}

XAML：

<Canvas x:Name="canvas" PointerPressed="canvas_PointerPressed" PointerMoved="canvas_PointerMoved" PointerReleased="canvas_PointerReleased" Background="Transparent" />

Answer 5

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;

namespace SilverlightApplication1
{
    public partial class MainPage : UserControl
    {
        public MainPage()
        {
            // Required to initialize variables
            InitializeComponent();

            mainCanvas.MouseLeftButtonDown+=new System.Windows.Input.MouseButtonEventHandler(MainPage_MouseLeftButtonDown);
            mainCanvas.MouseLeftButtonUp+=new System.Windows.Input.MouseButtonEventHandler(MainPage_MouseLeftButtonUp);
            mainCanvas.MouseMove+=new System.Windows.Input.MouseEventHandler(MainPage_MouseMove);

            SolidColorBrush myBrush = new SolidColorBrush(Colors.Green);

            _curRectangle.Rect.Stroke = myBrush;
            _curRectangle.Rect.StrokeThickness = 4;
            _curRectangle.Rect.Fill = myBrush;
        }

        private void Button_Click(object sender, System.Windows.RoutedEventArgs e)
        {
            // TODO: Add event handler implementation here.
        }

        private void elipse_Click(object sender, System.Windows.RoutedEventArgs e)
        {
            // TODO: Add event handler implementation here.
        }
        RealRect _curRectangle = null;
        private void MainPage_MouseLeftButtonDown(object sender, System.Windows.Input.MouseButtonEventArgs e)
        {
            _curRectangle = new RealRect((int)e.GetPosition(sender as Canvas).X, (int)e.GetPosition(sender as Canvas).Y, false);
            mainCanvas.Children.Insert(0, _curRectangle.Rect);
            _curRectangle.StartRect();
        }

        private void MainPage_MouseLeftButtonUp(object sender, System.Windows.Input.MouseButtonEventArgs e)
        {
            if (_curRectangle != null)
            {
                _curRectangle.ClearStartTemp();
                _curRectangle = null;
            }

        }

        private void MainPage_MouseMove(object sender, System.Windows.Input.MouseEventArgs e)
        {
            if (_curRectangle != null)
            {
                _curRectangle.EndX = (int)e.GetPosition(sender as Canvas).X;
                _curRectangle.EndY = (int)e.GetPosition(sender as Canvas).Y;
                _curRectangle.MakeReal();
            }

            //exampleRectangle.Rect.Width =  - Canvas.GetLeft(exampleRectangle.Rect);
            //exampleRectangle.Rect.Height =  - Canvas.GetTop(exampleRectangle.Rect);
        }
    }
}

工作班

using System.Windows.Shapes;
using System.Windows.Controls;
using System.Windows;
namespace SilverlightApplication1
{
    public struct Point
    {
        public static readonly Point Empty;
        public Point(int x, int y) { _x = x; _y = y; }
        int _x;

        public int X
        {
            get { return _x; }
            set { _x = value; }
        }
        int _y;

        public int Y
        {
            get { return _y; }
            set { _y = value; }
        }
    }
    public class RealRect
    {
        Rectangle mRect = new Rectangle();

        #region Class Local Variables

        private SilverlightApplication1.Point mStart;

        public SilverlightApplication1.Point MStart
        {
            get { return mStart; }
            set { mStart = value; }
        }
        private SilverlightApplication1.Point mEnd;
        private SilverlightApplication1.Point mRealStart;
        private SilverlightApplication1.Point mRealEnd;
        private System.Windows.Size mRealSize;
        private bool isStatus = false;

        public bool IsStatus
        {
            get { return isStatus; }
            set { isStatus = value; }
        }
        private SilverlightApplication1.Point mTempPoint;

        #endregion


        public RealRect(int x, int y, bool start)
        {
            mTempPoint = new SilverlightApplication1.Point(x, y);
            IsStatus = false;
            mEnd = Point.Empty;
            mRealEnd = Point.Empty;
        }
        public void ClearStartTemp()
        {
            IsStatus = false;
            mTempPoint = Point.Empty;
        }
        public void StartRect()
        {
            IsStatus = true;
            mStart = mTempPoint;
            mRealStart = mTempPoint;

        }


        /// <summary>
        /// Ending X Value of rectangle
        /// </summary>
        public int EndX
        {
            set { mEnd.X = value; }
        }

        /// <summary>
        /// Ending Y Value of rectangle
        /// </summary>
        public int EndY
        {
            set { mEnd.Y = value; }
        }

        /// <summary>
        /// Get the corrected rectangle
        /// </summary>
        public Rectangle Rect
        {
            get
            {
                MakeReal();

                return mRect;

            }
        }

        public void MakeReal()
        {
            //Started top left, ended bottom right
            if (mEnd.X > mStart.X && mEnd.Y > mStart.Y)
            {
                mRealStart = mStart;
                mRealEnd = mEnd;
                mRealSize = new Size(mRealEnd.X - mRealStart.X, mRealEnd.Y - mRealStart.Y);
               // return;
            }

            //Started bottom right, ended top left
            else if (mEnd.X < mStart.X && mEnd.Y < mStart.Y)
            {
                mRealEnd = mStart;
                mRealStart = mEnd;
                mRealSize = new Size(mRealEnd.X - mRealStart.X, mRealEnd.Y - mRealStart.Y);
               // return;
            }

            //Started top right left, ended bottom left
            else if (mEnd.X < mStart.X && mEnd.Y > mStart.Y)
            {
                mRealStart.X = mEnd.X;
                mRealStart.Y = mStart.Y;
                mRealEnd.X = mStart.X;
                mRealEnd.Y = mEnd.Y;
                mRealSize = new Size(mRealEnd.X - mRealStart.X, mRealEnd.Y - mRealStart.Y);
               // return;
            }

            //Started bottom left, ended top right
            else if (mEnd.X > mStart.X && mEnd.Y < mStart.Y)
            {
                mRealStart.X = mStart.X;
                mRealStart.Y = mEnd.Y;
                mRealEnd.X = mEnd.X;
                mRealEnd.Y = mStart.Y;
                mRealSize = new Size(mRealEnd.X - mRealStart.X, mRealEnd.Y - mRealStart.Y);
               // return;
            }
            Canvas.SetLeft(mRect, mRealStart.X);
            Canvas.SetTop(mRect, mRealStart.Y);
            mRect.Width = mRealSize.Width;
            mRect.Height = mRealSize.Height;
        }
    }


}

Answer 6

<Polygon Points="25,0 5,30 45,30"
         Fill="Red"
         Stroke="Black"
         StrokeThickness="2" />

Answer 7

也許我錯了，但我認為這可以工作：

      <Rectangle Width="200" Height="50" Fill="Black">
        <Rectangle.RenderTransform>
            <RotateTransform CenterX="0" CenterY="0" Angle="45"></RotateTransform>
        </Rectangle.RenderTransform>
    </Rectangle>