在线64卦变换表

近期重新制作了在线版的64卦变换表，预览网址：https://64gua.online。效果如上图所示。建议先去体验一下。

点击第一列的任意一项可以选中当前行，点击行的任意一项可以选中当前列。两个交叉的位置就是得到的卦。

绘制SVG图标

原理说明

每一个爻都有两种状态：阳 或者 阴。因此很自然可以想到用 0 和 1 来表示。基本卦有3爻，衍生卦有6爻。因此可以使用二进制数字来表示。

像素计算

首先要确定SVG的尺寸，对于8个基本卦，以 宽:24 / 高:24 来绘制。对于64个衍生卦，以 宽:24 / 高:48 来绘制。下面将以衍生卦设计图来举例。

我们以卦序第55卦丰为例，详细解释一下二进制的转化。

在我们这套系统中，二进制的最高位（一共有六位，分别对应六爻）就是第六爻，依次类推，最低位就是第一爻。因此，把丰卦转化为二进制就是 001101。原理知道以后，需要计算具体的像素值。

这是上面丰卦的设计草图。

横向X轴

如果是阳爻 ()，就直接占满X轴整个区域。也就是宽度为24。

如果是阴爻 () ，留出中间部分4个像素的空间。剩余20个像素，给左右两侧的半个爻各10个像素。刚好分配完横向的24个像素（10 + 4 + 10 = 24）。

第二个方块的起始位置就是：第一个方块的宽度10 ➕ 4个像素的空白空间 = 14（下方代码第30行）。

纵向Y轴

纵向只需要累加Y轴的距离就可以，不用关心是阳还是阴爻。纵向一共有6爻，每个高度是4，一共是24。六个爻之间会有5个空白空间。每个空间是4像素高。因此。需要注意刚开始第一爻的Y轴应该从2开始（下方代码第23, 31, 43行），然后每一次加8（上一爻和空白空间加起来），最终就绘制出Y轴的图形。

代码实现

一切准备就绪之后，最终代码实现就非常简单了。参数 base 为 true，表示绘制基本卦，否则绘制衍生卦。参数 value 是某个卦的二进制数值。

1
const IChingIcon = ({ base, value }: IconProps) => {
2
  const valueArray = binaryStringToArray(value);
3

4
  return (
5
    <svg
6
      key={value}
7
      fill="none"
8
      height={base ? "24" : "48"}
9
      viewBox={base ? "0 0 24 24" : "0 0 24 48"}
10
      width="24"
11
      xmlns="http://www.w3.org/2000/svg"
12
    >
13
      {valueArray.map((value, index) => {
14
        if (value === 0) {
15
          return (
16
            <React.Fragment key={index}>
17
              <rect
18
                key={`left-${index}`}
19
                fill="currentColor"
20
                height="4"
21
                width="10"
22
                x="0"
23
                y={8 * index + 2}
24
              />
25
              <rect
26
                key={`right-${index}`}
27
                fill="currentColor"
28
                height="4"
29
                width="10"
30
                x="14"
31
                y={8 * index + 2}
32
              />
33
            </React.Fragment>
34
          );
35
        } else {
36
          return (
37
            <rect
38
              key={index}
39
              fill="#FF0000"
40
              height="4"
41
              width="24"
42
              x="0"
43
              y={8 * index + 2}
44
            />
45
          );
46
        }
47
      })}
48
    </svg>
49
  );
50
};

Share to X