एलिप्स ड्राइंग WPF एनीमेशन

Question

मैं एक आयताकार क्षेत्र विकसित कर रहा हूं जो एक आयताकार क्षेत्र है और एक ट्रिगर होने पर आयताकार क्षेत्र में एक अंडाकार खींच लेगा। यह नियंत्रण अन्य नियंत्रण जैसे टेक्स्टबॉक्स, बटन इत्यादि होस्ट करने में सक्षम होगा, इसलिए ट्रिगर होने पर सर्कल उनके चारों ओर खींचा जाएगा। मैं चाहता हूं कि सर्कल को एनीमेशन के रूप में खींचा जा रहा है जैसे आप एक पेन के साथ आंतरिक नियंत्रण को घेर रहे थे।

मेरा प्रश्न यह है कि इसे पूरा करने का सबसे अच्छा तरीका क्या है। मैं कुछ शोध कर रहा हूं और मैं WPF एनीमेशन का उपयोग कर सकता हूं या मैं कार्यों को पूरा करने के लिए जीडीआई + का उपयोग कर सकता हूं। मैं डब्ल्यूपीएफ एनीमेशन के लिए नया हूं इसलिए मैं सवाल पूछ रहा हूं।

Answer 1

WPF एनीमेशन यह बेहद आसान बनाता है।

1. का उपयोग कर जो भी WPF कार्यक्षमता आप की तरह (आकार, पथ, ज्यामिति, ब्रश, आरेखण, चित्र, आदि) अपने अंडाकार के दृश्य उपस्थिति बनाएं: यहाँ बुनियादी तकनीक है। यह एक साधारण अंडाकार या आपके ग्राफिक्स डिजाइनर द्वारा बनाई गई फैंसी ड्राइंग या बीच में कुछ भी हो सकता है।

2. एक ओपेसिटीमास्क लागू करें जिसमें एक विस्तृत अंडाकार डैश वाली रेखा होती है जिसमें एक शून्य-लंबाई डैश होता है। चूंकि डैश शून्य-लंबाई है, इसलिए संपूर्ण कस्टम-स्टाइल वाली अंडाकार अदृश्य हो जाएगी।

3. डैश की लंबाई को एनिमेट करें। चूंकि यह अंडाकार के लंबे हिस्सों को अपारदर्शी बन जाएगा (इसलिए यह दिखाई देगा) जब तक यह सब दिखाई नहीं दे रहा है। डिफ़ॉल्ट रूप से आपका अंडाकार आसानी से 0 से 1 तक एनिमेट कर लेगा लेकिन आप एनीमेशन पैरामीटर के माध्यम से एलीपसे की दर को नियंत्रित और भिन्न कर सकते हैं, उदाहरण के लिए आप पहले धीमी गति से शुरू कर सकते हैं।

   <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 /> <!-- This presents the actual content --> 
   
       </Grid> 
   </ControlTemplate> 
   

   अपने अंडाकार दृश्य

   WPF पैदा कर रही है दृश्यों को व्यक्त करने में अविश्वसनीय रूप से समृद्ध है, तो:

समाधान

यहाँ का समग्र संरचना बुनियादी ControlTemplate संरचना है जब आकाश आपके अंडाकार की बात आती है तो आसमान सीमा होती है हमशक्ल।

किसी भी WPF ड्राइंग तकनीक का उपयोग करके अपने एलीपसे को ठीक तरह से दिखाना चाहते हैं। कितना "कलात्मक शैली" आप अंडाकार आप कर सकते हैं से चाहते हैं पर निर्भर करता है एक सरल (और उबाऊ) जैसे अंडाकार या कुछ भी मनमाने ढंग से कल्पना stroked,: एक रास्ता है कि मोटे तौर पर एक अंडाकार लेकिन नहीं बंद कर दिया और शायद

• स्ट्रोक बाहर निकला
• ग्राफ़िक डिज़ाइनर द्वारा बनाए गए पथ को भरें जो शुरू होता है जैसे कि एक पेंटब्रश इसे कर रहा था और संभवतः जब आप चारों ओर जाते हैं और ब्लॉब में समाप्त होते हैं तो व्यापक हो जाता है।
• अभिव्यक्ति डिज़ाइन (या एडोब इलस्ट्रेटर) में वेक्टर ड्राइंग बनाएं, इसे एक्सएएमएल ड्रॉइंग में परिवर्तित करें।
  :
• एक बिटमैप छवि (ध्यान दें कि सामान्य बिटमैप्स में वेक्टर चित्र की तुलना में निष्ठा और प्रदर्शन नुकसान हैं)
• अभिव्यक्ति ब्लेंड

यहाँ एक अंत में सरल अंडाकार उपयोग कर रहा है एक कैनवास पर एक से अधिक आकार ड्रा बनाएं

<VisualBrush x:Key="EllipseVisualAppearance"> 
    <VisualBrush.Visual> 
    <Ellipse StrokeThickness="0.1" Stroke="Blue" /> 
    </VisualBrush.Visual> 
</VisualBrush> 

एनिमेट अपने अंडाकार

फिर वहाँ एक बहुत बड़ा वर हैं आप अपनी एनीमेशन को कैसे देखना चाहते हैं, इस पर निर्भर करते हुए आप इसे कैसे कर सकते हैं।

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

निरंतर 3.1416 थोड़ा अनुकरणीय खत्म हो गया है, जो व्यास 1. का एक वृत्त की परिधि है इसका मतलब है कि अंडाकार पूरी तरह से दिखाई जाएगी: के रूप में एक सरल 0 से 360 एनीमेशन के लिए अपने DoubleAnimation में सरल किया जा सकता है बस एनीमेशन अवधि के अंत में।

एक वैकल्पिक समाधान

StackOverflow उपयोगकर्ता Simon Fox एक जवाब this article by Charles Petzold के लिए एक लिंक युक्त था, लेकिन उनके जवाब कुछ मिनट बाद गायब हो गया। मुझे लगता है कि उसने इसे हटा दिया। पेटज़ोल्ड कोड PathGeometry और ArcSegment का उपयोग करके ऐसा करने का एक आसान तरीका दिखाता है। यदि आप चाहते हैं कि कोई फ्रिल्स के साथ एक साधारण अंडाकार है, तो उसके उदाहरण पर आपके कोड को मॉडलिंग करना संभवतः जाने का तरीका है।