如何在 WPF 中增加形状的厚度

Question

我正在尝试使用 Canvas 在 WPF 中创建一个绘画应用程序。我想在绘图时增加形状的厚度，所以我尝试增加 StrokeThickness。

这就是我想要的样子：

这就是我得到的：

如您所见，轮廓仅在边界内延伸。我怎样才能让它在两边都延伸？

这是我的代码：

在 MouseDown 事件中：

 Rectangle rect = new Rectangle();
 rect.Stroke = _color;
 rect.StrokeThickness = _size;
 Canvas.SetLeft(rect, _startPoint.X);
 Canvas.SetTop(rect, _startPoint.Y);
 cv_PaintBoard.Children.Add(rect);
 isDrawing = true;

在 MouseMove 事件中：

if (isDrawing == true && e.LeftButton == MouseButtonState.Pressed)
{
    Canvas canvas = (Canvas)sender;

    Rectangle rect = canvas.Children.OfType<Rectangle>().LastOrDefault();

    if (rect != null)
    {
        Point endPoint = e.GetPosition((IInputElement)sender);
        Point startPoint = new Point(
            Math.Min(endPoint.X, _startPoint.X),
            Math.Min(endPoint.Y, _startPoint.Y)
            );

        rect.Width = Math.Max(endPoint.X, _startPoint.X) - startPoint.X;
        rect.Height = Math.Max(endPoint.Y, _startPoint.Y) - startPoint.Y;

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

Answer 1

您还需要更新宽度/高度和左侧/顶部以满足您的特定需求。

以下示例演示了您的需求。如果你没问题，请告诉我。

MainWindow.xaml

<Window x:Class="WpfDrawing.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="MainWindow" Height="447.368" Width="606.579">
<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="13*"/>
        <RowDefinition Height="7*"/>
    </Grid.RowDefinitions>
    <Canvas Grid.RowSpan="1">
        <Rectangle x:Name="Rect1" Fill="Transparent" HorizontalAlignment="Left" Height="70" Canvas.Left="248" Canvas.Top="104" Stroke="Black" Width="94" Opacity="0.5" />
        <Rectangle x:Name="Rect2" Fill="#FF52E03C" HorizontalAlignment="Left" Height="70" Canvas.Left="248" Canvas.Top="104" Stroke="Black" Width="94" Opacity="0.5" />

    </Canvas>
    <TextBox x:Name="tbThickness" HorizontalAlignment="Left" Height="23" Margin="84,27,0,0" Grid.Row="1" TextWrapping="Wrap" Text="5" VerticalAlignment="Top" Width="120"/>
    <Button Content="Button" HorizontalAlignment="Left" Margin="237,28,0,0" Grid.Row="1" VerticalAlignment="Top" Width="75" Click="Button_Click"/>
</Grid>
</Window>

MainWindow.xaml.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;

namespace WpfDrawing
{
    /// <summary>
    /// Interaction logic for MainWindow.xaml
    /// </summary>
    public partial class MainWindow : Window
    {
        double designWidth;
        double designHeight;

        double designLeft, designTop;

        public MainWindow()
        {
            InitializeComponent();

            designWidth = Rect2.Width;
            designHeight = Rect2.Height;

            designLeft = Canvas.GetLeft(Rect2);
            designTop = Canvas.GetTop(Rect2);
        }       

        private void Button_Click(object sender, RoutedEventArgs e)
        {
            Rect2.StrokeThickness = double.Parse(tbThickness.Text);

            Canvas.SetLeft(Rect2,designLeft - (Rect2.StrokeThickness / 2));
            Canvas.SetTop(Rect2, designTop - (Rect2.StrokeThickness / 2));                        

            Rect2.Width = designWidth + Rect2.StrokeThickness;
            Rect2.Height = designHeight + Rect2.StrokeThickness;

        }
    }
}

Answer 2

无需进行任何计算即可将矩形的大小校正为其笔划粗细的一半。

只需将 Path 控件与 RectangleGeometries 一起使用，而不是 Rectangle 控件：

private Brush stroke = Brushes.Red;
private double strokeThickness = 10;
private Path currentPath;
private Point startPoint;

private void Canvas_MouseDown(object sender, MouseButtonEventArgs e)
{
    var canvas = (Canvas)sender;
    if (canvas.CaptureMouse())
    {
        startPoint = e.GetPosition(canvas);
        currentPath = new Path
        {
            Data = new RectangleGeometry(new Rect(startPoint, startPoint)),
            Stroke = stroke,
            StrokeThickness = strokeThickness
        };
        canvas.Children.Add(currentPath);
    }
}

private void Canvas_MouseMove(object sender, MouseEventArgs e)
{
    if (currentPath != null)
    {
        ((RectangleGeometry)currentPath.Data).Rect
                = new Rect(startPoint, e.GetPosition((UIElement)sender));
    }
}

private void Canvas_MouseUp(object sender, MouseButtonEventArgs e)
{
    ((UIElement)sender).ReleaseMouseCapture();
    currentPath = null;
}