개발 중에 캔버스를 사용하여 동시에 여러 장의 그림을 그려야 하는데 그림의 크기가 다르기 때문에 배열 앞의 그림을 먼저 로드한 다음 그리지 못해 순서가 늦어지는 경우가 있습니다. 예상한 것과 다릅니다(특히 도메인 간에 도메인 이름 리디렉션이 추가된 이미지의 경우 특히 그렇습니다). 내 솔루션은 먼저 모두 그려서 정렬한 다음 추가하는 것입니다. 필요한 노드.
<div id=myContent></div>imgArray = ['img1.png', 'img2.png'];re receiveArray = 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) => { 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) { //모든 그림이 로드되고 그려집니다. let sortArr = new Array(); receiveArray.forEach(ex => { //imgArray 순서로 모든 그림을 정렬합니다. sortArr[ex.id.split('img')[1]] = 예; }) sortArr.forEach(ex2 => { $myContent.appendChild(ex2) }) } })})사실 이 역시 로드된 이미지의 실제 크기를 판단하는 것이 불가능하기 때문에 다소 무력한 접근 방식이며, 도메인 이름을 리디렉션하면 작은 이미지가 먼저 로드되어 그려지기 때문에 이러한 현상이 증폭됩니다. 드로잉 후 정렬하는 방식을 채택하였습니다. 혹시 더 나은 방법을 생각하시는 분이 계시다면 바로잡아주시고 비판해 주시기 바랍니다.
위 내용은 이 기사의 전체 내용입니다. 모든 분들의 학습에 도움이 되기를 바랍니다. 또한 모든 분들이 VeVb Wulin Network를 지지해 주시길 바랍니다.