C#/WPF에서 줄에 화살표 기호를 표시하는 방법?

Question

C#/WPF 응용 프로그램의 새로운 그래픽입니다.

나는 마우스로 WPF 응용 프로그램을 만들고 런타임시 다양한 객체를 그리는 데 Canvas를 사용하고 있습니다. 이 화살표 기호

(A) ----> ---- (B)

: I는 (아래와 같이) 화살표 선 그리기 문제에 직면하고 선의 세 번째 부분에 있어야하며 (항상 움직이는 마우스를 가리켜 야합니다). 예를 들어, "A"지점에서 마우스를 클릭하고 "B"지점으로 이동하면 화살표 기호가 위에 표시된 것처럼 "B"를 향해야합니다.

도움이 될 것입니다. 당신이 원하는 화살표의 이미지를 사용하여 내가 이런 짓을 했을까

최고 감사합니다, 달

Answer 1

귀하의 모든 도움과 지원에 감사드립니다.나는 아래 ::

private static Shape DrawLinkArrow(Point p1, Point p2) 
{ 
    GeometryGroup lineGroup = new GeometryGroup(); 
    double theta = Math.Atan2((p2.Y - p1.Y), (p2.X - p1.X)) * 180/Math.PI; 

    PathGeometry pathGeometry = new PathGeometry(); 
    PathFigure pathFigure = new PathFigure(); 
    Point p = new Point(p1.X + ((p2.X - p1.X)/1.35), p1.Y + ((p2.Y - p1.Y)/1.35)); 
    pathFigure.StartPoint = p; 

    Point lpoint = new Point(p.X + 6, p.Y + 15); 
    Point rpoint = new Point(p.X - 6, p.Y + 15); 
    LineSegment seg1 = new LineSegment(); 
    seg1.Point = lpoint; 
    pathFigure.Segments.Add(seg1); 

    LineSegment seg2 = new LineSegment(); 
    seg2.Point = rpoint; 
    pathFigure.Segments.Add(seg2); 

    LineSegment seg3 = new LineSegment(); 
    seg3.Point = p; 
    pathFigure.Segments.Add(seg3); 

    pathGeometry.Figures.Add(pathFigure); 
    RotateTransform transform = new RotateTransform(); 
    transform.Angle = theta + 90; 
    transform.CenterX = p.X; 
    transform.CenterY = p.Y; 
    pathGeometry.Transform = transform; 
    lineGroup.Children.Add(pathGeometry); 

    LineGeometry connectorGeometry = new LineGeometry(); 
    connectorGeometry.StartPoint = p1; 
    connectorGeometry.EndPoint = p2; 
    lineGroup.Children.Add(connectorGeometry); 
    System.Windows.Shapes.Path path = new System.Windows.Shapes.Path(); 
    path.Data = lineGroup; 
    path.StrokeThickness = 2; 
    path.Stroke = path.Fill = Brushes.Black; 

    return path; 
} 

감사로

달

Answer 2

. 빠른 포토샵 .jpg 또는 .png를 사용하여 기본 화살표 이미지에 사용하고 점 A와 B 사이의 거리를 기준으로 크기를 조절합니다. 회전은 좀 더 복잡하지만 기본 삼각법 과정을 택한 경우 여전히 쉽습니다.

다른 방법은 픽셀을 그려 보는 것입니다. 일반적으로이 작업은 훨씬 어려우며이 시나리오에서 화살표 방향을 결정하는 코드는 훨씬 더 어렵습니다. 다시 말하지만 위의 방법을 제안합니다.

Answer 3

경로 지오메트리를 사용하는 것이 좋습니다. 이 샘플을 보겠습니다. (이미 가지고있는 것일 수도 있지만) 귀하와 비슷한 요구 사항을 가지고 있습니다. http://www.codeproject.com/KB/WPF/WPFDiagramDesigner_Part4.aspx

Answer 4

화살표를 구성하는 선분을 그리려면 Line 클래스를 사용할 수 있습니다. 예를 들어, A에서 B까지 한 개의 긴 선과 B의쪽으로 향하는 머리를 그리는 두 개의 작은 각진 선을 그릴 수 있습니다.

적절한 선 위치를 찾는 데 관련된 수학은 너무 어려워서는 안됩니다. 머리 부분에 대해서는 두 부분의 크기를 정하고 B 부분을 30도 정도 비스듬히 당깁니다. 문제가 있으면 알려주세요.

이미지 기술의 문제점은 헤드가 화살표 길이만큼 늘어날 것입니다. 머리 부분과 나머지 부분 사이에서 비트 맵을 나누어야합니다.

Answer 5

당신은 화살표를 대표하는 Canvas 컨트롤을 사용할 수 있습니다,

<Canvas Margin="5" Width="60" Height="20">    
    <Line X1="10" Y1="10" X2="50" Y2="10" Stroke="Black" 
        StrokeThickness="2" StrokeDashCap="Round" StrokeEndLineCap="Round" StrokeStartLineCap="Round"/> 
    <Line X1="35" Y1="10" X2="30" Y2="5" Stroke="Black" 
        StrokeThickness="2" StrokeDashCap="Round" StrokeEndLineCap="Round" StrokeStartLineCap="Round"/> 
    <Line X1="35" Y1="10" X2="30" Y2="15" Stroke="Black" 
        StrokeThickness="2" StrokeDashCap="Round" StrokeEndLineCap="Round" StrokeStartLineCap="Round"/> 
</Canvas> 

런타임에이를 만들려면 클래스 뒤에있는 코드에서 Canvas을 만들 수 있습니다.

위의 샘플은 실제로 화살표 기호의 세 번째 부분에 있어야합니다. 규칙에 따라 줄의 좌표를 적절히 수정해야 할 수도 있습니다.

Answer 6

를 내 문제를 해결 한 난 그냥이 만든 Expression Blend를 4의 화살표 모양으로 두 가지를 그린 : 대한

 <Window 
     ... 
     xmlns:ed="http://schemas.microsoft.com/expression/2010/drawing" ... /> 

    <ed:BlockArrow Height="8" Margin="119,181,169,0" Orientation="Left" Stroke="Black" VerticalAlignment="Top" /> 
    <ed:LineArrow Fill="#FFF4F4F5" Height="1" Margin="119,117,169,0" Stroke="#FF027602" VerticalAlignment="Top" BendAmount="0" StartCorner="TopRight" StrokeThickness="2"/>