जावास्क्रिप्ट के साथ एक स्प्राइट शीट से एक स्प्राइट स्केल/खिंचाव/स्कू कैसे कर सकता हूं?

कुछ पृष्ठभूमि: मैं एक रेकास्टर बना रहा हूं, अच्छा ... बना रहा था। लेकिन मैंने इसे थोड़ा बदलने का फैसला किया। मैंने रे कोस्टर बनाने के लिए आगे बढ़ना शुरू कर दिया और फैसला किया कि बस एक आइकन प्रदर्शित करने के लिए इतना आसान होगा और पिक्सेल के गुच्छा के चारों ओर घूमने के बजाए इसे खींचें/स्कू करें।जावास्क्रिप्ट के साथ एक स्प्राइट शीट से एक स्प्राइट स्केल/खिंचाव/स्कू कैसे कर सकता हूं?

मेरा प्रश्न है: मैं जावास्क्रिप्ट के साथ एक स्प्राइट शीट से एक स्प्राइट स्केल/खिंचाव/स्कू कैसे कर सकता हूं?

मैं मूल रूप से 16px छवि द्वारा 16px छवि को एक स्प्राइट छवि से प्राप्त करना चाहता हूं, और इसे स्थितिबद्ध करता हूं, इसे स्केल करता हूं, इसे चालू करता हूं, और इसे जावास्क्रिप्ट के साथ छोड़ देता हूं। मुझे ऐसा करने के लिए कैसे जाना चाहिए?

यदि इससे मदद मिलती है, तो मैं उस छवि के तीन संस्करणों को जोड़ने के बारे में सोच रहा था ताकि इसे 3 डी स्पेस के आसपास 3 डी स्पेस के बिना चलने वाले 3 डी स्पेस के इंप्रेशन के बारे में सोच सकें।

स्रोत

2011-12-09 Tgwizman

आप इसे CSS3 transform के साथ कर सकते हैं। या एक छुपा कैनवास तत्व का उपयोग करें, transformation लागू करें और फिर इसे मुख्य कैनवास पर खींचा जाए।

स्रोत

2011-12-09 19:40:38 Prusse

आप कैनवास पर drawImage फ़ंक्शन का उपयोग करके इसे पूरा कर सकते हैं। निम्नलिखित उदाहरण 80x200 आकार के लिए 40x100 स्प्राइट स्केल करता है।

<html> 
    <body> 
    <canvas id="canvas" width=80 height=200> 
    <script language="JavaScript">    
     function draw() { 
      var ctx = document.getElementById('canvas').getContext('2d'); 
      var img = new Image(); 
      img.src = 'http://gamemedia.wcgame.ru/data/2011-07-17/game-sprite-sheet.jpg'; 
      img.onload = function() { 
       // (image, sx, sy, sw, sh, dx, dy, dw, dh) 
       ctx.drawImage(img,0,0,40,100,0,0,80,200); 
      } 
     } 

     draw(); 

    </script> 
    </body>   
</html>

स्रोत

2011-12-09 19:35:15 Alex

मैंने वास्तव में विचार में कैनवास नहीं लिया! धन्यवाद! : डी – Tgwizman

सबसे अधिक संभव तरीका background-size सीएसएस संपत्ति का उपयोग करना सबसे आसान तरीका है। अधिकांश आधुनिक ब्राउज़र (IE 9+ FF4 +, Safari4 +, Chrome3 +) इसे समर्थन के रूप में आप कर सकते हैं निम्नलिखित:

एचटीएमएल:

<div id="mySprite"> 
</div>

सीएसएस:

#mySprite{ 
    height: 80px; /* 64px * 1.25 */ 
    width: 80px; /* 64px * 1.25 */ 
    background-image:url(my.png); 
    background-position: -0px -560px; /* pick specific one at -448px * 1.25 */ 
    background-size:640px 640px; /* scale image to 512px * 1.25 */ 
}

spritesheet साथ स्प्राइट है उस पर 64x64px आकार और उन्हें 80x80px तक स्केल करता है। यहां लाइव उदाहरण देखें: http://jsfiddle.net/Zgr5w/1/

रूप @Prusse ने कहा: आप भी transform: scale() उपयोग कर सकते हैं लेकिन यह कुछ कमियां भी हैं: ब्राउज़र समर्थन, अतिरिक्त स्थिति परिवर्तन, अन्य तत्वों के साथ संरेखण तोड़ा जा सकता है:

#mySprite{ 
    height: 64px; 
    width: 64px; 
    background-image:url(my.png); 
    background-position: -0px -448px; 
    transform:scale(1.25); 
    /* additional to compensate the position shift */ 
    position:relative; 
    top:10px; 
    left:10px; 
}

देखना उपर्युक्त दो दृष्टिकोणों का लाइव उदाहरण यहां: http://jsfiddle.net/Zgr5w/1/

स्रोत

2013-01-02 22:42:43 stot

महान उत्तर, और उदाहरण में आपकी टिप्पणियां बहुत उपयोगी हैं। – jedierikb

जावास्क्रिप्ट के साथ एक स्प्राइट शीट से एक स्प्राइट स्केल/खिंचाव/स्कू कैसे कर सकता हूं?

उत्तर

संबंधित मुद्दे