타원 그리기 WPF 애니메이션

나는 사각형 영역 인 컨트롤을 개발 중이며 트리거가 발생할 때 사각형 영역에 타원을 그릴 것입니다. 이 컨트롤은 텍스트 상자, 버튼 등과 같은 다른 컨트롤을 호스팅 할 수 있으므로 트리거 될 때 원이 그 주위에 그려집니다. 당신이 펜으로 내부 컨트롤을 돌고있는 것처럼 원을 애니메이션으로 그려야합니다.타원 그리기 WPF 애니메이션

제 질문은 이것을 수행하는 가장 좋은 방법입니다. 몇 가지 연구를 해왔고 WPF 애니메이션을 사용하거나 GDI +를 사용하여 작업을 수행 할 수있었습니다. WPF 애니메이션이 처음이므로 질문을하는 이유입니다.

출처

2010-03-11 widmayer

WPF 애니메이션을 사용하면이 작업을 매우 쉽게 처리 할 수 있습니다.

당신이 (등 모양, 경로, 기하학, 브러쉬, 도면, 이미지를) 원하는대로 WPF 기능을 사용하여 타원의 시각적 모양을 만들기 다음은 기본적인 기술이다. 이것은 단순한 타원이나 그래픽 디자이너 또는 그 중간의 멋진 그림이 될 수 있습니다.
단일 제로 길이 대시가있는 넓은 타원형 점선으로 구성된 OpacityMask를 적용하십시오. 대시가 길이가 0이므로 전체 맞춤형 타원은 보이지 않습니다.
대시의 길이를 애니메이션으로 나타냅니다. 그것이 타원의 더 긴 부분을 가져올 때까지 모든 것이 보일 때까지 불투명 해집니다 (그래서 볼 수 있습니다). 기본적으로 타원은 0에서 1까지 매끄럽게 애니메이션을 적용하지만, 애니메이션 매개 변수를 통해 타원이 나타나는 비율을 제어하고 변경할 수 있습니다. 예를 들어 처음에는 느리게 시작한 다음 속도를 높일 수 있습니다. 그래서, 영상 표현에 매우 풍부한

WPF 시각적하여 타원을 작성
```
<ControlTemplate TargetType="MyCustomControl"> 
    <Grid> 

    <Rectangle Fill="{StaticResource EllipseVisualAppearance}"> 
     <Rectangle.OpacityMask> 
     <VisualBrush> 
      <VisualBrush.Visual> 
      <Ellipse 
       x:Name="opacityEllipse" 
       StrokeDashArray="0 10" 
       Stroke="Black" StrokeThickness="0.5" 
       Width="1" Height"1" /> 
      </VisualBrush.Visual> 
     </VisualBrush> 
     </Rectangle.OpacityMask> 
    </Rectangle> 

    <ContentPresenter />  

    </Grid> 
</ControlTemplate> 
```
됩니다 : 여기

솔루션의

전체 구조는 기본 ControlTemplate이 구조입니다 당신의 타원이 무엇인지에 관해서는 하늘이 한계입니다. 봐.

타원을 WPF 그리기 기술을 사용하여 표시하려는 방식대로 정확하게 그립니다. 당신은 당신이 할 수있는 타원에서 원하는 얼마나 많은 "예술적 스타일"에 따라 간단한 (지루한)과 같은 임의의 화려한 타원 또는 아무것도 쓰다 :

스트로크 대략 타원하지만 아마도 폐쇄 경로를 밖으로 나왔다.

그래픽 디자이너가 만든 페인트 브러시로 시작하는 경로를 채우고 주위를 둘러보고 blob로 끝나는 경로가 더 넓어 질 수 있습니다.

Expression Design (또는 Adobe Illustrator)에서 벡터 드로잉을 만들고 XAML 드로잉으로 변환합니다.
:

비트 맵 이미지 (일반적으로 비트 맵의 해당 벡터 도면에 비하여 정확도 및 성능에 불이익을 주)

는 궁극적 간단한 타원 다음 식 혼합

이다 사용 캔버스에 여러 모양을 그릴 만들기
<VisualBrush x:Key="EllipseVisualAppearance"> <VisualBrush.Visual> <Ellipse StrokeThickness="0.1" Stroke="Blue" /> </VisualBrush.Visual> </VisualBrush>

가 다시 큰 VAR가 당신의 타원 애니메이션 애니메이션을 어떻게 보일지에 따라이 방법을 사용할 수 있습니다.

<DoubleAnimation StoryBoard.TargetName="opacityEllipse" StoryBoard.TargetProperty="StrokeDashArray[0]" From="0" To="3.1416" Duration="0:0:0.5" />

상수 3.1416 직경 1의 원의 원주 이것은 타원 완전히 볼 수 있다는 의미이다 약간 PI 이상이다 같은 간단한 0 360 애니메이션하여 DoubleAnimation가 간단 할 수있다 애니메이션 기간이 끝나기 직전입니다.

대안 솔루션 StackOverflow의 사용자 Simon Fox가 this article by Charles Petzold에 대한 링크를 포함하는 대답을 게시했지만, 그의 대답은 몇 분 후에 사라

. 나는 그가 그것을 삭제했다고 생각한다. Petzold 코드는 PathGeometry 및 ArcSegment를 사용하여이 작업을 수행하는 간단한 방법을 보여줍니다. 여러분이 원하는 모든 것이 꼬집음이없는 단순한 타원이면, 그의 예제에서 코드를 모델링하는 것이 아마도 길일 것입니다.

출처

2010-03-11 21:15:37

StrokeDashArray가 아닌 다른 어떤 기술을 사용할 수 있습니까? 콜렉션 요소가 종속성 속성이 아니기 때문에 이것을 사용할 수없는 것으로 보입니다. – widmayer

타원 그리기 WPF 애니메이션

답변

관련 문제