माउस की ओर ज़ूम करें (उदाहरण के लिए Google मानचित्र)

Question

मैंने 2 डी रणनीति गेम के लिए होम-ब्रू व्यू_पोर्ट क्लास लिखा है। (तीर कुंजी के साथ) पैन और (माउस पहिया के साथ) जूमिंग अच्छा काम है, लेकिन मैं भी घर जहाँ भी कर्सर रखा गया है की ओर करने के लिए दृश्य करना चाहते हैं के रूप में Google Maps or Supreme Commander

में मैं तुम्हें बारीकियों को छोड़ देंगे ज़ूम कैसे कार्यान्वित किया जाता है और यहां तक ​​कि मैं किस भाषा का उपयोग कर रहा हूं: यह सब अप्रासंगिक है। ज़ूम फ़ंक्शन महत्वपूर्ण है, जो आयत संरचना (x, y, w, h) को संशोधित करता है जो दृश्य का प्रतिनिधित्व करता है। अब तक कोड इस तरह दिखता है:

void zoom(float delta, float mouse_x, float mouse_y) 
{ 
    zoom += delta; 
    view.w = window.w/zoom; 
    view.h = window.h/zoom; 
    // view.x = ??? 
    // view.y = ??? 
} 

इससे पहले कि किसी को यह पता चलता है, निम्नलिखित होगा नहीं काम:

view.x = mouse_x - view.w/2; 
view.y = mouse_y - view.h/2; 

इस तस्वीर को दिखाता है क्यों, जैसा कि मैंने स्माइली चेहरे की ओर ज़ूम करने के लिए प्रयास करते हैं:

जब माउस के नीचे वस्तु टी में रखा गया है आप देख सकते हैं वह स्क्रीन के केंद्र में माउस के नीचे रहना बंद कर देता है, इसलिए हम इसके प्रति ज़ूम करना बंद कर देते हैं!

यदि आपके पास गणित के लिए एक सिर है (आपको एक की आवश्यकता होगी) इस पर किसी भी मदद की सराहना की जाएगी!

Answer 1

मैं समाधान को समझने में कामयाब रहा, बहुत सी तस्वीरों के बहुत सारे सिर-खरोंच के कारण धन्यवाद: अगर किसी और को इसकी आवश्यकता हो तो मैं यहां एल्गोरिदम पोस्ट करूंगा।

Vect2f mouse_true(mouse_position.x/zoom + view.x, mouse_position.y/zoom + view.y); 
Vect2f mouse_relative(window_size.x/mouse_pos.x, window_size.y/mouse_pos.y); 
view.x = mouse_true.x - view.w/mouse_relative.x; 
view.y = mouse_true.y - view.h/mouse_relative.y; 

यह सुनिश्चित करता है कि माउस के नीचे रखी गई वस्तुएं माउस के नीचे रहें। आप github पर कोड को देख सकते हैं, और मैंने youtube के लिए शोकेस डेमो भी बनाया है।

Answer 2

मेरी अवधारणा में एक कैमरा और एक स्क्रीन है। कैमरा चलती हिस्सा है। स्क्रीन स्केलेबल हिस्सा है।

मैंने लाइव डेमो समेत एक उदाहरण स्क्रिप्ट बनाई है। इसे सरल रखने के लिए समस्या को केवल एक आयाम तक कम कर दिया गया है। https://www.khanacademy.org/cs/cam-positioning/4772921545326592

var a = (mouse.x + camera.x)/zoom; 

// now increase the zoom e.g.: like that: 
zoom = zoom + 1; 

var newPosition = a * zoom - mouse.x; 

camera.setX(newPosition); 
screen.setWidth(originalWidth * zoom); 

एक 2D उदाहरण के लिए आप बस ऊंचाई और y पदों के लिए एक ही कोड जोड़ सकते हैं।