Wpfキャンバスに矩形を描画することはできません

Question

マウスをドラッグして実行時にWpfキャンバスに矩形を描く機能を実装しています。現在、矩形を描くことができます私は、左上隅から左下にマウスをドラッグして、私は左下隅からtop.Belowまでマウスをドラッグすると四角形が表示されていないときに私が使用していますXAMLコードです：

以下

<Canvas x:Name="CanvasContainer" MouseLeftButtonDown="CanvasContainer_MouseLeftButtonDown" MouseLeftButtonUp="CanvasContainer_MouseLeftButtonUp" MouseMove="CanvasContainer_MouseMove" > 
    <Rectangle x:Name="RectangleMarker" Canvas.Left="0" Stroke="Red" Width="0" Height="0" Panel.ZIndex="1"></Rectangle> 
    <Line x:Name="LineMarker" Stroke="Red" X1="0" Y1="0" X2="0" Y2="0"></Line> 
    <Image Canvas.Left="0" Canvas.Top="0" x:Name="PdfImage" RenderTransformOrigin="0.5,0.5" MouseWheel="PdfImage_MouseWheel" ClipToBounds="True" Panel.ZIndex="0"> 
     <Image.LayoutTransform> 
      <ScaleTransform ScaleX="1" ScaleY="1" CenterX="0.5" CenterY="0.5" /> 
     </Image.LayoutTransform> 
    </Image> 
</Canvas> 

はイベントですマウスの位置に応じて矩形の位置を更新する処理。より良い

private void CanvasContainer_MouseLeftButtonDown(object sender, MouseButtonEventArgs e) 
{ 
    try 
    {   
      Point startPoint = Mouse.GetPosition(CanvasContainer); 
      Canvas.SetLeft(RectangleMarker, startPoint.X); 
      Canvas.SetTop(RectangleMarker,startPoint.Y);  
    } 
    catch (Exception ex) 
    { 

    } 
} 

private void CanvasContainer_MouseMove(object sender, MouseEventArgs e) 
{ 
    try 
    { 
     if (e.LeftButton == MouseButtonState.Pressed) 
     {    
       Point endPoint = Mouse.GetPosition(CanvasContainer); 
       Point startPoint = new Point((double)RectangleMarker.GetValue(Canvas.LeftProperty), (double)RectangleMarker.GetValue(Canvas.TopProperty)); 
       double x = Math.Min(startPoint.X, endPoint.X); 
       double y = Math.Min(startPoint.Y, endPoint.Y); 
       double width = endPoint.X - startPoint.X; 
       double height = endPoint.Y - startPoint.Y; 

       if (width < 0) 
       { 
        x = startPoint.X + width; 
       } 
       if (height < 0) 
       { 
        y = startPoint.Y + height; 
       } 
       RectangleMarker.Width = Math.Abs(width); 
       RectangleMarker.Height = Math.Abs(height); 
       if (x!=startPoint.X) 
       { 
        Canvas.SetLeft(RectangleMarker, x); 
       } 
       else if(y!=startPoint.Y) 
       { 
        Canvas.SetTop(RectangleMarker, y); 
       }     
     }   
    } 
    catch (Exception ex) 
    { 

    } 
} 

Answer 1

たRectangleGeometryとパスを使用します。後ろの

<Canvas Background="Transparent" 
     MouseLeftButtonDown="CanvasContainer_MouseLeftButtonDown" 
     MouseLeftButtonUp="CanvasContainer_MouseLeftButtonUp" 
     MouseMove="CanvasContainer_MouseMove"> 
    <Path Stroke="Red"> 
     <Path.Data> 
      <RectangleGeometry x:Name="selectionRect"/> 
     </Path.Data> 
    </Path> 
</Canvas> 

コード：

private Point? startPoint; 

private void CanvasContainer_MouseLeftButtonDown(object sender, MouseButtonEventArgs e) 
{ 
    var element = (UIElement)sender; 
    element.CaptureMouse(); 
    startPoint = e.GetPosition(element); 
} 

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

private void CanvasContainer_MouseMove(object sender, MouseEventArgs e) 
{ 
    if (startPoint.HasValue) 
    { 
     selectionRect.Rect = new Rect(
      startPoint.Value, e.GetPosition((IInputElement)sender)); 
    } 
} 

Answer 2

私はあなたの問題はがを描くのではなく、はをリサイズコメントで先に述べたように。

長方形のサイズを変更する場合、4つの方向、4辺、4つの隅があります。だからこそ複雑です。

最も簡単な方法は、単に開始マウスの位置を覚えているし、それらの間に四角形を描画新しい位置は、ここで確認することです。明らかに、新しいマウスの位置は、マウスが開始点に対してどの方向に動かされたかに応じて、いずれかのコーナーになる可能性があります。

ので：

Point _start; 

void CanvasContainer_MouseLeftButtonDown(object sender, MouseButtonEventArgs e) => 
    _start = Mouse.GetPosition(CanvasContainer); 

void CanvasContainer_MouseMove(object sender, MouseEventArgs e) 
{ 
    if (e.LeftButton == MouseButtonState.Pressed) 
    { 
     var mouse = Mouse.GetPosition(CanvasContainer); 
     Canvas.SetLeft(RectangleMarker, _start.X > mouse.X ? mouse.X : _start.X); 
     Canvas.SetTop(RectangleMarker, _start.Y > mouse.Y ? mouse.Y : _start.Y); 
     RectangleMarker.Width = Math.Abs(mouse.X - _start.X); 
     RectangleMarker.Height = Math.Abs(mouse.Y - _start.Y); 
    } 
} 

Math.Abs位置を変更するために、我々はまだ、どの点を決定起動したり、新しいマウス条件付きチェックを必要とする一方で、左上隅で、正または負の変化のためにリサイズ処理されます。

デモ：