Рисование линии с помощью мыши на html холст не рисует линию в правильном положении - PullRequest
Новая
       9

Рисование линии с помощью мыши на html холст не рисует линию в правильном положении

1 голос
/ 25 апреля 2020

Я могу нарисовать линию с помощью мыши на html холсте в правильном положении. Ниже приведен код.

HTML: 

<html>
<head></head>
<body onload="InitThis();">
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
    <script type="text/javascript" src="index.js"></script>
    <div align="center">
        <canvas id=c width="500" height="200" style="border:2px solid black"></canvas>
    </div>
</body>
</html>

index. js: 

var mousePressed = false;
var lastX, lastY;
var ctx;

function InitThis() {
    ctx = document.getElementById('c').getContext("2d");
    const canvas = document.querySelector('#c');

    $('#c').mousedown(function (e) {
        mousePressed = true;
        Draw(e.pageX - canvas.offsetLeft, e.pageY - canvas.offsetTop, false);
    });

    $('#c').mousemove(function (e) {
        if (mousePressed) {
            Draw(e.pageX - canvas.offsetLeft, e.pageY - canvas.offsetTop, true);
        }
    });

    $('#c').mouseup(function (e) {
        mousePressed = false;
    });
        $('#c').mouseleave(function (e) {
        mousePressed = false;
    });
}

function Draw(x, y, isDown) {
    if (isDown) {
        ctx.beginPath();
        ctx.strokeStyle = "blue";
        ctx.lineWidth = 9;
        ctx.lineJoin = "round";
        ctx.moveTo(lastX, lastY);
        ctx.lineTo(x, y);
        ctx.closePath();
        ctx.stroke();
    }
    lastX = x; lastY = y;
}

Но когда я включил видео и переместил положение холста в html, линия рисуется, когда я использую мышь, но не в том месте, где я щелкнул мышью. Он рисуется значительно ниже позиции мыши.

HTML: 

<html>
<head></head>
<body onload="InitThis();">
    <link rel="stylesheet" href="index.css" />
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
    <script type="text/javascript" src="index.js"></script>
    <div align="center">
        <video id=v controls loop autoplay muted>
          <source src="http://techslides.com/demos/sample-videos/small.mp4" type=video/mp4>-
        </video>
        <canvas id=c style="border:2px solid black"></canvas>
    </div>
</body>
</html>

index. css: 

#c {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 400;
    height: 300;
}

#v {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 400;
    height: 300;
}

index. js совпадает с первой программой. Изначально я думал, что это происходит из-за элемента видео. Но даже после удаления элемента видео, та же самая проблема происходит. Я думал из-за позиции как «абсолют». Но мне нужны элементы canvas и video в тех же позициях, которые я упомянул в index. css. Может кто-нибудь, пожалуйста, дайте мне знать, как решить эту проблему.

Примечание: Это работает нормально, когда я тестирую с использованием codepen (https://codepen.io/adinakr/pen/OJymJNj). Но когда я пробую это прямо в браузерах, проблема возникает.

1 Ответ

1 голос
/ 25 апреля 2020

Во-первых, объединять top: 0px;, bottom: 0px;, right: 0px; и left: 0px; вместе не имеет смысла.

Во-вторых, я не рекомендую использовать width: 400px; и height: 300px; с <canvas>, потому что они уменьшают его. Вот почему он рисуется в неправильной позиции.

Поэтому вместо этого используйте атрибуты width и height в элементе <canvas>.

Вот пример: 

<canvas width="800" height="600"></canvas>

Вот ваш код: 

var mousePressed = false;
var lastX, lastY;
var ctx;

function InitThis() {
    ctx = document.getElementById('c').getContext("2d");
    
    const canvas = document.querySelector('#c');

    $('#c').mousedown(function (e) {
        mousePressed = true;
        //Draw(e.pageX - $(this).offset().left, e.pageY - $(this).offset().top, false);
        Draw(e.pageX - canvas.offsetLeft, e.pageY - canvas.offsetTop, false);
    });

    $('#c').mousemove(function (e) {
        if (mousePressed) {
            //Draw(e.pageX - $(this).offset().left, e.pageY - $(this).offset().top, true);
            Draw(e.pageX - canvas.offsetLeft, e.pageY - canvas.offsetTop, true);
        }
    });

    $('#c').mouseup(function (e) {
        mousePressed = false;
    });
	    $('#c').mouseleave(function (e) {
        mousePressed = false;
    });
}

function Draw(x, y, isDown) {
    if (isDown) {
        ctx.beginPath();
        ctx.strokeStyle = "blue";
        ctx.lineWidth = 9;
        ctx.lineJoin = "round";
        ctx.moveTo(lastX, lastY);
        ctx.lineTo(x, y);
        ctx.closePath();
        ctx.stroke();
    }
    lastX = x; lastY = y;
}

function clearArea() {
    // Use the identity matrix while clearing the canvas
    ctx.setTransform(1, 0, 0, 1, 0, 0);
    ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
}
#c {
    position: absolute;
    top: 0;
    //bottom: 0;
    left: 0;
    //right: 0;
    //width: 400;
    //height: 300;
}

#v {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 400;
    height: 300;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
<head>
</head>
<body onload="InitThis();">
    <link rel="stylesheet" href="index.css" />
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
    <script type="text/javascript" src="index.js"></script>
    <div align="center">
        <video id=v controls loop autoplay muted>
          <source src="http://techslides.com/demos/sample-videos/small.mp4" type=video/mp4>
        </video>
        <canvas id=c></canvas>
        <!--<br /><br />
        <button onclick="javascript:clearArea();return false;">Clear Area</button> -->
    </div>
</body>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...