js/Layer.js - master - memoryspeak/UlamCodeWeb

js/Layer.js
66 строк3 KB
memoryspeak
first commit
07 фев 2026, 20:41
07 фев 2026, 20:41a3d2754
export default class Layer {

  COLS_AMOUNT = 7;
  ROWS_AMOUNT = 10;

  constructor(container) {
    this.canvas = document.createElement('canvas');
    this.context = this.canvas.getContext('2d');
    
    // Добавляем CSS для четкого рендеринга
    this.canvas.style.imageRendering = 'optimizeSpeed'; // Для производительности
    this.canvas.style.imageRendering = '-moz-crisp-edges';
    this.canvas.style.imageRendering = '-webkit-optimize-contrast';
    this.canvas.style.imageRendering = 'crisp-edges';
    this.canvas.style.imageRendering = 'pixelated';
    
    container.appendChild(this.canvas);

    this.fitToContainer = this.fitToContainer.bind(this);
    addEventListener(`resize`, this.fitToContainer);
    this.fitToContainer();
  };

  fitToContainer() {
    // Получаем физический размер canvas в CSS пикселях
    const displayWidth = this.canvas.clientWidth;
    const displayHeight = this.canvas.clientHeight;
    
    // Получаем pixel ratio устройства
    const dpr = window.devicePixelRatio || 1;
    
    // Устанавливаем внутренний размер canvas (в физических пикселях)
    this.canvas.width = Math.floor(displayWidth * dpr);
    this.canvas.height = Math.floor(displayHeight * dpr);
    
    // Сохраняем логические размеры для расчета
    this.w = displayWidth;
    this.h = displayHeight;
    
    // Масштабируем контекст для HiDPI
    this.context.scale(dpr, dpr);
    
    // Настраиваем сглаживание для четких линий
    this.context.imageSmoothingEnabled = false;
    this.context.mozImageSmoothingEnabled = false;
    this.context.webkitImageSmoothingEnabled = false;
    this.context.msImageSmoothingEnabled = false;
    this.context.oImageSmoothingEnabled = false;
    
    // Рассчитываем размер ячейки на основе логических размеров
    if (this.w / this.h > this.COLS_AMOUNT / this.ROWS_AMOUNT) {
      this.cellSize = this.h / this.ROWS_AMOUNT;
    } else {
      this.cellSize = this.w / this.COLS_AMOUNT;
    }
    
    // Округляем размер ячейки для четких пикселей
    this.cellSize = Math.floor(this.cellSize);
  };

  clear() {
    // Очищаем весь canvas (учитывая DPR)
    const dpr = window.devicePixelRatio || 1;
    this.context.clearRect(0, 0, this.w * dpr, this.h * dpr);
  };
};