HTML CANVAS - Проблема с предварительной загрузкой или загрузкой OnLoad - Почему я должен щелкнуть дважды? - PullRequest
Новая
       44

HTML CANVAS - Проблема с предварительной загрузкой или загрузкой OnLoad - Почему я должен щелкнуть дважды?

0 голосов
/ 16 марта 2019

У меня есть HTML-страница с двумя полотнами рядом. Левый имеет кликабельную верхнюю область. Правильный - это то место, где происходит рисование. Я хочу, чтобы пользователь щелкнул область слева, которая загрузит новое изображение справа, и заменит ту, которая уже есть, но мне нужно дважды щелкнуть, чтобы появилось новое изображение. Почему это? Смотрите код.

HTML 

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style>
#centerAll {
margin-left:auto;
margin-right:auto;
width:1300px;
}
</style>
</head>
<body>
<div id="centerAll">
<canvas id="TheLeftCanvas" width="300" height="500" 
style="border:2px solid #999999;"></canvas>
<canvas id="TheRightCanvas" width="900" height="500" 
style="border:2px solid #999999;"></canvas>
<script type="text/javascript" src="whyClickTwiceForImage.js"> 
</script>
</div>
</body>
</html>

И JAVASCRIPT 

window.addEventListener("load", eventWindowLoaded, false);

function eventWindowLoaded () {
    canvasApp();
}
function canvasApp() {
    var rightCanvas = document.getElementById("TheRightCanvas");         
//THE EMPTY CANVAS ON THE RIGHT, WHICH DRAWS THINGS
    var rightCtx = rightCanvas.getContext("2d");
    var leftCanvas = document.getElementById("TheLeftCanvas");   
//THE EMPTY CANVAS ON THE LEFT, WHICH HANDLES USER CLICKS
    var leftCtx = leftCanvas.getContext("2d");

    var currentMouseXcoor = 0;
    var currentMouseYcoor = 0;

    var imagesToLoad = 0;   //USED TO PRE-LOAD SOME OTHER VISUALS, BEFORE THE USER STARTS
    var imagesLoaded = 0;

    var picturesTheUserCanChoose = ["pic01.png", "pic02.png", 
"pic03.png", "pic04.png", "pic05.png"];
    var nameOfPicTheUserChose = "pic05.png";    //LET'S JUST SAY "pic05.png" IS A PLACEHOLDER PICTURE... TO START OFF

    var legitMouseClick = 0;    //DID THE USER CLICK IN THE UPPER REGION OF THE LEFT CANVAS?

        var loaded = function(){    // "LOADED" AND "LOAD IMAGE" ARE USED TO PRELOAD ALL THOSE OTHER VISUALS BEFORE THE USER STARTS
            imagesLoaded += 1;
            if(imagesLoaded === imagesToLoad){
                    imagesToLoad = 0;
                imagesLoaded = 0;
                drawScreen();  // OK... ALL LOADED.... SO DRAW THE SCREEN
            }
        }
    var loadImage = function(url){  // "LOADED" AND "LOAD IMAGE" ARE USED TO PRELOAD ALL THOSE OTHER PICS BEFORE THE USER STARTS
            var image = new Image();   
            image.addEventListener("load",loaded);
            imagesToLoad += 1;  // ADD THE NUMBER TO THE IMAGES NEEDED TO BE LOADED
            image.src = url;
            return image;  // ...AND RETURN THE IMAGE
            }
//--------------------------------------------------------------
    leftCanvas.addEventListener('mouseup', function(evt) { var 
mousePos = doMouseUp(leftCanvas, evt);
        currentMouseXcoor = mousePos.x; currentMouseYcoor = 
mousePos.y; processMousePosition();}, false);
//--------------------------------------------------------------
    function drawScreen(){
        clearScreen();
        rightCtx.drawImage(picture1,0,0,100,100);
    }
//THIS FUNCTION PRESUMABLY LOADS IMAGES ON-THE-FLY... BUT WHY DOES THE LEFT CANVAS REGION HAVE TO BE CLICKED TWICE FOR THE NEW IMAGE TO SHOW?
    function processMousePosition() {
        if(currentMouseYcoor >= 0 && currentMouseYcoor <= 50){   
//IF THE CLICK IS IN THE UPPER REGION OF THE LEFT CANVAS
            nameOfPicTheUserChose = picturesTheUserCanChoose[0]; 
//WE'LL SAY THE USER CHOSE THE VERY FIRST PIC IN THE ARRAY
            picture1.src = ("picturesFolder/"+ nameOfPicTheUserChose); 
            picture1.onload = legitMouseClick = 1;//I JUST MADE UP FOR SOMETHING TO HAPPEN WHEN THE NEW PICTURE LOADS???
            alert(nameOfPicTheUserChose);   // THE ALERT CORRECTLY SHOWS THE NAME OF THE FIRST PIC IN THE ARRAY
        }
        drawScreen();
    }
    function doMouseUp(leftCanvas, evt){
            var rect = leftCanvas.getBoundingClientRect();
            return { x: evt.clientX - rect.left, y: evt.clientY - rect.top};     
    }                                        
    function clearScreen(){                             
        rightCtx.clearRect(0, 0, 900, 500);                  
        leftCtx.clearRect(0, 0, 300, 500);                   
    }
    //var someOtherVisual1 = 
//loadImage("backgroundArtFolder/someOtherVisual1.jpg");
    //var someOtherVisual2 = 
//loadImage("backgroundArtFolder/someOtherVisual2.png");
    //var someOtherVisual3 = 
//loadImage("backgroundArtFolder/someOtherVisual3.png");
    //var someOtherVisual4 = 
//loadImage("backgroundArtFolder/someOtherVisual4.png");
    //var someOtherVisual5 = 
//loadImage("backgroundArtFolder/someOtherVisual5.png");

    var picture1 = loadImage("picturesFolder/pic05.png");    
//LET'S JUST PRELOAD "pic05.png" AS A PLACEHOLDER... TO START OFF
}

1 Ответ

0 голосов
/ 16 марта 2019

Вы можете изменить загрузку изображения при клике в js-файле picture1.src = ("picturesFolder/"+ nameOfPicTheUserChose); на picture1 = loadImage("picturesFolder/"+nameOfPicTheUserChose); и picture1.onload = legitMouseClick = 1; на 'legitMouseClick = 1'

...