Warum ist meine Zeichenfläche innerhalb der Seite versetzt?

Question

Es ist schwer zu erklären. Aber ich werde es versuchen, die gesamte Leinwand ist versetzt. Ich bin mir nicht sicher, wie das passiert ist oder wie ich es beheben kann. Wenn sich Ihre Maus beispielsweise in der oberen linken Ecke der Seite befindet und Sie in der Mitte beginnen, stimmt sie mit der oberen linken Ecke des Canvas-Elements selbst überein. Verwenden Sie Codeausschnitte, um zu verstehen, wovon ich spreche.

let currentColor = null;

let inputs = document.getElementsByClassName("style2");

for (const input of inputs) {
  input.addEventListener("click", (e) => {
    if (e.detail !== 2) e.preventDefault();
  });
}


let arr = [];

for (let i = 0; i < inputs.length + 1; i++) {
  arr.push(i.toString());
}
arr.shift();

for (const input of inputs) {
  input.addEventListener("input", (e) => {
    const { value } = document.getElementById(e.target.id);
    currentColor = value;
    $("#selectedColor").css("background-color", value);
  })
    input.addEventListener("click", (e) => {
    const { value }  = document.getElementById(e.target.id);
    currentColor = value;
    $("#selectedColor").css("background-color", value);
  })
}

var rangeslider = document.getElementById("sliderRange");
const setSize = document.getElementById("setSize")
const submit = document.getElementById("submit")

submit.addEventListener("click", (e) => {
  rangeslider.value = setSize.value 
})

const button = document.getElementById("clear")
// create canvas element and append it to document body
var canvas = document.getElementById('canvas');
// some hotfixes... ( ≖_≖)
// get canvas 2D context and set him correct size
var ctx = canvas.getContext('2d');
resize();

// last known position
var pos = { x: 0, y: 0 };

window.addEventListener('resize', resize);
button.addEventListener('click', clear)
document.addEventListener('mousemove', draw);
document.addEventListener('mousedown', setPosition);
document.addEventListener('mousemove', setPosition);


// new position from mouse event
function setPosition(e) {
  let canvas = document.getElementById("canvas")
  pos.x = e.clientX
  pos.y = e.clientY
}

// resize canvas
function resize() {
  ctx.canvas.width = 650;
  ctx.canvas.height = 375;
}

function draw(e) {
  // mouse left button must be pressed
  if (e.buttons !== 1) return;
  let canvas = document.getElementById('canvas');

  console.log(pos)
  ctx.beginPath(); // begin

  ctx.lineWidth = rangeslider.value;
  ctx.lineCap = 'round';
  ctx.strokeStyle = currentColor;

  ctx.moveTo(pos.x, pos.y); // from
  setPosition(e);
  ctx.lineTo(pos.x, pos.y); // to

  ctx.stroke(); // draw it!
}

function clear() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
}

html, body {
  height: 100%;
  width: 100%;
  font-family: sans-serif;
  background-color: #B3B7B5;
/*   overflow: hidden; */
}

.style2 {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-color: transparent;
  width: 35px;
  height: 35px;
  border: none;
  cursor: pointer;
}


.style2::-webkit-color-swatch {
  border-radius: 50%;
  border: 3px solid #000000;
}
.style2::-moz-color-swatch {
  border-radius: 50%;
  border: 3px solid #000000;
}

.box {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 5px;
  max-width: 320px;
  margin: 0 auto;
  padding: 7.5px 10px;
}

.box1 {
    display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 5px;
  max-width: 9999px;
  margin: 0 auto;
  padding: 10px 10px;
}

.box5 {
    display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 5px;
  max-width: 650px;
  margin: 0 auto;
  padding: 10px 10px;
}

.box2 {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 5px;
  max-width: 9999px;
  margin: 0 auto;
  padding: 10px 10px;
}

#selectedColor {
  width: 100px;
  height: 30px;
  border: 3px solid black;
  border-radius: 5px;
  background-color: black;
}

.canvas {
  height: 350px;
  width: 650px;
  border: 3px solid black;
  border-radius: 5px;
  background-color: white;
  cursor: crosshair;
  position: relative;
/*   left: 50%; */
}

#clear {
  width: 50px;
  height: 35px;
  font-size: 15px;
  border-radius: 5px;
}

#submit {
  width: 59px;
  height: 23px;
  margin: auto;
  left: 35%;
  border-radius: 5px;
  position: relative;
}

.rangeslider {
    width: 50%;
}
  
.myslider {
    -webkit-appearance: none;
    background: #FCF3CF  ;
    width: 50%;
    height: 20px;
    opacity: 2;
   }
  
  
.myslider::-webkit-slider-thumb {
    -webkit-appearance: none;
    cursor: pointer;
    background: #34495E  ;
    width: 5%;
    height: 20px;
}
  
  
.myslider:hover {
    opacity: 1;
}

.rangeslider {
  left: 38%;
  position: absolute;
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>replit</title>
  <link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

  <div class="box5">
    <canvas class="canvas" id="canvas"></canvas>
  </div>
  
  <div class="box1">
    <button id="clear">Clear</button><br>
  </div>

  <div class="box1">
    <div class="rangeslider">
          <input type="range" min="1" max="100" value="5" class="myslider" id="sliderRange">
    </div>
  </div>
  <div class=box1>
    <div>
      <input id="setSize" type="text" placeholder="Set Brush Size... (Max 100)">
      <br>
      <button type="submit" id="submit" for="setSize">Submit</button>
    </div>
  </div>
  
  <div class="box">
      <div class="container">
        <input type="color" value="#000000" class="style2" id="1" />
      </div>
      <div class="container">
        <input type="color" value="#ffffff" class="style2" id="2" />
      </div>
      <div class="container">
        <input type="color" value="#ffffff" class="style2" id="3" />
      </div>
      <div class="container">
        <input type="color" value="#ffffff" class="style2" id="4" />
      </div>
      <div class="container">
        <input type="color" value="#ffffff" class="style2" id="5" />
      </div>
  </div>

  <div class="box">
    <label for="selectedColor">Current Color:</label>
    <div id="selectedColor"></div>
  </div>

  <script src="script.js"></script>
</body>

</html>
 

Ich weiß, dass dieser Code etwas seltsam ist, aber lass es mich bitte wissen.

Answer 1

计算鼠标位置的方式不太合适，需要考虑到画布相对于视口的偏差。您不能使用 getBoundingClientRect() 来做到这一点：

function setPosition(e) {
  const canvas = document.getElementById("canvas");
  const bounds = canvas.getBoundingClientRect();
  pos.x = e.clientX - bounds.left;
  pos.y = e.clientY - bounds.top;
}

但是您还必须通过删除宽度和高度或设置与调整大小函数中相同的高度来修复 .canvas css 类。

https://codepen.io/Joulss/pen/BaPYgpZ?editors=1111

Answer 2

这实际上是一个很容易解决的问题。您只是忘记偏移 clientX 和 clientY。您会看到，这些坐标位于窗口空间中，因此 (0,0) 将位于窗口的左上角。如果您的画布也在左上角，那么一切看起来都很好，但在您的情况下，画布位于中心，因此坐标不会对齐。这可以通过将坐标减去画布的屏幕位置来修复。

这是一个例子：

function setPosition(e) {
  let canvas = document.getElementById("canvas")
  let bounds = canvas.getBoundingClientRect()
  pos.x = e.clientX - bounds.x
  pos.y = e.clientY - bounds.y
}

您可以在 https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect" rel="nofollow noreferrer">https:// /developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect