Question

当您在Android手机上绘画时，如何迫使画布保持静止？我们在Ionic中有一个项目，其中的以下代码用于允许最终用户在画布元素上绘图，但是当他开始绘图时，页面将随他滚动。

虽然奇怪，但是如果用户向左或向右拖动，代码会阻止表单上下滚动，但是如果在向左或向右移动手指之前向上或向下移动手指，则页面会随着绘制动作而滚动，并且最终基本上什么都没画出来...

有人看到我如何在用户画在画布上时强制保持滚动吗？

//employer_signature_canvas setup
var employer_signature_canvas = document.getElementById("employer_my_canvas");
var ctx = employer_signature_canvas.getContext("2d");
ctx.strokeStyle = "#222222";
ctx.lineWith = 2;

// Set up mouse events for drawing
var drawing = false;
var mousePos = { x:0, y:0 };
var lastPos = mousePos;
employer_signature_canvas.addEventListener("mousedown", function (e) {
        drawing = true;
  lastPos = getMousePos(employer_signature_canvas, e);
}, false);
employer_signature_canvas.addEventListener("mouseup", function (e) {
  drawing = false;
}, false);
employer_signature_canvas.addEventListener("mousemove", function (e) {
  mousePos = getMousePos(employer_signature_canvas, e);
}, false);

// Get the position of the mouse relative to the employer_signature_canvas
function getMousePos(employer_signature_canvasDom, mouseEvent) {
  var rect = employer_signature_canvasDom.getBoundingClientRect();
  return {
    x: mouseEvent.clientX - rect.left,
    y: mouseEvent.clientY - rect.top
  };
}

// Get a regular interval for drawing to the screen
window.requestAnimFrame = (function (callback) {
        return window.requestAnimationFrame || 
           window.webkitRequestAnimationFrame ||
           window.mozRequestAnimationFrame ||
           window.oRequestAnimationFrame ||
           window.msRequestAnimaitonFrame ||
           function (callback) {
        window.setTimeout(callback, 1000/60);
           };
})();

// Draw to the employer_signature_canvas
function renderemployer_signature_canvas() {
  if (drawing) {
    ctx.moveTo(lastPos.x, lastPos.y);
    ctx.lineTo(mousePos.x, mousePos.y);
    ctx.stroke();
    lastPos = mousePos;
  }
}

// Allow for animation
(function drawLoop () {
  requestAnimFrame(drawLoop);
  renderemployer_signature_canvas();
})();



    // Set up touch events for mobile, etc
employer_signature_canvas.addEventListener("touchstart", function (e) {
        mousePos = getTouchPos(employer_signature_canvas, e);
  var touch = e.touches[0];
  var mouseEvent = new MouseEvent("mousedown", {
    clientX: touch.clientX,
    clientY: touch.clientY
  });
  employer_signature_canvas.dispatchEvent(mouseEvent);
}, false);
employer_signature_canvas.addEventListener("touchend", function (e) {
  var mouseEvent = new MouseEvent("mouseup", {});
  employer_signature_canvas.dispatchEvent(mouseEvent);
}, false);
employer_signature_canvas.addEventListener("touchmove", function (e) {
  var touch = e.touches[0];
  var mouseEvent = new MouseEvent("mousemove", {
    clientX: touch.clientX,
    clientY: touch.clientY
  });
  employer_signature_canvas.dispatchEvent(mouseEvent);
}, false);

// Get the position of a touch relative to the employer_signature_canvas
function getTouchPos(employer_signature_canvasDom, touchEvent) {
  var rect = employer_signature_canvasDom.getBoundingClientRect();
  return {
    x: touchEvent.touches[0].clientX - rect.left,
    y: touchEvent.touches[0].clientY - rect.top
  };
}

// Prevent scrolling when touching the employer_signature_canvas
document.body.addEventListener("touchstart", function (e) {
  if (e.target == employer_signature_canvas) {
    e.preventDefault();
  }
}, false);
document.body.addEventListener("touchend", function (e) {
  if (e.target == employer_signature_canvas) {
    e.preventDefault();
  }
}, false);
document.body.addEventListener("touchmove", function (e) {
  if (e.target == employer_signature_canvas) {
    e.preventDefault();
  }
}, false);

Answer 1

在模板（离子页面）中，可以使用css消除反弹和橡皮筋效果：

<ion-content no-bounce class="no-scroll"><ion-content>

在您的scss中：

.no-scroll .scroll-content {
    overflow: hidden;
    float: none;
}

我们如何才能迫使画布保持静止

1 个答案: