JavaScript холст и положение мыши - PullRequest
Новая
       38

JavaScript холст и положение мыши

0 голосов
/ 17 мая 2018

Я пытаюсь создать чертежную доску в HTML5 с помощью JavaScript, но положение инструментов (таких как карандаш, кисть и т. Д.) Отличается от того, что я думал.

Я обнаружил, что оно отличается из-за растрового изображения(?), поэтому я пытаюсь исправить это из других ответов, которые люди уже спрашивали, но мне не удалось ..

Как найти правильное положение мыши?

images

Вот мой HTML-код (я использую загрузчик) 

<div class="col-sm-10">
    <canvas id="c" width="900" height="500"></canvas>
</div>

Это js (карандашный код не мой, я нашел в интернете) 

var el = document.getElementById('c'); //캔버스
var ctx = el.getContext('2d');  //붓

function pencil () {
    var pos = getMousePos(el, e);

    el.onmousedown = function() {
      isDrawing = true;
      ctx.moveTo(pos.X, pos.Y);
    };

    el.onmousemove = function() {
      if (isDrawing) {
        ctx.lineTo(pos.X, pos.Y);
        ctx.stroke();
      }
    };

    el.onmouseup = function() {
      isDrawing = false;
    };
}

1 Ответ

0 голосов
/ 17 мая 2018

Я нашел функцию getMousePos здесь и похоже, что она будет работать с тем, что вы делаете. Но он принимает аргумент e (событие), который не будет определен там, где вы его использовали. Попробуйте переместить вызов на getMousePos в обработчике события, где событие определено.

Кроме того, isDrawing не было определено. 

var el = document.getElementById('c');
var ctx = el.getContext('2d');  //붓
ctx.strokeStyle = "#FF0000";

function pencil () {
  var isDrawing = false;

  el.onmousedown = function(e) {
    var pos = getMousePos(el, e);
    isDrawing = true;
    ctx.moveTo(pos.x, pos.y);
  };

  el.onmousemove = function(e) {
    var pos = getMousePos(el, e);
    if (isDrawing) {
      ctx.lineTo(pos.x, pos.y);
      ctx.stroke();
    }
  };

  el.onmouseup = function() {
    isDrawing = false;
  };
}

function getMousePos(canvas, evt) {
  var rect = canvas.getBoundingClientRect();
  return {
    x: evt.clientX - rect.left,
    y: evt.clientY - rect.top
  };
}

pencil()
<div class="col-sm-10">
    <canvas id="c" width="900" height="500"></canvas>
</div>
...