कैनवास

Question

घूर्णन के बिना कोण पर कैनवास में चित्र खींचना मैं जावास्क्रिप्ट में कैनवास का उपयोग कर एचटीएमएल 5 में एक छवि खींच रहा हूं। मुझे इसे घूर्णन कोण पर खींचने की ज़रूरत है। मुझे पता है कि कैनवास के संदर्भ का उपयोग करके घूर्णन (कोण) फ़ंक्शन को लागू करके किया जा सकता है। लेकिन मुझे कैनवास को घुमाए बिना करने की आवश्यकता है।

यदि संभव हो तो कृपया इसके लिए संभावित दृष्टिकोण का सुझाव दें।

Answer 1

आप वास्तव में जो भी आप ऑफस्क्रीन कैनवास में घूमना चाहते हैं उसे आकर्षित कर सकते हैं और इसे अपने मुख्य कैनवास में खींच सकते हैं। मैं एक गूगल आईओ टॉक से इस कोड को उधार:

rotobj = rotateAndCache(myimg,myangle) 

और अपने drawcode में:

rotateAndCache = function(image,angle) { 
    var offscreenCanvas = document.createElement('canvas'); 
    var offscreenCtx = offscreenCanvas.getContext('2d'); 

    var size = Math.max(image.width, image.height); 
    offscreenCanvas.width = size; 
    offscreenCanvas.height = size; 

    offscreenCtx.translate(size/2, size/2); 
    offscreenCtx.rotate(angle + Math.PI/2); 
    offscreenCtx.drawImage(image, -(image.width/2), -(image.height/2)); 

    return offscreenCanvas; 
} 

तो साथ यह कैश

mycontext.drawImage(rotobj,x_coord,y_coord) 

यह केवल उपयोगी है जब आप एक वस्तु है जो केवल एक बार कोण से घुमाया जाता है और बाद में केवल परिवर्तनों के अधीन होता है।

Answer 2

यह संभव नहीं है और आपको शायद इसकी आवश्यकता नहीं है। इसे आजमाएं:

context.save() // Save current state (includes transformations) 
context.rotate() 
... draw image ... 
context.restore() // Restore state 

Answer 3

जब आप कैनवास पर परिवर्तन लागू करते हैं तो आप कैनवास को घुमाते नहीं हैं। आप बस इतना बताओ कि आप सभी को आकर्षित करने के लिए विशेष रूप से बदल दिया जाएगा। यदि आप अन्य आदेशों को प्रभावित करने के लिए परिवर्तन से बचना चाहते हैं तो save() और restore() विधियों का उपयोग करें। वे कैनवास की सेटिंग्स को सहेजने और पुनर्स्थापित करने की अनुमति देते हैं।

ctx.save(); 
ctx.rotate(30); 
ctx.drawImage(); 
ctx.restore(); 

Answer 4

मैंने @ पीटर टी - महान स्निपेट को ऊपर उठाया है और अच्छी तरह से काम करता है - इसके लिए धन्यवाद! मुझे यह मेरे लिए काम करने के लिए 3 छोटे बदलाव करना पड़ता था:

1. चौड़ाई और ऊंचाई का अधिकतम पर्याप्त नहीं है: यदि आप एक वर्ग को घूर्णन करने के बारे में सोचते हैं, तो आपको एक सर्कल की आवश्यकता होती है जिसका व्यास विकर्ण है वर्ग के (var diam)।
2. कैनवास को वापस अनुवादित करने की आवश्यकता है (या सहेजें/पुनर्स्थापित करें)।
3. ऑब्जेक्ट एक्स और वाई निर्देशांक को कैनवास आकार के लिए समायोजित किया जाना है।

तो मैं के साथ समाप्त हो गया:

rotateAndCache = function(image,angle) { 
     var offscreenCanvas = document.createElement('canvas'); 
     var offscreenCtx = offscreenCanvas.getContext('2d'); 

     var size = Math.max(image.width, image.height); 
     var diam = 2*((size/2)*Math.sqrt(2));     // needs to be saved 
     offscreenCanvas.width = diam; 
     offscreenCanvas.height = diam; 

     offscreenCtx.translate(diam/2, diam/2); 
     offscreenCtx.rotate(angle); 
     offscreenCtx.drawImage(image, -(image.width/2), -(image.height/2)); 
     offscreenCtx.translate(-diam/2, -diam/2); 

     return offscreenCanvas; 
} 

और समायोजित ड्रा स्थिति (बचाया जा करने की जरूरत है rotateAndCache में):
mycontext.drawImage(rotobj,x-(diam-width)/2,y-(diam-height)/2);