WinRT घटक बनाने के लिए Direct2D प्रौद्योगिकी का उपयोग करना

यह लेख हमारी कहानियों की श्रृंखला जारी रखता है जिसमें हम विंडोज 8 यूआई की शैली में विजुअल WinRT नियंत्रण विकसित करने में अपना अनुभव साझा करते हैं।

पिछली बार हमने इसके लिए अपना WinRT नियंत्रण और SDK बनाने के लिए आवश्यक बुनियादी कदम दिए थे, लेकिन अब हम आपके WinRT घटक में दृश्य प्रभाव बनाने के लिए Direct2D तकनीक का उपयोग करने के बारे में बात करेंगे।

इस लेख में, हम उर्फ ​​गेज इंडिकेटर (गेज नियंत्रण) बनाने की प्रक्रिया पर विचार करेंगे, जिसमें चलते समय तीर धुंधला हो जाएगा।

नोट: आप इस परियोजना के लिए पूर्ण लिंक निम्न लिंक पर डाउनलोड कर सकते हैं: go.devexpress.com/Habr_WinRTSample.aspx

Direct2D क्या है?

Direct2D तकनीक एक हार्डवेयर-त्वरित दो-आयामी ग्राफिक्स एपीआई है जो दो-आयामी ज्यामिति, बिटमैप और पाठ के उच्च प्रदर्शन और उच्च गुणवत्ता वाले प्रदर्शन प्रदान करता है।

Direct2D API को Microsoft द्वारा विंडोज ऑपरेटिंग सिस्टम पर चलने वाले एप्लिकेशन बनाने और मौजूदा कोड के साथ बातचीत करने के लिए विकसित किया गया था जो GDI, GDI + या Direct3D का उपयोग करता है।

अपने अनुप्रयोगों में Direct2D का उपयोग करना कब आवश्यक है?

एक विशिष्ट उदाहरण अनुप्रयोगों का प्रदर्शन अनुकूलन है जिसमें बड़ी संख्या में ग्राफिक तत्व खींचे जाते हैं (उदाहरण के लिए, यह बड़ी मात्रा में डेटा, मैप्स और सभी प्रकार के गेज संकेतकों के साथ ग्राफ़ बनाते समय आवश्यक है)।

आप संबंधित MSDN अनुभाग में Direct2D और इसके अनुप्रयोग सुविधाओं के बारे में अधिक जान सकते हैं।

सिस्टम आवश्यकताओं

Windows 8 UI (METRO) की शैली में एप्लिकेशन विकसित करने के लिए, आपको Windows 8 और Visual Studio 2012 की आवश्यकता होगी। आप हमारे पिछले लेख में इसके बारे में अधिक पढ़ सकते हैं।

Direct2D का उपयोग करके एक घटक के साथ C ++ लाइब्रेरी बनाना

अपने आवेदन में Direct2D का उपयोग करने के लिए, आपको C ++ में WinRT घटक लिखना होगा।

ऐसा करने के लिए, इन चरणों का पालन करें:

1. विज़ुअल स्टूडियो 2012 लॉन्च करें (यदि आप इसे कभी भी बंद कर दें :-))
   
2. एक नया विजुअल C ++ प्रोजेक्ट बनाएं जैसे विंडोज रनटाइम कंपोनेंट
   
   
   
   इस लाइब्रेरी में डायरेक्ट 2 डी तकनीक का उपयोग करके रेंडरिंग के लिए डिज़ाइन किए गए घोषणा और कार्यान्वयन के कार्यान्वयन शामिल होंगे।
   
3. फिर आपको हमारे C ++ प्रोजेक्ट के गुणों में Direct2D पुस्तकालयों: d2d1.lib और d3d11.lib से लिंक जोड़ने की आवश्यकता है।
   
   
   
   
4. अगला, आपको Direct2D का उपयोग करके हमारे घटक के रेंडरिंग कार्यान्वयन को लिखना होगा।
   
   सबसे पहले, एक एकल CreateRenderer विधि के साथ एक स्टैटिक ड्रॉइंगफैक्टरी क्लास बनाएँ, जो DirectX लाइब्रेरी को इनिशियलाइज़ करेगा, रेंडरर क्लास का एक उदाहरण बनाएँ और लौटाएँ :
   
   

   public ref class DrawingFactory sealed { public: static IRenderer^ CreateRenderer(); }; 

   
   दूसरे, हम मुख्य IRenderer इंटरफ़ेस का वर्णन करते हैं, जिसमें निम्नलिखित विधियाँ और गुण होंगे:
   - रीसेट विधि, ड्राइंग के लिए सतह को फिर से बनाने के लिए डिज़ाइन की गई है, हमारे मामले में, इमेजब्रश उन आयामों के साथ जो स्थानांतरित किए गए थे। भविष्य में, हम अपने WinRT घटक के दृश्य पेड़ में किसी भी तत्व के परिणामस्वरूप ImageBrush असाइन करेंगे;
   - टारगेटब्रश संपत्ति, जो रीसेट पद्धति में बनाए गए ब्रश को वापस कर देगा और इसमें रेंडरिंग परिणाम होना चाहिए;
   - गुण EnableMotionBlur , MotionBlurAngle , MotionBlurDeviation , जो कि आदिम प्रतिपादन के समय धब्बा प्रभाव को सक्षम और कॉन्फ़िगर करने के लिए उपयोग किया जाता है;
   - ज्यामिति बनाने और ड्राइंग करने के लिए CreateGeometry , DrawGeometry , FillGeometry तरीके;
   - इसके अलावा, प्रश्न में इंटरफ़ेस में कई और अधिक सरल और समझने योग्य तरीके और गुण हैं, जैसे कि BeginDraw , EndDraw , Clear , TargetWidth और TargetHeight ।
   
   

    public interface class IRenderer { property int TargetWidth { int get(); } property int TargetHeight { int get(); } property ImageBrush^ TargetBrush { ImageBrush^ get(); } property bool EnableMotionBlur { bool get(); void set(bool value); } property float MotionBlurAngle { float get(); void set(float value); } property float MotionBlurDeviation { float get(); void set(float value); } void Reset(int width, int height); void BeginDraw(); void EndDraw(); void Clear(Color color); IShapeGeometry^ CreateGeometry(); void DrawGeometry(IShapeGeometry^ geometry, Color color, float width); void FillGeometry(IShapeGeometry^ geometry, Color color); }; 

   
   
   अब बात करते हैं कि हम धब्बा प्रभाव कैसे बनाएंगे। Direct2D के साथ, यह कार्य बहुत सरल है। रीसेट विधि में, आपको एक मानक DirectionalBlur प्रभाव, और एक अस्थायी बिटमैप ( m_inputSource ) बनाने की आवश्यकता होती है, जिसमें हम इसे पहले बनाए गए प्रभाव के स्रोत के रूप में आकर्षित और उपयोग करेंगे:
   
   

    void Renderer::Reset(int width, int height) { D3D_FEATURE_LEVEL featureLevels[] = { D3D_FEATURE_LEVEL_11_1, D3D_FEATURE_LEVEL_11_0, D3D_FEATURE_LEVEL_10_1, D3D_FEATURE_LEVEL_10_0, D3D_FEATURE_LEVEL_9_3, D3D_FEATURE_LEVEL_9_2, D3D_FEATURE_LEVEL_9_1 }; ThrowIfFailed(D3D11CreateDevice(nullptr, D3D_DRIVER_TYPE_HARDWARE, 0, D3D11_CREATE_DEVICE_BGRA_SUPPORT, featureLevels, ARRAYSIZE(featureLevels), D3D11_SDK_VERSION, &m_d3dDevice, NULL, &m_d3dContext)); ThrowIfFailed(m_d3dDevice.As(&m_dxgiDevice)); ThrowIfFailed(m_d2dFactory->CreateDevice(m_dxgiDevice.Get(), &m_d2dDevice)); ThrowIfFailed(m_d2dDevice->CreateDeviceContext(D2D1_DEVICE_CONTEXT_OPTIONS_NONE, &m_d2dContext)); m_imageSource = ref new SurfaceImageSource(width, height, false); IInspectable* inspectable = (IInspectable*) reinterpret_cast<IInspectable*>(m_imageSource); ThrowIfFailed(inspectable->QueryInterface(__uuidof(ISurfaceImageSourceNative), (void**)&m_imageSourceNative)); ThrowIfFailed(m_imageSourceNative->SetDevice(m_dxgiDevice.Get())); m_imageBrush = ref new ImageBrush(); m_imageBrush->ImageSource = m_imageSource; m_targetWidth = width; m_targetHeight = height; ThrowIfFailed(m_d2dContext->CreateEffect(CLSID_D2D1DirectionalBlur, &m_blurEffect)); m_d2dContext->CreateBitmap(D2D1::SizeU(m_targetWidth, m_targetHeight), nullptr, 0, D2D1::BitmapProperties1(D2D1_BITMAP_OPTIONS_TARGET,D2D1::PixelFormat(DXGI_FORMAT_B8G8R8A8_UNORM, D2D1_ALPHA_MODE_PREMULTIPLIED)), &m_inputSource); m_blurEffect->SetInput(0, m_inputSource.Get()); } 

   
   
   फिर, BeginDraw विधि में, हम ड्राइंग के लिए सतह के रूप में m_inputSource मध्यवर्ती बिटमैप का उपयोग करते हैं, और जब ड्राइंग EndDraw विधि में पूरा हो जाता है , तो TargetBrush सतह सेट करें और, EnableMotionBlur संपत्ति के मूल्य के आधार पर, एक प्रभाव या एक मध्यवर्ती बिटमैप आकर्षित करें।
   
   

    void Renderer::BeginDraw() { if (!m_drawingInProcess && (m_d2dContext.Get() != NULL)) { m_d2dContext->BeginDraw(); m_d2dContext->SetTarget(m_inputSource.Get()); m_drawingInProcess = true; } } void Renderer::EndDraw() { if (m_drawingInProcess) { m_d2dContext->EndDraw(); ComPtr<ID2D1Bitmap1> bitmap; PrepareSurface(&bitmap); m_d2dContext->SetTarget(bitmap.Get()); m_d2dContext->BeginDraw(); m_d2dContext->Clear(D2D1::ColorF(0.0f, 0.0f, 0.0f, 0.0f)); if (m_motionBlurEnabled) { m_blurEffect->SetValue(D2D1_DIRECTIONALBLUR_PROP_STANDARD_DEVIATION, m_motionBlurDeviation); m_blurEffect->SetValue(D2D1_DIRECTIONALBLUR_PROP_ANGLE, m_motionBlurAngle); m_d2dContext->DrawImage(m_blurEffect.Get()); } else m_d2dContext->DrawImage(m_inputSource.Get()); m_d2dContext->EndDraw(); m_d2dContext->SetTarget(NULL); m_imageSourceNative->EndDraw(); m_drawingInProcess = false; } } 

   
   

WinRT घटक युक्त C # लाइब्रेरी बनाना

अगले चरण में, हमें अपने समाधान में एक और परियोजना जोड़ने की आवश्यकता है - इस बार सी #। यह परियोजना एक पुस्तकालय है जिसमें एक WinRT घटक है जो पहले लिखित C ++ पुस्तकालय पर काम करेगा।



इस परियोजना के लिए, आपको पहले निर्मित C ++ असेंबली के लिंक जोड़ने होंगे:



इस लाइब्रेरी में WinRT गेज ही होगा। इसे हमारी विधानसभा में शामिल करने के लिए, एक नया अस्थायी नियंत्रण जोड़ें:



सभी दृश्य तत्व, तीर को छोड़कर, हम मानक WinRT टूल का उपयोग करके ड्रा करेंगे, अर्थात्, हम टेम्पलेट में सेट करेंगे:

 <Style TargetType="local:Gauge"> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="local:Gauge"> <Grid> <Grid Margin="0,0,0,0"> <Rectangle Fill="#FF252525" RadiusX="30" RadiusY="30"/> <Path Stretch="Uniform" VerticalAlignment="Top" HorizontalAlignment="Center" Stroke="#FFDAA5F8" Fill="#FFD365F8" StrokeThickness="3" StrokeStartLineCap="Square" StrokeEndLineCap="Square" Margin="150,0,150,0"> <Path.Data> <PathGeometry> <PathGeometry.Figures> <PathFigure StartPoint="0,0"> <PathFigure.Segments> <LineSegment Point="0.1,0"/> <ArcSegment Point="10.1,0" Size="5,5" RotationAngle="180" IsLargeArc="False" SweepDirection="Counterclockwise"/> <LineSegment Point="10.2,0"/> <ArcSegment Point="0,0" Size="5.1,5.1" RotationAngle="180" IsLargeArc="False" SweepDirection="Clockwise"/> </PathFigure.Segments> </PathFigure> </PathGeometry.Figures> </PathGeometry> </Path.Data> </Path> <TextBlock Text="{Binding Value, RelativeSource={RelativeSource Mode=TemplatedParent}}" FontSize="100" Foreground="#FFD365F8" VerticalAlignment="Top" HorizontalAlignment="Center"/> <Border x:Name="RendererSurface"/> </Grid> </Grid> </ControlTemplate> </Setter.Value> </Setter> </Style> 

घटक के इस दृश्य प्रतिनिधित्व में, एक खाली बॉर्डर है जिसका नाम रेंडरर सर्फेस है । हम इस तत्व को OnApplyTemplate विधि में प्राप्त करेंगे और इसे एक वर्ग चर में सहेजेंगे ताकि हम रेंडरर से इसकी पृष्ठभूमि संपत्ति तक ब्रश असाइन कर सकें।

 protected override void OnApplyTemplate() { base.OnApplyTemplate(); rendererSurface = (Border)GetTemplateChild("RendererSurface"); } 

हमारी कक्षा के कंस्ट्रक्टर में, हमें DrawingFactory का उपयोग करके एक IRenderer बनाना चाहिए, और SizeChanged ईवेंट की सदस्यता भी लेनी चाहिए । इस घटना पर, हम IRenderer.Reset विधि को कॉल करेंगे ताकि खींचे जाने वाले ब्रश का आकार घटक के आकार के अनुरूप हो। हम स्थैतिक कम्पोज़िटटार्ग की सदस्यता भी लेते हैं। रेंडरिंग इवेंट - इस ईवेंट के हैंडलर पर हम अपना तीर छोड़ेंगे।

 public Gauge() { renderer = DrawingFactory.CreateRenderer(); DataContext = this; this.DefaultStyleKey = typeof(Gauge); arrowStrokeColor = ColorHelper.FromArgb(0xFF, 0xD3, 0xAA, 0xF8); arrowFillColor = ColorHelper.FromArgb(0xFF, 0xD3, 0x65, 0xF8); this.SizeChanged += Gauge_SizeChanged; CompositionTarget.Rendering += CompositionTarget_Rendering; } void Gauge_SizeChanged(object sender, SizeChangedEventArgs e) { renderer.Reset((int)e.NewSize.Width, (int)e.NewSize.Height); rendererSurface.Background = renderer.TargetBrush; } void CompositionTarget_Rendering(object sender, object e) { Render(); } 

अब हमें केवल मूल्य निर्भरता की एक संपत्ति जोड़ने और तीर की ज्यामिति तैयार करने की आवश्यकता है:

 static readonly DependencyProperty ValueProperty = DependencyProperty.Register("Value", typeof(double), typeof(Gauge), new PropertyMetadata(0.0, ValuePropertyChanged)); public double Value { get { return (double)GetValue(ValueProperty); } set { SetValue(ValueProperty, value); } } public static void ValuePropertyChanged(DependencyObject d, DependencyPropertyChangedEventArgs e) { Gauge gauge = d as Gauge; if (gauge != null) gauge.renderer.EnableMotionBlur = true; } void Render() { double angle = Math.PI * Value / 1000 - Math.PI / 2.0; IShapeGeometry geometry = CreateArrowGeometry(angle); renderer.BeginDraw(); renderer.MotionBlurAngle = (float)(angle / Math.PI * 180); renderer.MotionBlurDeviation = 5.0f; renderer.Clear(Colors.Transparent); renderer.FillGeometry(arrow, ColorHelper.FromArgb(0xFF, 0xD3, 0x65, 0xF8)); renderer.DrawGeometry(arrow, ColorHelper.FromArgb(0xFF, 0xD3, 0xAA, 0xF8), 3.0f); renderer.EndDraw(); if (renderer.EnableMotionBlur) renderer.EnableMotionBlur = false; } 

वह सब है। हमारा घटक तैयार है, और अब हम इसे एक वास्तविक एप्लिकेशन में उपयोग कर सकते हैं।

WinRT गेज घटक का उपयोग करना

हमारे घटक के संचालन को प्रदर्शित करने के लिए, हम अपने समाधान में एक और परियोजना जोड़ते हैं। इसे Blank App (XAML) टेम्पलेट होने दें। आइए हमारे परीक्षण प्रोजेक्ट का नाम GामीMatrix :



फिर, पहले बनाए गए गेज और ड्राइंगलेयर प्रोजेक्ट्स के लिंक जोड़ें:



इसके बाद, MainPage.xaml में ग्रिड जोड़ें और इसमें दो पंक्तियाँ और दो कॉलम बनाएँ।

 <Grid.ColumnDefinitions> <ColumnDefinition Width="*"/> <ColumnDefinition Width="*"/> </Grid.ColumnDefinitions> <Grid.RowDefinitions> <RowDefinition Height="*"/> <RowDefinition Height="*"/> </Grid.RowDefinitions> 

उसके बाद, हम अपने गेज घटक को प्रत्येक सेल में रखते हैं, साथ ही स्लाइडर को गतिशील रूप से गेज नियंत्रण पर तीर का उपयोग करके प्रदर्शित मूल्य को बदलने के लिए:

 <Grid Grid.Column="0" Grid.Row="0" Margin="30"> <Grid.RowDefinitions> <RowDefinition Height="Auto"/> <RowDefinition Height="*"/> </Grid.RowDefinitions> <Slider Grid.Row="0" Name="ValueSlider1" Minimum="0" Maximum="1000" Value="0" Width="1000" Margin="50,0,50,0"/> <g:Gauge Grid.Row="1" Value="{Binding ElementName=ValueSlider1, Path=Value}"/> </Grid> 

हम गेजमैट्रिक्स प्रोजेक्ट शुरू करते हैं, एप्लिकेशन लॉन्च करते हैं और ... सब कुछ, आप अपने WinTL एप्लीकेशन में Direct2D के साथ ड्राइंग का उपयोग करने में कामयाब रहे! बधाई!



नोट: आप इस परियोजना के लिए पूर्ण लिंक निम्न लिंक पर डाउनलोड कर सकते हैं: go.devexpress.com/Habr_WinRTSample.aspx

पुनश्च हम उन सभी को देख कर प्रसन्न होंगे जो हमें विंडोज 8 कैंप में मॉस्को में 7 सितंबर को विनआरटी के लिए घटकों के विकास के बारे में अपने सवाल पूछना चाहते हैं! यदि आपके पास इस कार्यक्रम में शामिल होने का अवसर नहीं है, तो ऑनलाइन प्रसारण का पालन करें!