Добавление сенсорного ввода и исчезновение изображения через некоторое время - PullRequest
Новая
       1

Добавление сенсорного ввода и исчезновение изображения через некоторое время

0 голосов
/ 03 ноября 2018

Я пишу HTML-страницу для того, чтобы провести нейропсихологический тест. Мне нужно, чтобы изображение b.png исчезло через несколько секунд, чтобы позволить пациенту нарисовать изображение. Мне также нужно интегрировать сенсорный ввод, чтобы тестирование было доступно пользователям планшетов. 

<html>
    <script type="text/javascript">
    var canvas, ctx, flag = false,
        prevX = 0,
        currX = 0,
        prevY = 0,
        currY = 0,
        dot_flag = false;

    var x = "black",
        y = 2;
    
    function init() {
        canvas = document.getElementById('can');
        ctx = canvas.getContext("2d");
        w = canvas.width;
        h = canvas.height;
    
        canvas.addEventListener("mousemove", function (e) {
            findxy('move', e)
        }, false);
        canvas.addEventListener("mousedown", function (e) {
            findxy('down', e)
        }, false);
        canvas.addEventListener("mouseup", function (e) {
            findxy('up', e)
        }, false);
        canvas.addEventListener("mouseout", function (e) {
            findxy('out', e)
        }, false);
    }
    
    function color(obj) {
        switch (obj.id) {
            case "green":
                x = "green";
                break;
            case "blue":
                x = "blue";
                break;
            case "red":
                x = "red";
                break;
            case "yellow":
                x = "yellow";
                break;
            case "orange":
                x = "orange";
                break;
            case "black":
                x = "black";
                break;
            case "white":
                x = "white";
                break;
        }
        if (x == "white") y = 14;
        else y = 2;
    
    }
    
    function draw() {
        ctx.beginPath();
        ctx.moveTo(prevX, prevY);
        ctx.lineTo(currX, currY);
        ctx.strokeStyle = x;
        ctx.lineWidth = y;
        ctx.stroke();
        ctx.closePath();
    }
    
    function erase() {
        var m = confirm("Want to clear");
        if (m) {
            ctx.clearRect(0, 0, w, h);
            document.getElementById("canvasimg").style.display = "none";
        }
    }
    
    function save() {
        document.getElementById("canvasimg").style.border = "2px solid";
        var dataURL = canvas.toDataURL();
        document.getElementById("canvasimg").src = dataURL;
        document.getElementById("canvasimg").style.display = "inline";
    }
    
    function findxy(res, e) {
        if (res == 'down') {
            prevX = currX;
            prevY = currY;
            currX = e.clientX - canvas.offsetLeft;
            currY = e.clientY - canvas.offsetTop;
    
            flag = true;
            dot_flag = true;
            if (dot_flag) {
                ctx.beginPath();
                ctx.fillStyle = x;
                ctx.fillRect(currX, currY, 2, 2);
                ctx.closePath();
                dot_flag = false;
            }
        }
        if (res == 'up' || res == "out") {
            flag = false;
        }
        if (res == 'move') {
            if (flag) {
                prevX = currX;
                prevY = currY;
                currX = e.clientX - canvas.offsetLeft;
                currY = e.clientY - canvas.offsetTop;
                draw();
            }
        }
    }
    </script>
    <body onload="init()">
        <canvas id="can" width="800" height="800" style="position:absolute;top:10%;left:10%;border:2px solid;"></canvas>
                <div style="position:absolute;top:3%;left:45%;">Gomma</div>
                <div style="position:absolute;top:3%;left:50%;">Penna</div>
        <div style="position:absolute;top:5%;left:45%;width:15px;height:15px;background:white;border:2px solid;" id="white" onclick="color(this)"></div>
        <div style="position:absolute;top:5%;left:50%;width:17px;height:17px;background:black;" id="black" onclick="color(this)"></div>
        <img id="canvasimg" style="position:absolute;top:10%;left:52%;" style="display:none;">
        <input type="button" value="salva" id="btn" size="30" onclick="save()" style="position:absolute;top:2%;left:15%;">
        <p>Clicca su "Inizia" per iniziare il test.</p>

<button onclick="setTimeout(salvatest, 3000); immaginetest()">Inizia</button>

<script>
function salvatest() {
        document.getElementById("canvasimg").style.border = "2px solid";
        var dataURL = canvas.toDataURL();
        document.getElementById("canvasimg").src = dataURL;
        document.getElementById("canvasimg").style.display = "inline";
}
</script>
    <script>
        function immaginetest() {
        var src = "b.png";
        show_image("b.png", 512, 800, "absolute",300,100, 1, "<alt>");
    }


    function show_image(src, width, height, position,left,top, zIndex, alt) {
        var img = document.createElement("img");
        img.src = src;
        img.width = width;
        img.height = height
        img.style.position = position;
        img.style.left = left+'px';
        img.style.top = top+'px';
        img.style.zIndex = zIndex;
        img.alt = alt;

        document.body.appendChild(img);
        }
    </script>
    </div>
    </body>
    </html>

Я понятия не имею, что делать с этими двумя вещами, я не разработчик, я врач, поэтому мои знания в области кодирования в основном анекдотичны, это мой код.

1 Ответ

0 голосов
/ 03 ноября 2018

Взгляните на Нажмите здесь ! 

setTimeout(function() {
  //do your job here
}, 1000)
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...