在线64卦变换表

Wuzi

September 2024, 1

5 min read

在线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
};
Tweet this article