2011-06-21 11 views
11

में नए एक्स, एक बिंदु के y निर्देशांक प्राप्त करें मैं गूगल मैप्स प्रतीक जो मैं MarkerImage का उपयोग कर मानचित्र पर आरेखित से पहले कुछ कोणों से बारी बारी से करने की जरूरत है। मैं पीआईएल का उपयोग कर पाइथन में रोटेशन ऑन द फ्लाई करता हूं, और परिणामस्वरूप छवि मूल आकार के समान आकार के 32x32 है। उदाहरण के लिए, निम्न डिफ़ॉल्ट गूगल मैप्स मार्कर के साथ:घुमाए गए छवि

# full_src is a variable holding the full path to image 
# rotated is a variable holding the full path to where the rotated image is saved 
image = Image.open(full_src) 
png_info = image.info 
image = image.copy() 
image = image.rotate(30, resample=Image.BICUBIC) 
image.save(rotated, **png_info) 

जिसके परिणामस्वरूप छवि icon rotated 30 degrees counter-clockwise

मुश्किल सा है: icon before rotation , एक 30 डिग्री conter दक्षिणावर्त रोटेशन निम्नलिखित अजगर कोड का उपयोग कर हासिल की है नई घुमावदार छवि का उपयोग कर मार्कर इमेज बनाने के दौरान उपयोग करने के लिए नया एंकर पॉइंट प्राप्त करना। यह आइकन का पॉइंट एंड होना चाहिए। डिफ़ॉल्ट रूप से, एंकर पॉइंट नीचे मध्य होता है [x में 16,32) के रूप में परिभाषित किया गया है, y coordinates जहां (0,0) शीर्ष बाएं कोने है]। क्या कोई मुझे बता सकता है कि मैं जावास्क्रिप्ट में आसानी से इस बारे में कैसे जा सकता हूं?

धन्यवाद।

अपडेट 22 जून 2011: गलत घुमावदार छवि पोस्ट की गई थी (मूल एक 330 डिग्री प्रति घड़ी के लिए था)। मैंने इसे सही कर दिया है। इसके अलावा resampling (Image.BICUBIC) भी जोड़ा गया है जो घुमावदार आइकन स्पष्ट बनाता है।

+0

@Trufa: सलाह के लिए धन्यवाद। –

उत्तर

20

घुमाए गए बिंदु आप एक rotation matrix उपयोग कर सकते हैं की स्थिति की गणना करने के लिए।

जावास्क्रिप्ट में परिवर्तित कर दिया, इस गणना करता घुमाया बिंदु:

function rotate(x, y, xm, ym, a) { 
    var cos = Math.cos, 
     sin = Math.sin, 

     a = a * Math.PI/180, // Convert to radians because that is what 
           // JavaScript likes 

     // Subtract midpoints, so that midpoint is translated to origin 
     // and add it in the end again 
     xr = (x - xm) * cos(a) - (y - ym) * sin(a) + xm, 
     yr = (x - xm) * sin(a) + (y - ym) * cos(a) + ym; 

    return [xr, yr]; 
} 

rotate(16, 32, 16, 16, 30); // [8, 29.856...] 
+0

धन्यवाद। मुझे ठीक इसी की आवश्यकता थी। –

+0

@ सिमोन काग्वी: सुधार करने के लिए धन्यवाद, सुनिश्चित नहीं है कि वहां क्या हुआ ... – pimvdb

6

0,0 के बारे में रोटेशन के लिए सूत्र है:

x1 = cos(theta) x0 - sin(theta) y0 
y1 = sin(theta) x0 + cos(theta) y0 

लेकिन वह नियमित रूप से कुल्हाड़ियों के लिए है, और रोटेशन के बारे में 0,0। पीआईएल रोटेशन "ग्राफिक्स" अक्ष के साथ घड़ी की दिशा में है। इसके अलावा, यह छवि के केंद्र के आसपास है। अंतिम भ्रमित बात यह है कि छवि का आकार बदल सकता है, जिसे अंतिम परिणाम में जिम्मेदार ठहराया जाना चाहिए।

प्रक्रिया: मूल बिंदु ले, छवि के केन्द्र बंद घटाना, लागू "ग्राफिक्स कुल्हाड़ियों" रोटेशन को सही, छवि के नए आकार मिल जाए, नई छवि के केन्द्र स्थिति वापस जोड़ें।

रोटेशन ग्राफ़िक्स का उपयोग अक्ष है:

x1 = cos(theta) x0 + sin(theta) y0 
y1 = -sin(theta) x0 + cos(theta) y0 

16,32 - 16,16 0 है, 16. घुमाएँ 30 डिग्री दक्षिणावर्त रोटेशन (आपकी छवियों के आधार पर) एक बिंदु cos (-30) * 0 देता है + पाप (-30) * 16, -सिन (-30) * 0 + कोस (-30) * 16 = -8, 13.86। अंतिम चरण घुमावदार स्थिति की केंद्र स्थिति को वापस जोड़ रहा है।

+0

क्या आप "नियमित" और "ग्राफिक्स" अक्षों के बीच अंतर को समझा सकते हैं? मुख्य रूप से ऐसा लगता है कि कौन सा समन्वय एक घटाव है, लेकिन मुझे समझ में नहीं आता क्यों। – Michael

0

एक छवि में, नीचे की ओर सकारात्मक Y और दाये सकारात्मक एक्स rotation formula लागू करने के लिए हालांकि है, हम ऊपर की तरफ के रूप में सकारात्मक वाई इसलिए जरूरत है , चरण 1 f(x,y) = f(x,h-y) लागू करना होगा, जहां 'एच' छवि की ऊंचाई है। मान लें कि छवि x0, y0 के संबंध में घूर्णन की गई है। इसके बाद आपको अपनी उत्पत्ति को इस बिंदु पर बदलने की आवश्यकता होगी। इसलिए, चरण 2 f(x,y) = f(x-x0,y-y0) होगा। इस चरण में (यानी दो चरणों के बाद), आपके नए समन्वय x-x0, h-y-y0 होंगे। अब आप रोटेशन फॉर्मूला

x1 = x*cos(theta) - y*sin(theta) 

y1 = xsin(theta) + ycos(theta) 

चरण दो के बाद प्राप्त एक्स और वाई के मानों का उपयोग करने के लिए तैयार हैं। आप प्राप्त होता

x1 = (x-x0)*cos(theta) - (h-y-y0)*sin(theta) 

y1 = (x-x0)*sin(theta) + (h-y-y0)*cos(theta) 

अब, पूर्ववत चरण 2 और चरण 1 (इसी क्रम में) में किया परिवर्तनों।

नाश चरण 2 के बाद: xNew = x1 + x0 और yNew = y1 + y0

नाश चरण 1 के बाद: xNew = x1 + x0 और yNew = h - (y1 + y0)

यह आपको देता है:

xNew = (x-x0)*cos(theta) - (h-y-y0)*sin(theta) + x0 

yNew = -(x-x0)*sin(theta) - (h-y-y0)*cos(theta) + (h-y0) 
संबंधित मुद्दे