Как реализовать функционал stroke?

Question

[kirillleogky]

Я пытаюсь сделать реализацию stroke как на сайте piskel
Мой проект - simple-piskel.surge.sh/app/index.html


Как сделать именно такую реализацию рисования линий?
Подскажите может материал по теме или дайте пару советов как лучше так сделать, так как моя реализация плохая...

Comments

[Роман]

ссылка simple-piskel.surge.sh/app/index.html не открывается.

[kirillleogky]

Роман, все гут

[kirillleogky]

Роман, попробуйте simple-piskel.surge.sh и нажать crete sprite

[Роман]

kirillleogky,

[kirillleogky]

Роман, fertile-wash.surge.sh

Answer 1

[twobomb]

Корявенько получилось, ну первое что пришло в голову.
https://jsfiddle.net/twobomb/uyf27q0k/

Comments

[kirillleogky]

twobomb - fertile-wash.surge.sh

[kirillleogky]

Есть код который отвечает за рисование:

const choosePixelsSize = require('../penSize/choosePenSize');

const currColorWrapper = document.querySelector('.curr-icon');

function fillArea(topIndex, leftIndex, cells, cellsInRow) {
  window.console.log(leftIndex);
  const currPixelIndex = topIndex + leftIndex;
  const currPixels = choosePixelsSize(cells, topIndex, leftIndex, currPixelIndex, cellsInRow);
  for (let i = 0; i < currPixels.length; i += 1) {
    if (currPixels[i]) {
      currPixels[i].curcolor = `${currColorWrapper.style.backgroundColor}`;
      currPixels[i].fill(`${currColorWrapper.style.backgroundColor}`);
    }
  }
}

export default function drawStroke(startX, startY, pX, pY, cellH, cellsInRow, cellW, cells) {
  let startPointX = startX;
  let startPointY = startY;

  const currPointX = Math.floor(pX / cellH) * cellsInRow;
  const currPointY = Math.floor(pY / cellW);


  // for (let i = 0; i < cells.length; i += 1) {
  //   const cell = cells[i];
  //   if (cell) {
  //     cell.curcolor = 'rgb(112, 112, 112)';
  //     cell.fill('rgb(112, 112, 112)');
  //     cell.drawBorder('rgb(168, 168, 168)');
  //   }
  // }
  if (startX < currPointX && startPointY < currPointY) {
    while (startPointX !== currPointX && startPointY !== currPointY) {
      startPointX += cellsInRow;
      startPointY += 1;
      fillArea(startPointX, startPointY, cells, cellsInRow);
    }
  }
  if (startX > currPointX && startPointY > currPointY) {
    while (startPointX !== currPointX && startPointY !== currPointY) {
      startPointX -= cellsInRow;
      startPointY -= 1;
      fillArea(startPointX, startPointY, cells, cellsInRow);
    }
  }
  if (startX < currPointX && startPointY === currPointY) {
    while (startPointX !== currPointX) {
      startPointX += cellsInRow;
      fillArea(startPointX, startPointY, cells, cellsInRow);
    }
  }
  if (startX === currPointX && startPointY < currPointY) {
    while (startPointY !== currPointY) {
      startPointY += 1;
      fillArea(startPointX, startPointY, cells, cellsInRow);
    }
  }
  if (startX > currPointX && startPointY === currPointY) {
    while (startPointX !== currPointX) {
      startPointX -= cellsInRow;
      fillArea(startPointX, startPointY, cells, cellsInRow);
    }
  }
  if (startX === currPointX && startPointY > currPointY) {
    while (startPointY !== currPointY) {
      startPointY -= 1;
      fillArea(startPointX, startPointY, cells, cellsInRow);
    }
  }
  if (startX > currPointX && startPointY < currPointY) {
    while (startPointY !== currPointY) {
      startPointX -= cellsInRow;
      startPointY += 1;
      fillArea(startPointX, startPointY, cells, cellsInRow);
    }
  }
}

[kirillleogky]

@twobomb
и вот его расположение

[kirillleogky]

twobomb
когда я пытаюсь рисовать линии то они работают неправильно (при переключении на другую строку или столбик это видно)
как мне решить проблему с отображением?

[twobomb]

kirillleogky, я же предложил вам вариант

[kirillleogky]

twobomb, я хотел свою реализацию улучшить)

[twobomb]

kirillleogky, у вас там кучи не понятных аргументов, проверок и страшных вещей.
Это должно работать? В чем суть алгоритма в двух словах?
У меня например мы оперделяем две точки, начало и конец, находим угол между ними, и по сути начиная от начальной точки до конечной двигаемся с шагом равным 1 квадрату, и рисуем этот квадрат шаг за шагом, от начальной до конечной точки. А чтобы узнать сколько шагов сделать, мы находим расстояние от начальной до конечной точки.

[kirillleogky]

twobomb, Функция drawStroke запускается при onmousemove
Каждый пиксель у меня представлен в виде такого объекта:

const cell = {
        top,
        left,
        curcolor: 'rgb(112, 112, 112)',
        fill(color) {
          context.fillStyle = color;
          context.fillRect(this.top, this.left, cellWidth, cellHeight);
        },
        drawBorder(boderColor) {
          context.beginPath();
          context.strokeStyle = boderColor;

          context.moveTo(this.top - 0.5, this.left - 0.5);
          context.lineTo(this.top - 0.5, this.left + cellWidth - 0.5);
          context.lineTo(this.top + cellHeight - 0.5, this.left + cellWidth - 0.5);
          context.lineTo(this.top + cellHeight - 0.5, this.left - 0.5);
          context.lineTo(this.top - 0.5, this.left - 0.5);
          context.stroke();
        },
        getTop() {
          return this.top;
        },
        getLeft() {
          return this.left;
        },
      };

[kirillleogky]

twobomb,

let startPointX = startX; - начальная точка столбца
let startPointY = startY; - начальная точка строки

  const currPointX = Math.floor(pX / cellH) * cellsInRow;  - текущаяя точка столбца
  const currPointY = Math.floor(pY / cellW); - текущаяя точка строки

[kirillleogky]

twobomb, далее проверяется каково расстояние между пикселями
если например больше то включается функция fillArea(startPointX, startPointY, cells, cellsInRow) до тех пор пока пиксели не будут равны

[kirillleogky]

twobomb,
вот пример проблемы -
ТУТ я поставил console.log в :

if (startX < currPointX && startPointY < currPointY) {
    while (startPointX !== currPointX && startPointY !== currPointY) {
      startPointX += cellsInRow;
      startPointY += 1;
      window.console.log(startPointY);
      fillArea(startPointX, startPointY, cells, cellsInRow);
    }
  }

[kirillleogky]

twobomb, это номер строки
он должен быть равен 0 а потом как перекинул курсор вправо от 0 до 8

[twobomb]

kirillleogky, ну насколько я понял ваш алгоритм, по идее он будет работать типа так, что как то не очень

[twobomb]

kirillleogky, Хорошо он будет работать только на прямых(углах 90), и углах равных 45 градусам

[twobomb]

kirillleogky, Нарисуйте поле в пеинте, проведите линию или несколько и подумайте как определить квадраты с которыми она пересекается. мой алгоритм
Хотя приходит в голову еще один алгоритм, например пересечение отрезка и квадрата, нужно найти формулу и делать так, перебираем все квадраты и смотрим по этой формуле если они пересекаются то закрашиваем иначе нет....