Сбрасывать addEventListener каждый 4-й клик - PullRequest
Новая
       6

Сбрасывать addEventListener каждый 4-й клик

0 голосов
/ 04 июля 2018

На странице веб-холста как сбросить события кликов после каждого определенного количества кликов? 

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>parallelogram</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
  <canvas id="canvas" width="800" height="600" style="border:solid 1px;margin:0;padding:0;"></canvas> 
</body>
</html>

<script type="text/javascript">
//Declare all the variables
  var first = {x: null, y: null};
  var second = {x: null, y: 0};
  var third = {x: null, y: null};
  var fourth = {x: null, y: null};
  var canvas = document.getElementById('canvas');
  var ctx = canvas.getContext('2d');
  var pointsNum = 0;

  //Code that draws a point on the canvas
  var drawpoint = function (x, y) {
        ctx.clearRect(0, 0, 11, 11);
        ctx.beginPath();
        ctx.lineWidth=3;
        ctx.strokeStyle = 'green';
        ctx.arc(x, y, 5.5, 0, Math.PI * 2, false);
        ctx.stroke();
    }

   canvas.addEventListener("click", function (e) {
        pointsNum++;
        if (pointsNum <= 4) {
            switch (pointsNum) {
                case 1:
                    first.x = e.pageX;
                    first.y = e.pageY;
                    console.log(pointsNum,first.x,first.y);
                    break;
                case 2:
                    second.x = e.pageX;
                    second.y = e.pageY;
                    console.log(pointsNum,second.x,second.y);
                    break;
                case 3:
                    third.x = e.pageX;
                    third.y = e.pageY;
                    console.log(pointsNum,third.x,third.y);
                    break; 
                 case 4:
                    fourth.x = e.pageX;
                    fourth.y = e.pageY;
                    console.log(pointsNum,fourth.x,fourth.y);
                    break;     
                }
                console.log(pointsNum);
                drawpoint(e.pageX, e.pageY);       
            }
    });
  </script>

Текущий консольный журнал выглядит следующим образом: 

1 124 105
2 308 105
3 165 268
4 374 275

Первое число - это pointsNum, а последующие два числа - это координаты x, y события щелчка. Как мне сбросить pointsNum после 4-го клика, чтобы получить координаты для каждого клика, плюс pointNum увеличивается с 1-4. Я пытался использовать цикл while перед событием click, а внутри события click и задав pointsNum == 0, оба параметра поддерживали непрерывную работу цикла без прерывания.

Ответы [ 4 ]

0 голосов
/ 04 июля 2018 

// Globals.
let points = []

// Draw Point.
const drawPoint = (context, points) => {
  context.clearRect(0, 0, canvas.width, canvas.height);
  points.forEach(({x, y}) => {
    context.beginPath()
    context.lineWidth=3
    context.strokeStyle = 'green'
    context.arc(x, y, 5.5, 0, Math.PI * 2, false)
    context.stroke()
  })
}

// Print Points.
const printPoints = points => {
 console.clear()
 points.forEach((p, i) => console.log(`${i+1}: ${p.x} ${p.y}`))
}

// Canvas Event Listener.
const canvas = document.getElementById('canvas')
canvas.addEventListener('click', e => {
  const context = canvas.getContext('2d')
  const x = e.pageX
  const y = e.pageY
  const coordinates = {x, y}
  points.push(coordinates)
  if (points.length >= 4) points = points.slice(-4)
  drawPoint(context, points)
  printPoints(points)
})
<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>parallelogram</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  </head>
  <body>
    <canvas id="canvas" width="800" height="600" style="border:solid 1px;margin:0;padding:0;"></canvas> 
  </body>
</html>
0 голосов
/ 04 июля 2018

Вы можете использовать clearRect() для сброса холста.

Метод CanvasRenderingContext2D.clearRect() API Canvas 2D устанавливает все пиксели в прямоугольнике, заданном начальной точкой (x, y) и размером (шириной, высотой), на прозрачный черный, стирая любое ранее нарисованное содержимое .

DEMO 

//Declare all the variables
var first = {
  x: null,
  y: null
};
var second = {
  x: null,
  y: 0
};
var third = {
  x: null,
  y: null
};
var fourth = {
  x: null,
  y: null
};
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var pointsNum = 0;

//Code that draws a point on the canvas
var drawpoint = function(x, y) {
  ctx.clearRect(0, 0, 11, 11);
  ctx.beginPath();
  ctx.lineWidth = 3;
  ctx.strokeStyle = 'green';
  ctx.arc(x, y, 5.5, 0, Math.PI * 2, false);
  ctx.stroke();
}

canvas.addEventListener("click", function(e) {
  pointsNum++;
  if (pointsNum <= 4) {
    switch (pointsNum) {
      case 1:
        first.x = e.pageX;
        first.y = e.pageY;
        console.log(pointsNum, first.x, first.y);
        break;
      case 2:
        second.x = e.pageX;
        second.y = e.pageY;
        console.log(pointsNum, second.x, second.y);
        break;
      case 3:
        third.x = e.pageX;
        third.y = e.pageY;
        console.log(pointsNum, third.x, third.y);
        break;
      case 4:
        fourth.x = e.pageX;
        fourth.y = e.pageY;
        pointsNum=0;
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        break;
    }
    drawpoint(e.pageX, e.pageY);
  }
});
<canvas id="canvas" width="800" height="600" style="border:solid 1px;margin:0;padding:0;"></canvas>
</body>

</html>

Если вы хотите просто сбрасывать pointsNum при каждом 4-м щелчке, то вы можете напрямую включить случай 4 pointsNum=0;. Так что в этом случае нет необходимости ставить условие if или else.

DEMO 

//Declare all the variables
var first = {
  x: null,
  y: null
};
var second = {
  x: null,
  y: 0
};
var third = {
  x: null,
  y: null
};
var fourth = {
  x: null,
  y: null
};
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var pointsNum = 0;

//Code that draws a point on the canvas
var drawpoint = function(x, y) {
  ctx.clearRect(0, 0, 11, 11);
  ctx.beginPath();
  ctx.lineWidth = 3;
  ctx.strokeStyle = 'green';
  ctx.arc(x, y, 5.5, 0, Math.PI * 2, false);
  ctx.stroke();
}

canvas.addEventListener("click", function(e) {
  pointsNum++;
  switch (pointsNum) {
    case 1:
      first.x = e.pageX;
      first.y = e.pageY;
      break;
    case 2:
      second.x = e.pageX;
      second.y = e.pageY;
      break;
    case 3:
      third.x = e.pageX;
      third.y = e.pageY;
      break;
    case 4:
      fourth.x = e.pageX;
      fourth.y = e.pageY;
      pointsNum = 0;
      break;
  }
  drawpoint(e.pageX, e.pageY);
});
<canvas id="canvas" width="800" height="600" style="border:solid 1px;margin:0;padding:0;"></canvas>
</body>

</html>
0 голосов
/ 04 июля 2018

Если иначе

У вас есть оператор if, который говорит if (pointsNum <= 4), теперь все, что вам нужно, это оператор else для сброса pointsNum

0 голосов
/ 04 июля 2018

Нет необходимости сбрасывать очкиNum. Пусть он начинается с 0 и продолжает увеличиваться с каждым кликом. Использование: 

    let c = pointsNum++%4;
    switch (c) {
        case 0:
            ...
        case 1:
            ...
        case 2:
            ...
        case 3:
            ...   
    }

Он будет автоматически «циклически изменяться» от 0 до 3.

...