2011-03-20 4 views
2

안녕 얘들 아, WPF의 경로 모양으로 놀아 왔지만 약간의 행동으로 약간 짜증났다. 특히 경로는 내가 원하는대로 크기가 조정되지 않습니다. 아래 이미지를 보면, 내가 원하는 것은 전체 패스가 흰색 사각형 (Path 컨트롤의 경계를 나타냄) 내에있는 것입니다. 그러나 호가 약간 늘어져 있습니다. 패스 모양 자체를 그리는 데 사용 된 점에 따라 패스 크기 자체가 실제로 그려지는 모양이 아닌 때문입니다.WPF 경로 크기 조정 문제

내 질문은 : 누구든지 이것을 극복하는 방법을 알고 있습니까? 경로의 크기를 명시 적으로 설정하는 것 외에도 말입니다. 모양을 만드는 데 사용 된 점이 아닌 모양에 따라 크기 자체에 대한 경로를 얻으려면 간과 한 옵션이 있습니까? 어떤 답변을 주셔서 감사합니다.

1) 먼저, 매우 자세한 방법으로 기록 된 데이터 바인딩()를 사용하여 :

<UserControl x:Class="OrbitTrapWpf.LineSegmentTool" 
     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
     xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
     xmlns:local="clr-namespace:OrbitTrapWpf" 
     mc:Ignorable="d" 
     d:DesignHeight="300" d:DesignWidth="300" 
     x:Name="Root" Background="White"> 
<UserControl.Resources> 
    <local:ArcSizeConverter x:Key="ArcSizeConverter"/> 
    <local:ArcPointConverter x:Key="ArcPointConverter"/> 
</UserControl.Resources> 
<Path Name="path" Stroke="Black"> 
    <Path.Data> 
    <PathGeometry> 
     <PathGeometry.Figures> 
     <PathFigureCollection> 
      <PathFigure IsClosed="True"> 
      <PathFigure.StartPoint> 
       <Binding ElementName="Root" Path="point0"></Binding> 
      </PathFigure.StartPoint> 
      <PathFigure.Segments> 
       <PathSegmentCollection> 
       <ArcSegment SweepDirection="Counterclockwise" > 
        <ArcSegment.Size> 
        <Binding ElementName="Root" Path="Radius" Converter="{StaticResource ArcSizeConverter}"/> 
        </ArcSegment.Size> 
        <ArcSegment.Point> 
        <Binding ElementName="Root" Path="point1" /> 
        </ArcSegment.Point> 
       </ArcSegment> 
       <LineSegment> 
        <LineSegment.Point> 
        <Binding ElementName="Root" Path="point2" /> 
        </LineSegment.Point> 
       </LineSegment> 
       <ArcSegment SweepDirection="Counterclockwise"> 
        <ArcSegment.Size> 
        <Binding ElementName="Root" Path="Radius" Converter="{StaticResource ArcSizeConverter}"/> 
        </ArcSegment.Size> 
        <ArcSegment.Point> 
        <Binding ElementName="Root" Path="point3" /> 
        </ArcSegment.Point> 
       </ArcSegment> 
       </PathSegmentCollection> 
      </PathFigure.Segments> 
      </PathFigure> 
     </PathFigureCollection> 
     </PathGeometry.Figures> 
    </PathGeometry> 
    </Path.Data> 
</Path> 

My path problem with data bindingsMy path problem with mini-language


여기 (해야한다 무엇을) 해당 코드의 두 가지 버전의

2) 미니 언어를 사용하는이 사람 :

<UserControl x:Class="OrbitTrapWpf.LineSegmentTool" 
     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
     xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
     xmlns:local="clr-namespace:OrbitTrapWpf" 
     mc:Ignorable="d" 
     d:DesignHeight="300" d:DesignWidth="300" 
     x:Name="Root" Background="White"> 
<UserControl.Resources> 
    <local:ArcSizeConverter x:Key="ArcSizeConverter"/> 
    <local:ArcPointConverter x:Key="ArcPointConverter"/> 
</UserControl.Resources> 
    <Grid Name="grid"> 
    <Path Name="path" Stroke="Black" Data="M 0.146446609406726,1.14644660940673 A 0.5,0.5 0 1 0 0.853553390593274,1.85355339059327 L 1.85355339059327,0.853553390593274 A 0.5,0.5 0 1 0 1.14644660940673,0.146446609406726 Z " /> 

나는 두 언어가 대략 동일해야한다고 생각했지만, 원래 미니 언어 버전은 거의 정확하게, 원본은 많이 다르다.

답변

2

좋아요, 그래서 문제를 발견하고 해결했습니다. 미니 언어 버전에서는 IsLargeArc 플래그를 설정했지만 순전히 XAML 버전에서는 False으로 남겨 두었습니다. 그래서 나는 그것을 True으로 바 꾸었습니다. 그리고 저는 마술처럼 예상 한 결과를 얻었습니다.

이 경우 버그가있는 것 같습니다.이 경우 크고 작은 호는 하나이고 동일하기 때문에 반원 호를 그리기 때문입니다.누구든지이 행동에 대한 이유를 알고 있다면 그것에 대해 듣는 것이 굉장합니다!

3

기본적으로, 당신의 경로 XAML의 말씀입니다 : Point0에서

  1. 시작, POINT1에 호를 그립니다.
  2. Point1에서 Point2로 선을 그립니다.
  3. Point2에서 점 3까지 호를 그리십시오.
  4. 'IsClosed'는 Point3에서 Point0으로 다른 선을 그립니다. 당신이 정의한 어떤

enter image description here

정확하게 생산되고있는 것이다 - 당신이 그것을 바꿀 수있는 유일한 방법은 당신의 위치를 ​​변경하는 것입니다 -하지만이기 때문에 아크는 여전히 X 축에 Point0 넘어 확장됩니다 당신이 정의한 것.

완전히 경계에 맞게 모양이 필요한 경우 반경 1/2의 여백을두고 모양 주위에 테두리를 넣을 수 있습니다 (정확한 돌출부에 공식이 있음을 확신합니다). 아래쪽과 오른쪽.

두 번째 스크린 샷이 첫 번째 스크린 샷과 다르기 때문에 모양이 다르다는 결론을 내릴 수 있습니다. 이는 경로 데이터가 잘못 번역되었음을 의미 할 수 있습니다.

+0

으로 할 수있는 일 : 여기에 우리의 예를 복용하면 색상을 제어하는 ​​방법입니다 나는 첫 번째 표본에 대해서도 추론했다. 그러나 미니 언어를 사용했을 때 다르게 작동합니다. 그 경우에, 그것은 (거의) 완벽하게 경계 지어졌습니다. –

+0

두 번째 예제에서 경로 데이터는 어디에서 왔습니까? –

+0

첫 번째 예제는 데이터 바인딩에서 데이터를 가져 와서 데이터를 수동으로 가져 와서 두 번째 예제의 데이터 문자열에 연결했습니다. –

1

나는이 게시물을 가로 질렀고 누군가가 경로 나 아이콘의 크기를 조정할 수있는 쉬운 방법을 찾고있는 경우에 대비해 답변을 게시 할 것이라고 생각했습니다. 내가 찾은 가장 쉬운 방법은 모든 경로 디스플레이에 Viewbox를 사용하는 것입니다. 이는 경로가 Viewbox 내부에서 잘 조정되기 때문입니다. Canvas를 사용하여 각 경로를 유지할 수 있습니다. "Nice"숫자를 사용하려면이 Canvas의 크기가 매우 중요합니다. 여기

는이 작업을 수행하는 방법의 예입니다

첫 번째 (선택 사항) Inkscape 또는 코렐 드로우 같은 벡터 프로그램에 모양을 그립니다! CorelDraw를 사용하여 .svg File을 만들었습니다. 참고 : 프로그램을 사용하여 벡터를 만들면 페이지 크기를 100 X 100 픽셀과 같이 만들 때 캔버스 크기를로 설정합니다. 당신이 손으로 경로를 작성하는 경우 이것은 또한 매우 편리한 접근법입니다. 100 X 100과 같은 크기를 선택하고 경로 측정 값은 모두 < 100입니다.

다음은 Vector to Xaml Converter과 같은 변환기 프로그램을 사용하고 경로를 생성합니다. 이 파일을 리소스 사전에 저장하거나 필요한 곳에 파일에 저장하십시오. 그래서 같은 캔버스 내부의 경로를 넣어 :

<Canvas x:Key="someName" Width="100" Height="100"> 
    <Path Fill="#FF000000" Stroke="#FF373435" StrokeThickness="1" Data="M92,8L92,8C103,18,103,35,92,45L45,92C35,103,18,103,8,92L8,92C-3,82,-3,65,8,55L55,8C65,-3,82,-3,92,8z"/> 
</Canvas> 

가 다시 캔버스의 크기를 유의, 이것은 당신의 "드로잉 보드"의 크기와 일치해야합니다.

그런 다음 당신이 경로가 너무 좋아에 표시하려는 너비를 가지고 뷰 박스 및 높이의 내부 ContentControl을 넣어이 사용하기 :

<Viewbox x:Name="btnClose" Width="30" Height="30"> 
    <ContentControl Content="{StaticResource someName}" /> 
</Viewbox> 

그게 전부를! 경로 사용에 대한 또 다른 좋은 점은 hte Background (Fill) 또는 Foreground (Stroke)의 색상을 바인딩 할 수 있다는 것입니다. 당신이 할 수있는 다른 것들의

<SolidColorBrush x:Key="stForeColor" Color="#FFD4D7EA" /> 

<Canvas x:Key="someName" Width="100" Height="100"> 
    <Path Fill="{StaticResource stForeColor}" Stroke="Transparent" StrokeThickness="1" Data="M92,8L92,8C103,18,103,35,92,45L45,92C35,103,18,103,8,92L8,92C-3,82,-3,65,8,55L55,8C65,-3,82,-3,92,8z"/> 
</Canvas> 

도있다 톤, 당신은 무엇을의 다른 모양, 효과, 애니메이션 등