html5 canvas замирает проблема выцветания, когда он должен быть solid цвета - PullRequest
Новая
       5

html5 canvas замирает проблема выцветания, когда он должен быть solid цвета

0 голосов
/ 13 января 2020

Я работаю над незнакомым кодом и пытаюсь устранить странную ошибку. По сути, на холсте есть разные разделы, и цель состоит в том, чтобы рассчитать процент заполненного раздела. Существует два разных цвета (красный и желтый, с указанными значениями c RGB и Hex), которые можно использовать для рисования линии в сечении, например, штрихом bru sh. Когда я рисую весь раздел одним цветом,% заполненного раздела отображается правильно на 100%. Однако, если я go вернусь назад и нарисую линию другого цвета в сечении, небольшое количество пикселей не соответствует ни одному из указанных значений c RGB, и поэтому% превращается в 99%. Когда я использовал средство просмотра изображений и взорвал изображение, я мог видеть, что большая часть нарисованной линии в порядке, но внешние края имеют градиентоподобный характер, который исчезает в другом цвете.

section image

pixelated image boundary

Этот код используется для рисования на холсте: 

handleMouseMove() {
    const canvas = this.props.canvasInfo;
    const context = canvas.getContext('2d');

    if (!(this.props.canvasObject && context && this.image)) {
      setCanvasError(this.props.dispatch, Constants.CANVAS_GENERIC_ERROR);
      return;
    }
    const { isDrawing, mode, brushSize, brushColor } = this.props.canvasObject;

    if (isDrawing && mode && brushSize && brushColor) {
      context.strokeStyle = brushColor;
      context.lineJoin = 'round';
      context.lineWidth = brushSize;
      context.globalCompositeOperation = 'source-over';
      if (mode === Constants.ERASER_MODE) {
        context.strokeStyle = Constants.CANVAS_BACKGROUND_COLOR;
      }
      context.beginPath();

      const localPos = {
        x: this.lastPointerPosition.x - this.image.x(),
        y: this.lastPointerPosition.y - this.image.y(),
      };
      context.moveTo(localPos.x, localPos.y);

      const stage = this.image.getStage();
      const pos = stage.getPointerPosition();
      localPos.x = pos.x - this.image.x();
      localPos.y = pos.y - this.image.y();

      context.lineTo(localPos.x, localPos.y);
      context.closePath();
      context.stroke();
      this.lastPointerPosition = pos;
      this.image.getLayer().draw();
    }

Я не конечно, почему все пиксели не являются одним из двух указанных цветов. В html 5 канвах LineTo () возникают проблемы с цветом линии , что это может быть сглаживание, но я не уверен, как это исправить.

...