चिकना पिंच-ज़ूम और विंडोज फोन पर पैनिंग 8

Question

मैं चुटकी ज़ूम और (एक छवि नियंत्रण पर) ManipulationDelta और ManipulationStarted घटनाओं के लिए hooking द्वारा पैनिंग लागू करने के लिए प्रबंधित किया है:

private void image_OnManipulationDelta(object sender, ManipulationDeltaEventArgs e) 
    { 
     var transform = (CompositeTransform)image.RenderTransform; 

     // pan 
     transform.TranslateX = _translationX + e.CumulativeManipulation.Translation.X; 
     transform.TranslateY = _translationY + e.CumulativeManipulation.Translation.Y; 

     // zoom 
     if (e.PinchManipulation != null) 
     { 
      transform.CenterX = e.PinchManipulation.Original.Center.X; 
      transform.CenterY = e.PinchManipulation.Original.Center.Y; 

      transform.ScaleX = _scaleX * e.PinchManipulation.CumulativeScale; 
      transform.ScaleY = _scaleY * e.PinchManipulation.CumulativeScale; 
     } 
    } 

    private void image_OnManipulationStarted(object sender, ManipulationStartedEventArgs e) 
    { 
     // the user has started manipulating the screen, set starting points 
     var transform = (CompositeTransform)image.RenderTransform; 
     _scaleX = transform.ScaleX; 
     _scaleY = transform.ScaleY; 
     _translationX = transform.TranslateX; 
     _translationY = transform.TranslateY; 
    } 

लेकिन की तुलना में विंडोज़ फोन यूआई के बाकी हिस्सों की चिकनीता यह बहुत सहज और कठोर महसूस करती है। आंदोलन में कोई जड़ता नहीं है।

क्या आंदोलनों को और अधिक आसान बनाने का कोई तरीका है? एनिमेशन और स्टोरीबोर्ड का उपयोग करने के लिए एक तरीका है? मैंने कम से कम चिकनी पैनिंग प्राप्त करने के लिए स्क्रॉलव्यू का उपयोग करने का प्रयास किया है, लेकिन फिर मैनिपुलेशन डेल्टा घटनाएं सही ढंग से फायरिंग नहीं कर रही हैं।

Answer 1

मैं जानता हूँ कि आप के बारे में बात कर रहे हैं 8 और मैं 7 से संबंधित लेख के लिए एक लिंक पोस्ट करेंगे, लेकिन यह बहुत उपयोगी था जब विंडोज फोन के साथ प्रयोग करना इसलिए यहाँ यह जाता है:

http://www.wintellect.com/cs/blogs/jprosise/archive/2011/01/19/building-touch-interfaces-for-windows-phones-part-3.aspx

मुझे कल्पना नहीं है कि तब से बहुत कुछ बदल गया है ...

Answer 2

मैं गणितीय दृष्टिकोण से यह अधिकार प्राप्त करना चाहता था। परिणाम टेलरिक के PanAndZoomImage के लिए शुद्धता में कुछ समान है। यदि आप रुचि नहीं रखते हैं, तो सीधे gist पर जाएं (यह WP7.1 + के साथ काम करता है)। आपको System.Windows.Interactivity और Windows Phone Toolkit का संदर्भ देना होगा।

उपयोग:

<Image Source="http://i.imgur.com/ZbKlRzK.jpg"> 
    <i:Interaction.Behaviors> 
     <phoneApp1:PanAndZoomBehavior MaxZoom="10" /> 
    </i:Interaction.Behaviors> 
</Image> 

मठ

panning और zooming CompositeTransform के 2 से 4 से बाहर परिवर्तनों, अर्थात् अनुवाद और स्केलिंग का उपयोग करता है। मुख्य बिंदु यह समझ रहा है कि उन दो पैमाने + अनुवाद परिवर्तनों को कैसे लिखें। मैं हैकेलिश नोटेशन का उपयोग करूंगा, क्योंकि यह टाइप करने और पढ़ने के लिए बोझ कम है। हमारी 'पुरातन' हैं

1. scale s = चारों ओर पैमाने (sx, एसवाई) x दिशा में कारक sx और y दिशा में एसवाई साथ
2. translate t = y दिशा
में एक्स दिशा और Ty में tx द्वारा सभी बिंदुओं ऑफसेट

CompositeTransform एक केंद्र बिंदु है, जो की तरह

scaleAround c s = translate c . scale s . translate -c 

निम्नलिखित नियम पकड़ व्यक्त किया जाता है चारों ओर मापता है (यदि आप गणित मुझे विश्वास नहीं है, सभी ऑपरेटरों componentwise हैं):

1. translate a . translate b = translate (a+b)
2. scale a . scale b = scale (a*b)
3. translate t . scale s = scale s . translate (t/s)

एक CompositeTransform

तरह

transform s c t = translate t . scaleAround c s 
       = translate (t+c) . scale s . translate -c 

जब उन रूपांतरण के दो रचना है , हमें तब तक प्राइमेटिव्स के चारों ओर स्थानांतरित करना होगा जब तक हम नहीं जाते उपरोक्त एक रूप है।a और b उन दो समग्र ट्रान्सफॉर्म बनें। तो हम पाते हैं:

transform' = b . a 
      = translate bt . scaleAround bc bs . translate at . scaleAround ac as 
      = translate bt . translate bc . scale bs . translate -bc . translate at . translate ac . scale as . translate -ac 
      = translate (bt+bc) . scale bs . translate (ac+at-bc) . scale as . translate -ac 
      = translate (bt+bc) . translate (ac+at-bc)*bs . scale bs . scale as . translate -ac 
      = translate (bt+bc+(ac+at-bc)*bs) . scale (as*bs) . translate -ac 
      = translate (bt+bc-ac+(ac+at-bc)*bs) . scaleAround ac (as*bs) 
      = translate (bt+at*bs+(bs-1)*(ac-bs)) . scaleAround ac (as*bs) 

ऐसा इसलिए है क्योंकि मैं कुछ लोगों को कुछ चीजें क्यों करता हूं, इस बारे में गहन दस्तावेज की मात्रा से निराश था।

वास्तविक संरचना कोड के लिए, looko here

Answer 3

मैं जानता हूँ कि यह एक देर से जवाब है, लेकिन यहाँ एक और नमूना परियोजना जो इस समस्या http://code.msdn.microsoft.com/wpapps/Smooth-flick-and-zoom-with-7760c7f7