Как мы можем заставить холст оставаться на месте - PullRequest
Новая
       8

Как мы можем заставить холст оставаться на месте

0 голосов
/ 05 февраля 2019

Как можно заставить холст оставаться неподвижным, пока вы рисуете на нем на телефонах Android?У нас есть проект на Ionic, где приведенный ниже код используется, чтобы позволить конечному пользователю рисовать на элементе canvas, но когда он начинает рисовать, страница прокручивается вместе с ним.

Хотя, как ни странно, код останавливаетсяформа прокрутки вверх и вниз, если пользователь перетаскивает палец влево или вправо, но если они передвигаются пальцем вверх или вниз, прежде чем идти влево или вправо, страница прокручивается их движениями рисования, и в итоге они практически ничего не рисуют ...

Кто-нибудь видит, как я могу заставить прокрутку удерживаться, пока пользователь рисует на холсте? 

//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);

1 Ответ

0 голосов
/ 05 февраля 2019

В вашем шаблоне (ионной странице) вы можете использовать css для удаления эффектов отказов и резиновой ленты: 

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

в вашем scss: 

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