client/src/components/ColorScale.js - master - petrhlam/project_moon

client/src/components/ColorScale.js
350 строк11 KB
Andrey Sukhikh
Added laravel backend
18 май 2025, 23:08
18 май 2025, 23:0883488a7
import { useEffect, useRef } from 'react';

const ColorScale = () => {
  const canvasRef = useRef(null);

  useEffect(() => {
    const canvas = canvasRef.current;
    const ctx = canvas.getContext('2d');
    const width = canvas.width;
    const height = canvas.height;

    // Точки шкалы в порядке "высота — цвет"
    const scalePoints = [
      { height: 0,   color: 'hsl(240, 100%, 50%)' },  // Синий
      { height: 50,  color: 'hsl(190, 100%, 50%)' },  // Голубой
      { height: 150, color: 'hsl(125, 100%, 50%)' },  // Зелёный
      { height: 300, color: 'hsl(60, 100%, 50%)' },   // Жёлтый
      { height: 400, color: 'hsl(30, 100%, 50%)' },   // Оранжевый
      { height: 500, color: 'hsl(0, 100%, 50%)' },    // Красный
      { height: 550, color: '#ffffff' }              // Белый
    ];

    const maxHeight = 550;
    const gradient = ctx.createLinearGradient(0, 0, width, 0);

    // Добавляем цветовые точки в градиент
    for (const point of scalePoints) {
      const offset = point.height / maxHeight;
      gradient.addColorStop(offset, point.color);
    }

    // Рисуем градиент
    ctx.fillStyle = gradient;
    ctx.fillRect(0, 0, width, height - 12);

    // Подписи к ключевым точкам
    ctx.fillStyle = '#000';
    ctx.font = '10px sans-serif';
    scalePoints.forEach(point => {
      const x = (point.height / maxHeight) * width;
      ctx.fillText(`${point.height} м`, x + 2, height - 2);
    });
  }, []);

  return (
    <canvas
      ref={canvasRef}
      width={300}
      height={30}
      style={{
        border: '1px solid #ccc',
        borderRadius: 4,
        display: 'block',
        marginTop: 8
      }}
    />
  );
};

export default ColorScale;
// import { useEffect, useRef } from 'react';

// const ColorScale = () => {
//   const canvasRef = useRef(null);

//   useEffect(() => {
//     const canvas = canvasRef.current;
//     const ctx = canvas.getContext('2d');
//     const width = canvas.width;
//     const height = canvas.height;

//     // Рисуем шкалу по hue от 240° (синий) до 0° (красный) и до 60° (жёлтый) → 550 м
//     for (let i = 0; i < width; i++) {
//       const hue = (240 - (i / width) * 270 + 360) % 360; // от синего к белому через красный/жёлтый
//       ctx.fillStyle = `hsl(${hue}, 100%, 50%)`;
//       ctx.fillRect(i, 0, 1, height - 12);
//     }

//     // Подписи
//     ctx.fillStyle = 'black';
//     ctx.font = '10px sans-serif';
//     ctx.fillText('0 м', 0, height - 2);
//     ctx.fillText('550 м', width - 38, height - 2);
//   }, []);

//   return (
//     <canvas
//       ref={canvasRef}
//       width={256}
//       height={30}
//       style={{
//         border: '1px solid #ccc',
//         borderRadius: 4,
//         display: 'block'
//       }}
//     />
//   );
// };

// export default ColorScale;

// import { useEffect, useRef } from 'react';

// const ColorScale = () => {
//   const canvasRef = useRef(null);

//   useEffect(() => {
//     const canvas = canvasRef.current;
//     if (!canvas) return;

//     const ctx = canvas.getContext('2d');
//     const width = canvas.width;
//     const height = canvas.height;

//     // Описание диапазонов цвета и высоты
//     const segments = [
//       { color: 'rgb(0, 0, 128)', label: '0 м' },         // тёмно-синий
//       { color: 'rgb(0, 128, 255)', label: '50 м' },      // голубой
//       { color: 'rgb(0, 255, 0)', label: '150 м' },       // зелёный
//       { color: 'rgb(255, 255, 0)', label: '300 м' },     // жёлтый
//       { color: 'rgb(255, 128, 0)', label: '400 м' },     // оранжевый
//       { color: 'rgb(255, 64, 64)', label: '500 м' },     // ярко-красный
//       { color: 'rgb(255, 255, 255)', label: '550 м' }    // белый
//     ];

//     const segmentWidth = width / segments.length;

//     segments.forEach((seg, i) => {
//       ctx.fillStyle = seg.color;
//       ctx.fillRect(i * segmentWidth, 0, segmentWidth, height - 12);

//       // Метка
//       ctx.fillStyle = 'black';
//       ctx.font = '10px sans-serif';
//       ctx.textAlign = 'center';
//       ctx.fillText(seg.label, i * segmentWidth + segmentWidth / 2, height - 2);
//     });
//   }, []);

//   return (
//     <canvas
//       ref={canvasRef}
//       width={350}
//       height={30}
//       style={{
//         border: '1px solid #ccc',
//         borderRadius: 4,
//         display: 'block'
//       }}
//     />
//   );
// };

// export default ColorScale;

// import { useEffect, useRef } from 'react';

// const ColorScale = () => {
//   const canvasRef = useRef(null);

//   useEffect(() => {
//     const canvas = canvasRef.current;
//     if (!canvas) return;

//     const ctx = canvas.getContext('2d');
//     const width = canvas.width;
//     const height = canvas.height;

//     const gradient = ctx.createLinearGradient(0, 0, width, 0);

//     // Цвета согласно colorToHeight
//     gradient.addColorStop(0.0, 'rgb(0, 0, 128)');     // 0 м
//     gradient.addColorStop(0.2, 'rgb(0, 128, 255)');   // 50 м
//     gradient.addColorStop(0.35, 'rgb(0, 255, 0)');    // 150 м
//     gradient.addColorStop(0.5, 'rgb(255, 255, 0)');   // 300 м
//     gradient.addColorStop(0.65, 'rgb(255, 128, 0)');  // 400 м
//     gradient.addColorStop(0.8, 'rgb(255, 0, 0)');     // 500 м
//     gradient.addColorStop(1.0, 'rgb(255, 255, 255)'); // 550 м+

//     ctx.fillStyle = gradient;
//     ctx.fillRect(0, 0, width, height - 12);

//     // Подписи
//     const labels = [
//       { x: 0, text: '0 м' },
//       { x: width * 0.2, text: '50 м' },
//       { x: width * 0.35, text: '150 м' },
//       { x: width * 0.5, text: '300 м' },
//       { x: width * 0.65, text: '400 м' },
//       { x: width * 0.8, text: '500 м' },
//       { x: width - 35, text: '550+ м' }
//     ];

//     ctx.fillStyle = 'black';
//     ctx.font = '10px sans-serif';
//     labels.forEach(({ x, text }) => {
//       ctx.fillText(text, x, height - 2);
//     });
//   }, []);

//   return (
//     <canvas
//       ref={canvasRef}
//       width={256}
//       height={30}
//       style={{
//         border: '1px solid #ccc',
//         borderRadius: 4,
//         display: 'block'
//       }}
//     />
//   );
// };

// export default ColorScale;






// import { useEffect, useRef } from 'react';

// const ColorScale = () => {
//   const canvasRef = useRef(null);

//   useEffect(() => {
//     const canvas = canvasRef.current;
//     const ctx = canvas.getContext('2d');
//     const width = canvas.width;
//     const height = canvas.height;

//     // Соответствие цветов высотам (в твоих условиях)
//     const colorStops = [
//       { color: '#0000ff', height: 50 },   // Синий
//       { color: '#00ff00', height: 200 },  // Зелёный
//       { color: '#ffff00', height: 350 },  // Жёлтый
//       { color: '#ff0000', height: 450 },  // Красный
//       { color: '#ffffff', height: 600 },  // Белый
//     ];

//     // Нормализуем высоты для позиции в градиенте (0.0 - 1.0)
//     const minH = 50;
//     const maxH = 600;

//     const gradient = ctx.createLinearGradient(0, 0, width, 0);

//     colorStops.forEach(({ color, height }) => {
//       const offset = (height - minH) / (maxH - minH);
//       gradient.addColorStop(offset, color);
//     });

//     // Отрисовка градиента
//     ctx.fillStyle = gradient;
//     ctx.fillRect(0, 0, width, height);

//     // Подписи под соответствующими цветами
//     ctx.fillStyle = 'black';
//     ctx.font = '12px sans-serif';
//     colorStops.forEach(({ height }, index) => {
//       const offset = (height - minH) / (maxH - minH);
//       const x = offset * width;
//       ctx.fillText(`${height} м`, x - 10, height - 5);
//     });
//   }, []);

//   return (
//     <canvas
//       ref={canvasRef}
//       width={400}
//       height={30}
//       style={{ border: '1px solid #ccc', borderRadius: 4 }}
//     ></canvas>
//   );
// };

// export default ColorScale;

// import { useEffect, useRef } from 'react';

// const ColorScale = () => {
//   const canvasRef = useRef(null);

//   useEffect(() => {
//     const canvas = canvasRef.current;
//     const ctx = canvas.getContext('2d');
//     const width = canvas.width;
//     const height = canvas.height;

//     // Создаём градиент с цветами, отражающими высоту
//     const gradient = ctx.createLinearGradient(0, 0, width, 0);

//     // Примеры соответствия: (можно уточнить под свою палитру)
//     gradient.addColorStop(0.0, '#0000ff'); // Синий (низины)
//     gradient.addColorStop(0.33, '#00ff00'); // Зелёный
//     gradient.addColorStop(0.66, '#ffff00'); // Жёлтый
//     gradient.addColorStop(1.0, '#ffffff'); // Белый (высоты)

//     ctx.fillStyle = gradient;
//     ctx.fillRect(0, 0, width, height);

//     // Подписи
//     ctx.fillStyle = 'black';
//     ctx.font = '12px sans-serif';
//     ctx.fillText('0 м', 0, height - 5);
//     ctx.fillText('600 м', width - 40, height - 5);
//   }, []);

//   return (
//     <canvas
//       ref={canvasRef}
//       width={300}
//       height={25}
//       style={{ border: '1px solid #ccc', borderRadius: 4 }}
//     ></canvas>
//   );
// };

// export default ColorScale;


// import { useEffect, useRef } from 'react';

// const ColorScale = () => {
//   const canvasRef = useRef(null);

//   useEffect(() => {
//     const canvas = canvasRef.current;
//     const ctx = canvas.getContext('2d');
//     const width = canvas.width;
//     const height = canvas.height;

//     const gradient = ctx.createLinearGradient(0, 0, width, 0);
//     gradient.addColorStop(0, 'black');   // height = 0
//     gradient.addColorStop(1, 'white');   // height = 600

//     ctx.fillStyle = gradient;
//     ctx.fillRect(0, 0, width, height);

//     // Можно добавить подписи
//     ctx.fillStyle = 'black';
//     ctx.font = '12px sans-serif';
//     ctx.fillText('0', 0, height - 2);
//     ctx.fillText('600', width - 30, height - 2);
//   }, []);

//   return <canvas ref={canvasRef} width={300} height={30}></canvas>;
// };

// export default ColorScale;