WPF: как нарисовать круг и перетащить его?

Я новичок в WPF.

Я хочу нарисуйте маленький кружок на холсте, когда я нажмите кнопку мыши и уметь перетащите его вокруг гладко.

Как я могу это сделать?

6
c# circle drag drawing wpf

3 ответов

" Что бы это ни было " имеет значение, потому что размещение элементов в WPF сильно зависит от родительского контейнера. Легко переместить что-то 20px вправо внутри холста (просто добавьте к холсту.Слева), но это намного сложнее сделать в сетке (вам нужно иметь дело со столбцом, столбцом и маржей).

есть статья проекта кода, описывающая, как перетаскивать элементы внутри холста:перетаскивание элементов в холст

Если вы хотите переместить только этот круг и не другие элементы управления в существующем Canvas/Grid; я предлагаю вам использовать DragCanvas (из статьи) в качестве наложения на обычный Canvas / Grid.

Что касается части "нарисовать круг": просто используйте эллипс в качестве элемента внутри DragCanvas.

3

Я бы определил холст и эллипс в файле 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>

обратите внимание, что 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

    }
2

я смог сделать все это в коде, но не смог переместить элемент эллипса, который был дочерним элементом моего холста.

Я скопировал код ниже, чтобы вы могли его воспроизвести.
Сначала создайте приложение WPF под названием WPFExample и убедитесь, что ваша основная форма имеет следующее:

<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>

Далее добавьте код в главной форме:

       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));
        }

очевидно, сосредоточьтесь на Draw () метод. Заметьте, что я каждый раз очищаю холст. Тогда Я нарисуйте новый эллипс в расположении мыши в виде черного круга.

теперь каждый раз, когда вы перемещаете мышь, черный круг стирается с холста, создается снова, а затем рисуется в новом месте. Вот снимок приложения-когда вы запустите его и переместите мышь, черный круг будет перерисован везде, где вы перемещаете мышь, как будто вы перетаскиваете его. black circle redraw

красный эллипс был проблематичным для меня, и я никогда не мог его перерисовать и не удалось удалить его из списка детей и добавить его снова для этого быстрого примера.

0