在 iPad 上的网页上做笔记-解网

问：

我目前正在编写我的代码，想知道如何创建一个盒子，让 iPad 用户可以用手指/笔在盒子里做笔记。我以为我在某个地方看到了它并试图实现它，但它不起作用，也找不到我看到它的网页。

我正在尝试谷歌并使用来自不同网页的各种帮助。预期的结果应该是，我可以用手指或笔在这个网页上画画并做笔记。

let painting = false;

const canvas = document.getElementById('signatureCanvas');
const ctx = canvas.getContext('2d');

function startPosition(e) {
  painting = true;
  draw(e);
}

function finishedPosition() {
  painting = false;
  ctx.beginPath();
}

function draw(e) {
  if (!painting) return;
  ctx.lineWidth = 2;
  ctx.lineCap = 'round';

  // Adjust for touch events
  let clientX = e.clientX || e.touches[0].clientX;
  let clientY = e.clientY || e.touches[0].clientY;

  ctx.lineTo(clientX - canvas.offsetLeft, clientY - canvas.offsetTop);
  ctx.stroke();
  ctx.beginPath();
  ctx.moveTo(clientX - canvas.offsetLeft, clientY - canvas.offsetTop);
}

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

canvas.addEventListener('mousedown', startPosition);
canvas.addEventListener('mouseup', finishedPosition);
canvas.addEventListener('mousemove', draw);

// Touch event listeners
canvas.addEventListener('touchstart', startPosition);
canvas.addEventListener('touchend', finishedPosition);
canvas.addEventListener('touchmove', draw);

.canvas-container {
  border: 1px solid #ccc;
  width: 100%;
}

<div class="container">
  <div class="row form-section centered-content" style="background-color:lavender;">
    <div class="col-md-12">
      <div class="canvas-container">
        <canvas id="signatureCanvas" width="300" height="150"></canvas>
      </div>
      <button type="button" class="btn btn-secondary mt-2" onclick="clearCanvas()">Notiz löschen</button>
    </div>
  </div>
</div>

JavaScript HTML CSS 画布

let painting = false;

const canvas = document.getElementById('signatureCanvas');
const ctx = canvas.getContext('2d');

// Adjust canvas for high DPI displays
function adjustCanvas() {
  const ratio = window.devicePixelRatio || 1;
  const width = canvas.offsetWidth * ratio;
  const height = canvas.offsetHeight * ratio;
  canvas.width = width;
  canvas.height = height;
  canvas.style.width = `${canvas.offsetWidth}px`;
  canvas.style.height = `${canvas.offsetHeight}px`;
  ctx.scale(ratio, ratio);
}
adjustCanvas();
window.onresize = adjustCanvas;

function startPosition(e) {
  // Prevents scrolling
  e.preventDefault();
  painting = true;
  draw(e);
}

function finishedPosition() {
  painting = false;
  ctx.beginPath();
}

function draw(e) {
  if (!painting) return;
  ctx.lineWidth = 2;
  ctx.lineCap = 'round';

  let clientX = e.clientX || e.touches[0].clientX;
  let clientY = e.clientY || e.touches[0].clientY;

  ctx.lineTo(clientX - canvas.getBoundingClientRect().left, clientY - canvas.getBoundingClientRect().top);
  ctx.stroke();
  ctx.beginPath();
  ctx.moveTo(clientX - canvas.getBoundingClientRect().left, clientY - canvas.getBoundingClientRect().top);
}

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

canvas.addEventListener('mousedown', startPosition);
canvas.addEventListener('mouseup', finishedPosition);
canvas.addEventListener('mousemove', draw);
canvas.addEventListener('touchstart', startPosition);
canvas.addEventListener('touchend', finishedPosition);
canvas.addEventListener('touchmove', draw);

.canvas-container {
  border: 1px solid #ccc;
  width: 100%;
  height: 300px;
  /* Adjust this as needed */
}

<div class="container">
  <div class="row form-section centered-content" style="background-color:lavender;">
    <div class="col-md-12">
      <div class="canvas-container">
        <canvas id="signatureCanvas"></canvas>
      </div>
      <button type="button" class="btn btn-secondary mt-2" onclick="clearCanvas()">Notiz löschen</button>
    </div>
  </div>
</div>

在 iPad 上的网页上做笔记

Taking notes on a webpage on an iPad

评论

评论