คำอธิบายโดยละเอียดเกี่ยวกับลำดับการจัดเรียงรูปภาพหลายภาพที่วาดบนผืนผ้าใบ

ในระหว่างการพัฒนาหากจำเป็นต้องใช้ Canvas วาดภาพหลายๆ ภาพพร้อมกัน แต่เนื่องจากขนาดของภาพแตกต่างกันรูปภาพที่อยู่ด้านหน้าอาเรย์จึงอาจไม่โหลดก่อนแล้วจึงวาดซึ่งอาจทำให้เกิดการสั่งการได้ ของภาพที่วาดมาเพื่อจัดเรียง มันแตกต่างจากที่ฉันคาดไว้ (โดยเฉพาะอย่างยิ่งเนื่องจากเห็นได้ชัดเจนโดยเฉพาะสำหรับรูปภาพที่มีการเพิ่มการเปลี่ยนเส้นทางชื่อโดเมนข้ามโดเมน) โหนดที่ต้องการ

 <div id=myContent></div>let imgArray = ['img1.png', 'img2.png'];let getsArray = new Array();let $myContent = document.getELmentById(myContent);let {imgW, imgH} = {300, 300};let Canvas = document.createElement('canvas');let ctx = Canvas.getContext(2d);let scaleBy = 2;Canvas.width = imgW * scaleBy;Canvas.height= imgH * scaleBy;imgArray.forEach((e, idx) => { la img = new Image(); img. src = e; e.addEventListener('load', () => { ctx.drawImage(img, 0, 0, imgW * scaleBy, imgH * scaleBy); ให้ imgCont = new Image(); imgCont.src = Canvas.toDataURL(); imgCont.id = 'img' + idx; ถูกดึงโหนดจะถูกรวบรวมไว้ในอาร์เรย์ ลำดับที่นี่อาจแตกต่างจากลำดับของ imgArray ถ้า (receiveArray.length === imgArray.length) { // รูปภาพทั้งหมดถูกโหลดและวาดแล้ว ให้ sortArr = new Array(); getsArray.forEach(ex => { //จัดเรียงรูปภาพที่วาดทั้งหมดตามลำดับ imgArray sortArr[ex.id.split('img')[1]] = เช่น; }) sortArr.forEach(ex2 => { $myContent.appendChild(ex2) }) } })})

ในความเป็นจริง นี่เป็นแนวทางที่ค่อนข้างช่วยอะไรไม่ได้ เนื่องจากไม่สามารถระบุขนาดที่แท้จริงของรูปภาพที่โหลดได้ ดังนั้น รูปภาพขนาดเล็กจะถูกขยายออกก่อน วิธีการเรียงลำดับหลังการวาดถูกนำมาใช้ หากใครคิดวิธีที่ดีกว่าโปรดแก้ไขและวิพากษ์วิจารณ์

ข้างต้นคือเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์ต่อการศึกษาของทุกคน ฉันหวังว่าทุกคนจะสนับสนุน VeVb Wulin Network