Learning vtkjs之LookUpTable

news2025/1/15 22:46:54

颜色映射表 LookUpTable

介绍

先看官方的介绍：

vtkLookupTable is a 2D widget for manipulating a marker prop

vtkLookupTable 是一个用于操纵标记属性的2维的小部件。

一般可以用来进行颜色刻度的显示。它会帮我们进行颜色线性插值计算

代码效果

在这里插入图片描述
其实设置一个lookuptable非常的简单，核心代码是：

// hueRange是一个颜色范围
const lookupTable = vtkLookupTable.newInstance({ hueRange: [0.667, 0] });
// 设定分割的份数
lookupTable.setNumberOfColors(10);

颜色空间

至于为什么是0.667
那是应为这个lookuptable 采用的是hsv的颜色空间，那什么是hsv颜色空间呢？
HSV颜色空间（Hue, Saturation, Value）是一种颜色模型，它将颜色描述为三个分量：
色调（Hue）、饱和度（Saturation）和明度（Value），这三个分量对应于人眼感知颜色的方式。

以下是HSV颜色空间的三个主要分量的解释：

色调（Hue）：色调是指颜色的类型，它决定了颜色的基本性质，如红色、绿色或蓝色等。在HSV颜色空间中，色调通常用角度来表示，范围是0°到360°。其中，0°或360°代表红色，120°代表绿色，240°代表蓝色。

饱和度（Saturation）：饱和度是指颜色的纯度，它描述了颜色中灰色成分的多少。饱和度高的颜色看起来更加鲜艳，而饱和度低则看起来更加灰暗。饱和度通常用百分比来表示，范围从0%（灰色）到100%（完全饱和）。

明度（Value）：明度是指颜色的亮度，它反映了颜色的明亮程度。明度的值可以从黑色（0%）变化到颜色最亮的状态（100%）。明度的改变不会改变颜色的色调，只会使颜色变得更亮或更暗。
HSV颜色空间通常用于计算机图形学和图像处理中，因为它更符合人类视觉感知颜色的方式，使得在某些操作（如颜色调整、图像分割等）中比RGB颜色空间更加直观和方便。

0和360都是红色，所以240代表的蓝色除以360 代表的红色就是0.6666666

核心代码

如何构建这样一个颜色映射表呢？查看lookuptable的源代码可以找到forceBuild这个函数，这是构件一个映射的table方法

publicAPI.forceBuild = () => {
// 初始分量
    let hinc = 0.0;
    let sinc = 0.0;
    let vinc = 0.0;
    let ainc = 0.0;
    // 分割的份数
    const maxIndex = model.numberOfColors - 1;
    if (maxIndex) {
      hinc = (model.hueRange[1] - model.hueRange[0]) / maxIndex;
      sinc = (model.saturationRange[1] - model.saturationRange[0]) / maxIndex;
      vinc = (model.valueRange[1] - model.valueRange[0]) / maxIndex;
      ainc = (model.alphaRange[1] - model.alphaRange[0]) / maxIndex;
    }
    model.table.length = 4 * maxIndex + 16;
    const hsv = [];
    const rgba = [];
    for (let i = 0; i <= maxIndex; i++) {
      hsv[0] = model.hueRange[0] + i * hinc;
      hsv[1] = model.saturationRange[0] + i * sinc;
      hsv[2] = model.valueRange[0] + i * vinc;
      // 从hsv转换到rgb颜色空间
      hsv2rgb(hsv, rgba);
      rgba[3] = model.alphaRange[0] + i * ainc;

      //  case VTK_RAMP_LINEAR:
      // 构件一个映射的table
      model.table[i * 4] = rgba[0] * 255.0 + 0.5;
      model.table[i * 4 + 1] = rgba[1] * 255.0 + 0.5;
      model.table[i * 4 + 2] = rgba[2] * 255.0 + 0.5;
      model.table[i * 4 + 3] = rgba[3] * 255.0 + 0.5;
    }
    publicAPI.buildSpecialColors();
    model.buildTime.modified();
  };

对颜色的线性插值

  publicAPI.linearLookup = (v, table, p) => {
    let index = 0;
    if (isNan(v)) {
      index = Math.floor(p.maxIndex + 1.5 + NAN_COLOR_INDEX);
    } else {
    // 找到table内对应的索引
      index = publicAPI.linearIndexLookup(v, p);
    }
    const offset = 4 * index;
    return table.slice(offset, offset + 4);
  };