[WPF] Canvas Draw Line WPF 2017. 5. 11. 15:56

정말 오랜만에 포스팅을 해 보는 듯..

 

태블릿 환경과 동일하게 CS 프로그램을 구현하던 중..

 

Canvas를 쓸 일이 있어서 처음으로 WPF를 적용하다가 멘붕이 왔다..

 

MouseMove를 통하여 Canvas에 그림을 그리는...

 

단.. 다른 컴포넌트들로 구성된 화면 상단에 보여지는...

 

암만 그려도 이상하게 나오거나 화면이 표출 되지 않았다..

 

결국 해결책은...

 

화면에 표기 되는 UserControl 위에 Canvas를 올리고

 

<Canvas.Background>
            <VisualBrush TileMode="Tile"
                Viewport="0,0,0,0" ViewportUnits="Absolute"
                Viewbox="0,0,0,0" ViewboxUnits="Absolute">
            </VisualBrush>
</Canvas.Background>

 

이 부분을 넣어 봤다.

 

모눈 형태 화면이 보일지 해서 확인을 하는 용도로 썼는데 어라?

 

그림이 그려진다.

 

근데 다시 저걸 지우고 하니 아래 코드가 먹지 않았다.

 


        Point currentPoint = new Point();

        SolidColorBrush brush = new SolidColorBrush(Colors.Blue);

        public UserControl1()
        {
            InitializeComponent();
        }

        private void DrawCanvs_MouseMove(object sender, MouseEventArgs e)
        {
            if (e.LeftButton == MouseButtonState.Pressed)
            {
                Line newLine = new Line();
                newLine.Stroke = brush;
                newLine.X1 = currentPoint.X;
                newLine.Y1 = currentPoint.Y;
                newLine.X2 = e.GetPosition(canvas1).X;
                newLine.Y2 = e.GetPosition(canvas1).Y;
                newLine.StrokeThickness = 3;
                canvas1.Children.Add(newLine);
                currentPoint = e.GetPosition(canvas1);
            }
        }

        private void DrawCanvs_MouseDown(object sender, MouseButtonEventArgs e)
        {
            if (e.LeftButton == MouseButtonState.Pressed)
            {
                currentPoint = e.GetPosition(canvas1);
            }
        }

 

결국 스스로 얻은 결론은.. BackGround 설정이 없다면 제대로 표시되지 않는걸로 잠정 결론을 내렸다..

 

불론 Canvas에만 그리기라면 위 코드는 정상적으로 동작한다.

 

WPF 메인->컨트롤->그림 그리기 할 경우에

 

Canvas를 올리고 그 위에 컨트롤들을 올리는 형태로 배치를 하면..

 

 

이런 식으로 그리기가 가능하다.

 

자바에서 Canvas 생각이 나서 구현을 한건데..

 

C#에서 Transform을 구현하고 하면.. 그 아래 컨트롤에 접근 못해 결국 WPF로 하긴 했는데..

 

아... 남은 작업들을 어찌할꼬 ㅠㅠ

[WPF] Canvs WPF 2012. 3. 19. 14:54
캔버스는 일종의 모눈종이라고 생각하면 될 것이다. 아니면 아무런 설정이 되지 않는 하나의 종이라 생각 하면 될 것이다.

이를 사용 할 때는 다음과 같이 하나씩 그 자체의 좌표를 잡아줘야한다.

<Image Canvas.Left="39" Canvas.Top="79" Height="150" Name="image1" Stretch="Fill" Width="200" Source="/WpfApplication11;component/Penguins.jpg" />

그리고 이미지의 형태를 조절 할 때는 Stretch 속성을 유용하게 이용하면 될 것이다.