شرح تفصيلي لترتيب ترتيب الصور المتعددة المرسومة على القماش

أثناء التطوير، إذا كنت بحاجة إلى استخدام اللوحة القماشية لرسم صور متعددة في نفس الوقت، ولكن نظرًا لاختلاف أحجام الصور، فقد لا يتم تحميل الصورة الموجودة في مقدمة المصفوفة أولاً ثم رسمها، مما قد يتسبب في حدوث هذا الأمر من الصور المرسومة التي سيتم ترتيبها، فهي مختلفة عما كنت أتوقعه (خاصة أنه واضح بشكل خاص بالنسبة للصور التي تمت إضافة إعادة توجيه اسم المجال إليها عبر المجالات). العقد المطلوبة.

 <div id=myContent></div>let imgArray = ['img1.png', 'img2.png'];let riseArray = new Array();let $myContent = document.getELmentById(myContent);let {imgW, imgH} = {300, 300};let Canvas = document.createElement('canvas');let ctx = Canvas.getContext(2d);letscaleBy = 2;Canvas.width = imgW *scaleBy;Canvas.height= imgH *scaleBy;imgArray.forEach((e, idx) => { Let img = new Image(); img. src = e; e.addEventListener('load', () => { ctx.drawImage(img, 0, 0, imgW *scaleBy, imgH *scaleBy); Let imgCont = new Image(); imgCont.src = Canvas.toDataURL(); imgCont.id = 'img' + idx;receiveArray.push(imgCont); يتم تجميع العقد في مصفوفة. قد يختلف الترتيب هنا عن ترتيب imgArray if (receiveArray.length === imgArray.length) {. // يتم تحميل جميع الصور ورسمها LetsortArr = new Array();receiveArray.forEach(ex => { // فرز جميع الصور المرسومة بترتيب imgArraysortArr[ex.id.split('img')[1]] = ex;)sortArr.forEach(ex2 => { $myContent.appendChild(ex2) }) } })})

في الواقع، يعد هذا أيضًا أسلوبًا عاجزًا إلى حد ما، لأنه من المستحيل تحديد الحجم الفعلي للصور المحملة، وسيتم تحميل الصور الصغيرة ورسمها أولاً، إذا تمت إعادة توجيه اسم المجال، فسيتم تضخيم هذه الظاهرة اعتماد طريقة الفرز بعد الرسم. ومن يفكر بطريقة أفضل فليصحح وينتقد.

ما ورد أعلاه هو المحتوى الكامل لهذه المقالة وآمل أن يكون مفيدًا لدراسة الجميع وآمل أيضًا أن يدعم الجميع شبكة VeVb Wulin.