WPF : 원을 그리고 그 주위를 끌는 방법은 무엇입니까?

Question

저는 WPF를 처음 사용합니다. I 클릭 마우스하고 드래그 주위 원활 할 수있을 때

나는 캔버스에 작은 원을 그리려.

어떻게하면됩니까?

Answer 1

WPF에서 요소 배치가 상위 컨테이너에 크게 의존하기 때문에 "무엇이든지간에"중요합니다. Canvas 내부에서 오른쪽으로 20px 이동 (Canvas.Left에 추가)하기가 쉽지만 Grid에서는 Column, ColumnSpan 및 Margin을 처리해야합니다.

캔버스 내부 요소를 드래그하는 방법을 설명하는 코드 프로젝트 기사가있다 : Dragging Elements in a Canvas

기존 캔버스/그리드에 그냥 원과 다른없는 컨트롤을 이동하려면, DragCanvas (기사에서)를 일반 Canvas/Grid 위에 오버레이로 사용하는 것이 좋습니다.

'원 그리기'부분은 DragCanvas에서 요소로 타원을 사용하기 만하면됩니다.

Answer 2

나는 캔버스와 XAML 파일에 타원을 정의하는 것입니다 :

<Canvas Background="White" Name="canvas" Width="950" Height="500" MouseDown="MouseMove"> 
    <Ellipse Name="bola" Canvas.Left="130" Canvas.Top="79" Width="50" Height="50" Fill="Green" /> 
</Canvas> 

사항은 캔버스는 속성 MouseDown="MouseMoveFunction" 있습니다. 캔버스를 클릭 할 때마다 해당 이벤트 핸들러가 호출됩니다. 마우스가 움직이면서 움직이기를 원한다면 MouseMove="MouseMoveFunction"

마우스를 움직일 때마다 타원의 위치를 ​​업데이트하면됩니다. 다음 코드는 마우스 이벤트에서 호출되는 함수에 간다 :

private void MouseMove(object sender, MouseEventArgs e) 
    { 
     Point punto = e.GetPosition(canvas); 
     int mouseX = (int)punto.X; 
     int mouseY = (int)punto.Y; 
     bola.SetValue(Canvas.LeftProperty, (double)mouseX); //set x 
     bola.SetValue(Canvas.TopProperty, (double)mouseY); //set y 

    } 

Answer 3

내가 모든 코드에서이 작업을 수행 할 수 있지만, 내 캔버스의 자식 요소였다 타원 요소를 이동 할 수 없습니다.

아래 코드를 복사하여 재현 할 수 있도록했습니다. 그리기에 초점

 private void Draw(Point m) 
     { 
      MainCanvas.Children.Clear(); 

      int mX = (int)m.X; 
      int mY = (int)m.Y; 
      Ellipse el = new Ellipse(); 
      el.Width = 15; 
      el.Height = 15; 
      el.SetValue(Canvas.LeftProperty, (Double)mX); 
      el.SetValue(Canvas.TopProperty, (Double)mY); 
      el.Fill = Brushes.Black; 

      MainCanvas.Children.Add(el); 
     } 

     private void Canvas_MouseDown(object sender, MouseButtonEventArgs e) 
     { 
      Draw(e.GetPosition(MainCanvas)); 
     } 

     private void MainCanvas_MouseMove(object sender, MouseEventArgs e) 
     { 
      Draw(e.GetPosition(MainCanvas)); 
     } 

을 분명히 :

<Window x:Class="WPFExample.MainWindow" 
     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
     xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
     xmlns:local="clr-namespace:WPFExample" 
     mc:Ignorable="d" 
     Title="MainWindow" Height="350" Width="525" Background="LightGray"> 
    <Grid> 
     <Canvas HorizontalAlignment="Left" Name="MainCanvas" 
       Height="300" Width="500" Margin="5,5,5,5" VerticalAlignment="Top" Background="LightYellow" MouseDown="Canvas_MouseDown" MouseMove="MainCanvas_MouseMove" 
       /> 
     <Ellipse Name="post" Width="50" Height="50" Fill="Red" Margin="5,5,5,5" /> 

    </Grid> 
</Window> 

다음으로, 기본 폼에 코드를 추가 :
먼저 기본 형태는 다음이 WPFExample라는 WPF 응용 프로그램을 작성하고 있는지 확인() 방법. 매번 캔버스를 지 웁니다. 그런 다음 마우스 위치에 새 타원을 검은 색 원으로 그립니다.

마우스를 움직일 때마다 검은 원이 캔버스에서 지워지고 다시 생성 된 다음 새 위치에 그려집니다. 다음은 앱의 스냅 샷입니다. 앱을 실행하고 마우스를 움직이면 마우스를 움직일 때마다 드래그하는 것처럼 검은 색 원이 다시 그려집니다.

빨간색 타원은 나에게 문제가있어 다시 그리지 못해서 어린이 목록에서 제거하지 못하고이 빠른 예제를 위해 다시 추가 할 수 없습니다.