javascript - Changing Pattern Size in Html5 Canvas -

मेरी समस्या: मेरे पास एक छवि ऑब्जेक्ट है, जिसका उपयोग पैटर्नऑबैक्ट बनाने के लिए किया जा रहा है मेरी समस्या यह है, कि मैंने पैटर्न बनाने से पहले छवि के गुणों को चौड़ाई और ऊंचाई में बदल दिया है, लेकिन यह वास्तव में छवि को रिमैप नहीं करता (और यह भी कोई समस्या नहीं है) )। बात यह है, कि मुझे अब एक पैटर्न मिल गया है, जो कि छवि के मुकाबले एक अलग आकार (मूल छवि आकार) है अगर मैं उस पैटर्न की भरण शैली के साथ एक रेखा खींचना चाहता हूं, तो वह फिट नहीं है (क्योंकि मुझे नए आकार के एक पैटर्न की आवश्यकता है)।

मेरा प्रश्न: वहां है एक आसान तरीका है, यह प्राप्त करने के लिए कि पैटर्न की चौड़ाई और ऊंचाई को समायोजित किया जा सकता है?

मेरी कोशिश करता है और मैं उन्हें पसंद नहीं क्यों करता हूं:

1) नए आकार के साथ एक कैनवास में मूल छवि को प्रस्तुत करना और उस से पैटर्न बनाना। इसका उपयोग नहीं किया, क्योंकि कैनवास के परिणामस्वरूप पैटर्न को सीधे लोड नहीं किया जा सकता है और बहुत धीरे से रेंडर किया जा रहा है। लेकिन मैं उस पैटर्न को सीधे चाहता हूं

2) नए छवि आकार और मूल एक के बीच भिन्नता की गणना करें, रेखा के संदर्भ में चौड़ाई बदलें, ताकि पैटर्न की ऊंचाई ठीक हो जाए और रेखा को नीचे पैमाने पर लाया जाए, इसलिए यह है एक अच्छा आकार इसका प्रयोग नहीं किया क्योंकि मैं रीयलटाइम में रेंडर करता हूं और वेबप्प्स में बाद में इसका उपयोग करने के लिए यह बहुत धीमा है।

उन्नत में धन्यवाद! कैनवास का उपयोग करना (आपका चरण 1) सबसे लचीला तरीका है।

यह किसी कैनवास का इस्तेमाल सीधे एक छवि का उपयोग करने के बजाय दूसरे कैनवास पर करने के लिए धीमा नहीं है। वे दोनों एक ही तत्व आधार का उपयोग करते हैं (जैसे कि आप किसी छवि के साथ करते हैं, जैसे कि आप एक बिटमैप को धक्का दे रहे हैं)।

( अपडेट : शैली के रूप में पैटर्न का प्रयोग करना एक अतिरिक्त अधिक हाल के ब्राउज़रों में पैटर्न के लिए एक स्थानीय रूपांतरण मैट्रिक्स का चरण।)

पैटर्न के आकार में एक नया कैनवास बनाएं और इसमें छवि खींचें:

  PatternCtx.drawImage (आईएमजी, 0, 0, पैटर्नवड्थ, पैटर्नहाइट);   
 फिर पैटर्न के आधार के रूप में पैटर्न के कैनवास का उपयोग करें (आंतरिक रूप से पैटर्न को इस चित्र को पहली बार खींचा जाता है, वहां से, यदि संभव हो, तो यह सिर्फ तब तक युगल हो जाता है जब तक कि इसमें न हो पूरे कैनवास भर जाता है)।  
 दूसरा विकल्प है छवियों को प्री-स्केल करने के लिए सभी आकारों की जरूरत है, उन्हें सब लोड करें, और तब छवि का चयन करें, जिसकी आपको आवश्यकता है ।  
 तीसरी छवि खुद को एक पैटर्न के रूप में आकर्षित करना है हालांकि यह अंतर्निहित पद्धति की तुलना में इतनी कुशल नहीं है, हालांकि उपरोक्त विधि (आंतरिक) का उपयोग करके आप एक उपयोगी परिणाम प्राप्त कर सकते हैं।  
 मैनुअल पैटर्निंग का उदाहरण:  
 < / P> 
 
 < प्री क्लास = "स्निपेट-कोड-जेएस लांग-जेएस प्रायश्चित-ओवरराइड">  var ctx = canvas.getContext ('2d'); Var img = नया चित्र (); Img.onload = function () {fillPattern (यह, 64, 64); Change.onchange = change.oninput = function () {fillPattern (आईएमजी, this.value, this.value); }}; Img.src = "//i.stack.imgur.com/tkBVh.png"; // छवि के साथ छवि के साथ कैनवास आकार w पर, एच फ़ंक्शन भरपैटर्न (आईएमजी, डब्ल्यू, एच) {// ctx.drawImage (आईएमजी, 0, 0, डब्ल्यू, एच) पर एक बार आकर्षित करें; जबकि (w & lt; canvas.width) {ctx.drawImage (कैनवास, डब्ल्यू, 0); W & lt; & lt; = 1; // शिफ्ट 1 = * 2 लेकिन थोड़ा तेज} जबकि (एच & lt; कैनवास। हाइट) {ctx.drawImage (कैनवास, 0, एच); ज & lt; & lt; = 1; }}   
  & lt; input id = change type = range min = 8 max = 120 मान = 64 & gt; & lt; br & gt; & Lt; कैनवास आईडी = कैनवास चौड़ाई = 500 ऊंचाई = 400> gt; & lt; / canvas & gt;     
 (या साथ)।