// 从画布抠出一块像素数据：
const imageData = ctx.getImageData(x, y, width, height);

// imageData 长这样：
// {
//   width: number,                  // 区域宽（像素）
//   height: number,                 // 区域高（像素）
//   data: Uint8ClampedArray,        // ⭐ 像素本体：一维数组，每 4 个数一个像素
//   colorSpace: "srgb"              // 颜色空间（新属性，暂时不用管）
// }

// 写回去：
ctx.putImageData(imageData, x, y);   // 把（改过的）数据贴回画布 (x, y) 处

索引：      0    1    2    3    | 4    5    6    7    | 8 ...
含义：     R    G    B    A    | R    G    B    A    | R ...
像素：     第0个（左上角）       | 第1个（第一行第二个） | 第2个...

值域：每个分量 0 ~ 255（整数）
      R=255,G=0,B=0 → 红     R=0,G=255,B=0 → 绿
      R,G,B 全 0 → 黑         全 255 → 白
      A=0 全透明              A=255 不透明

const data = imageData.data;   // 类型：Uint8ClampedArray

// 保护 1：自动钳位（Clamped）——超出 0~255 自动截断
data[0] = 300;   // 实际存 255
data[1] = -20;   // 实际存 0
data[2] = 128.7; // 实际存 129（四舍五入取整）

// 保护 2：赋值非数字
data[3] = NaN;   // 实际存 0（普通数组会存 NaN 然后渲染出诡异结果）

// 写滤镜时最常做的事：颜色值加减乘除后写回。
// 没有钳位的世界（比如普通 number 数组）：
let r = pixelR + 60;        // 200 + 60 = 260
// 写回 Canvas 前必须手动：if (r > 255) r = 255; —— 每个通道都要写，漏了就出花屏

// 有 Uint8ClampedArray：
data[i] = pixelR + 60;      // 260 → 自动变 255 ✅ 直接赋值，不用管越界

// 拷贝成普通数组（比如要在 Worker 间传输、或做复杂数值计算）：
const normal = Array.from(data);          // 慢，只在边界处用
const copy = new Uint8ClampedArray(data); // 拷贝一份同类型（撤销栈常用！）

// ⚠ 直接赋值是引用不是拷贝：
const ref = data;    // ref 和 data 是同一个数组，改 ref 就是改 data

/**
 * 像素坐标 → data 数组索引
 * @param x 列坐标（0 ~ width-1）
 * @param y 行坐标（0 ~ height-1）
 * @returns 该像素 R 分量的索引（G/B/A 依次 +1）
 *
 * 推导：前面有 y 整行（每行 width 个像素）+ 本行 x 个像素 → 共 (y·width + x) 个像素
 *       每像素 4 个分量 → 索引 = (y·width + x) × 4
 */
function pixelIndex(x: number, y: number, width: number): number {
  return (y * width + x) * 4;
}

// 读一个像素：
const i = pixelIndex(10, 5, width);
const r = data[i], g = data[i + 1], b = data[i + 2], a = data[i + 3];

// 写一个像素（改成纯红）：
data[i] = 255; data[i + 1] = 0; data[i + 2] = 0; data[i + 3] = 255;

/**
 * 遍历整幅 ImageData 的标准模板
 * 变体几乎都基于它：反色 / 灰度 / 亮度调节……
 */
function forEachPixel(imageData: ImageData, fn: (r: number, g: number, b: number, a: number, i: number) => [number, number, number, number]): void {
  const { data, width, height } = imageData;

  // 写法一：按像素遍历（每轮跳 4）—— 最常用、最不容易错
  for (let i = 0; i < data.length; i += 4) {
    const [r, g, b, a] = fn(data[i], data[i + 1], data[i + 2], data[i + 3], i);
    data[i] = r; data[i + 1] = g; data[i + 2] = b; data[i + 3] = a;
  }

  // 写法二：按行列遍历（需要知道 x/y 时用——比如只处理某一半画面）
  // for (let y = 0; y < height; y++) {
  //   for (let x = 0; x < width; x++) {
  //     const i = (y * width + x) * 4;
  //     // ... data[i] 是 (x,y) 的 R
  //   }
  // }
}

// ① 全量抓取（最常见）：
const img = ctx.getImageData(0, 0, canvas.width, canvas.height);

// ② 只抓一个区域（性能优化：只处理需要处理的块）：
const region = ctx.getImageData(50, 50, 100, 100);   // 从 (50,50) 抓 100×100

// ⚠ 区域版的数据里，width = 100（不是画布宽！）—— 定位公式用的 width 必须一致
// putImageData 回去时坐标要对应：
ctx.putImageData(region, 50, 50);   // 贴回原位

// 关键事实：getImageData / putImageData 走的是【物理像素直通道】，
// 不经过绘制管线 → 完全无视 ctx 的变换（scale/rotate/translate 都当不存在）！

// Day 29 我们做过：canvas.width = cssWidth × dpr; ctx.scale(dpr, dpr)
// 所以：

// ❌ 用 CSS 尺寸抓：只抓到了左上角 1/dpr 的区域
ctx.getImageData(0, 0, cssWidth, cssHeight);        // 高分屏上画面缺一大块

// ✅ 用物理尺寸抓：全量
ctx.getImageData(0, 0, canvas.width, canvas.height);

// putImageData 同理：贴回的位置也是物理像素坐标
ctx.putImageData(img, 0, 0);                        // (0,0) 物理像素 = 左上角，OK
ctx.putImageData(img, 100, 100);                    // 是物理像素 100（CSS 像素的 100/dpr）

API                     走绘制管线？   受 ctx.scale 等变换影响？   坐标单位
-----------------------------------------------------------------------
fillRect / drawImage     ✅            ✅                         CSS 像素（DPR 后）
clearRect               ✅            ✅                         CSS 像素
getImageData / putImageData ❌ 直通道   ❌ 完全无视               物理像素

// getImageData 抓的是【画布上已经渲染出来的像素】——变换已经生效在画面上了！
// 所以"抓变换后画面"天然就是对的：

ctx.save();
ctx.translate(100, 100);
ctx.rotate(deg(30));
ctx.fillRect(-20, -20, 40, 40);   // 画面上：旋转过的方块
ctx.restore();

const img = ctx.getImageData(0, 0, canvas.width, canvas.height);
// img 里就是旋转后的样子 ✅（变换影响"画上去的过程"，不影响"抓取结果"）

// 会踩坑的场景是反过来：你想用 putImageData 在"旋转的坐标系"里贴图
ctx.rotate(deg(45));
ctx.putImageData(img, 0, 0);   // ❌ 贴图不旋转！putImageData 无视变换，直接物理像素贴
// 要"带着变换贴图"用 drawImage（它走绘制管线）：
// ctx.drawImage(sourceCanvas, 0, 0);   // ✅ 会跟着 rotate 转

// day38-picker.ts —— 鼠标取色器（含放大镜）
import { bootCanvas } from "../day29/canvas-boot.js";

const canvas = document.querySelector("#board") as HTMLCanvasElement;
const { ctx, cssWidth, cssHeight } = bootCanvas(canvas);

const dpr = window.devicePixelRatio || 1;

// ===== 1. 先画一幅"值得取色"的画面（渐变 + 彩色方块）=====
function paintScene(): void {
  const grad = ctx.createLinearGradient(0, 0, cssWidth, 0);   // Day 31
  grad.addColorStop(0, "#001529");
  grad.addColorStop(1, "#00c6ff");
  ctx.fillStyle = grad;
  ctx.fillRect(0, 0, cssWidth, cssHeight);

  const colors = ["#ff4d4f", "#ffc53d", "#00ff88", "#b37feb"];
  colors.forEach((c, i) => {
    ctx.fillStyle = c;
    ctx.fillRect(80 + i * 120, 100, 80, 80);
  });
}
paintScene();

// ===== 2. 核心工具：读取指定 CSS 坐标的像素颜色 =====

/**
 * 读取 (cssX, cssY) 处的像素 RGBA
 * ⭐ 两次坐标系转换是本函数的灵魂：
 *   CSS 像素 → 物理像素（×dpr）→ data 索引（y·width + x）×4
 */
function pickColor(cssX: number, cssY: number): [number, number, number, number] {
  // ① CSS 坐标 → 物理坐标（getImageData 是物理像素直通道！第 4 节）
  const px = Math.floor(cssX * dpr);
  const py = Math.floor(cssY * dpr);

  // ② 只抓 1×1 像素（性能最优：不用抓全屏）
  const pixel = ctx.getImageData(px, py, 1, 1);
  return [pixel.data[0], pixel.data[1], pixel.data[2], pixel.data[3]];
}

// ===== 3. 显示层：色板 + 色值文字 =====
let hover: { x: number; y: number } | null = null;

function renderOverlay(): void {
  if (!hover) return;
  const [r, g, b, a] = pickColor(hover.x, hover.y);
  const hex = `#${[r, g, b].map((v) => v.toString(16).padStart(2, "0")).join("")}`;

  // 色板（跟随鼠标）
  ctx.save();
  ctx.fillStyle = `rgba(${r},${g},${b},${a / 255})`;
  ctx.fillRect(hover.x + 16, hover.y + 16, 44, 44);
  ctx.strokeStyle = "#ffffff";
  ctx.lineWidth = 2;
  ctx.strokeRect(hover.x + 16, hover.y + 16, 44, 44);
  ctx.restore();

  // 色值文字
  ctx.fillStyle = "#ffffff";
  ctx.font = "13px monospace";
  ctx.fillText(`${hex}  rgb(${r},${g},${b})`, hover.x + 16, hover.y + 76);
}

// ===== 4. 交互 =====
// ⚠ 坑：overlay 画上去会污染原画面，鼠标移动前要"恢复原画面再画新 overlay"
// 方案：把 paintScene 的结果存成离屏画布，每次重画 = 贴原图 + 画 overlay
// （离屏画布明天 Day 41 正式讲，今天先用起来）

const sceneCanvas = document.createElement("canvas");        // 离屏备份
sceneCanvas.width = canvas.width;
sceneCanvas.height = canvas.height;
sceneCanvas.getContext("2d")!.drawImage(canvas, 0, 0);       // 把当前画面抄一份

canvas.addEventListener("mousemove", (e) => {
  const rect = canvas.getBoundingClientRect();
  hover = { x: e.clientX - rect.left, y: e.clientY - rect.top };

  // 重绘 = 贴原始场景 + 画 overlay
  ctx.setTransform(1, 0, 0, 1, 0, 0);                        // 物理像素直接贴（put/drawImage 混用注意）
  ctx.drawImage(sceneCanvas, 0, 0);                          // 恢复原画面
  ctx.setTransform(dpr, 0, 0, dpr, 0, 0);                    // 切回 CSS 坐标系画 overlay
  renderOverlay();
});

// 点击复制（navigator.clipboard 需 https 或 localhost）
canvas.addEventListener("click", () => {
  if (!hover) return;
  const [r, g, b] = pickColor(hover.x, hover.y);
  const hex = `#${[r, g, b].map((v) => v.toString(16).padStart(2, "0")).join("")}`;
  navigator.clipboard?.writeText(hex);
  console.log(`已复制: ${hex}`);
});

// 军规 1：只处理需要的区域
// 全屏反色 → 只反色用户选中的选区：
const region = ctx.getImageData(selX, selY, selW, selH);   // 而不是整屏

// 军规 2：别在循环里做重复计算（ JIT 也救不了每次调函数的往返）
for (let i = 0; i < data.length; i += 4) {
  data[i] = 255 - data[i];           // ✅ 直接内联运算
  data[i + 1] = 255 - data[i + 1];
  data[i + 2] = 255 - data[i + 2];
  // ❌ 反例：const [r,g,b] = getPixel(data, i); setPixel(data, i, 255-r, ...)
  //    每像素两次函数调用 + 数组解构，慢 3-5 倍
}

// 军规 3：大图处理挪进 Worker（明天 Day 41 展开）
// 1080p 以上 + 复杂滤镜（模糊卷积）→ 主线程必卡 → Worker

getImageData 会强制浏览器"把 GPU 里的画面同步拷到 CPU 内存"
（Canvas 硬件加速时代，这是一次昂贵的 GPU→CPU 回读）

教训：
- 不要在动画的每帧循环里 getImageData（取色器是 mousemove 触发，不是 rAF，可以接受）
- 一次抓全屏，处理完一次 put 回 —— 避免"抓一点改一点"的高频往返

Day 39 ImageData 像素基础
├── 数据结构
│   ├── data: Uint8ClampedArray（每 4 个 = 1 像素 RGBA）
│   └── length = width × height × 4
├── Uint8ClampedArray 特性
│   ├── 自动钳位 0~255（滤镜代码免边界检查）
│   └── 赋值即拷贝陷阱（引用 vs new U8CA(data)）
├── 定位与遍历
│   ├── pixelIndex = (y·width + x) × 4
│   └── 双循环模板 / 步进 4 模板
├── 与变换的关系 ⭐
│   ├── get/put 无视变换（物理像素直通道）
│   ├── put/get 用物理，绘制用 CSS
│   └── put 不跟变换走 → 要变换贴图用 drawImage
├── 实战：取色器
│   └── CSS → 物理 → 索引 的三层换算
└── 性能
    ├── 区域化处理
    ├── 循环内联运算
    └── GPU 回读开销（避免每帧 get）