popup body area selector

This commit is contained in:
Timi
2026-08-20 14:10:44 +08:00
parent aea71aafd5
commit 2bab92edaa
4 changed files with 196 additions and 155 deletions
+134
View File
@@ -0,0 +1,134 @@
export type BodyArea = {
key: string;
label: string;
shape: "ellipse" | "rect" | "path";
cx?: number;
cy?: number;
rx?: number;
ry?: number;
x?: number;
y?: number;
width?: number;
height?: number;
radius?: number;
path?: string;
};
export const bodyAreaList: BodyArea[] = [
{ key: "head", label: "头部", shape: "ellipse", cx: 120, cy: 62, rx: 31, ry: 35 },
{ key: "neck", label: "颈部", shape: "rect", x: 108, y: 96, width: 24, height: 24, radius: 9 },
{ key: "left-shoulder", label: "右肩", shape: "ellipse", cx: 86, cy: 135, rx: 25, ry: 19 },
{ key: "right-shoulder", label: "左肩", shape: "ellipse", cx: 154, cy: 135, rx: 25, ry: 19 },
{
key: "left-upper-arm",
label: "右上臂",
shape: "path",
path: "M69 128C59 130 52 136 49 147L31 216C30 224 34 230 41 232C49 234 54 229 56 222L79 157C84 143 81 132 69 128Z"
},
{
key: "right-upper-arm",
label: "左上臂",
shape: "path",
path: "M171 128C181 130 188 136 191 147L209 216C210 224 206 230 199 232C191 234 186 229 184 222L161 157C156 143 159 132 171 128Z"
},
{
key: "left-forearm",
label: "右前臂",
shape: "path",
path: "M31 218C38 217 49 221 56 225L44 298C43 307 38 312 30 311C22 310 18 304 20 295Z"
},
{
key: "right-forearm",
label: "左前臂",
shape: "path",
path: "M209 218C202 217 191 221 184 225L196 298C197 307 202 312 210 311C218 310 222 304 220 295Z"
},
{
key: "left-hand",
label: "右手",
shape: "path",
path: "M20 313C22 306 40 307 44 314L42 337C40 347 34 353 28 350C23 347 19 339 18 330Z"
},
{
key: "right-hand",
label: "左手",
shape: "path",
path: "M220 313C218 306 200 307 196 314L198 337C200 347 206 353 212 350C217 347 221 339 222 330Z"
},
{
key: "left-chest",
label: "右胸",
shape: "path",
path: "M94 116C103 112 111 110 119 110L119 199C107 199 96 197 86 193L83 151Z"
},
{
key: "right-chest",
label: "左胸",
shape: "path",
path: "M121 110C129 110 137 112 146 116L157 151L154 193C144 197 133 199 121 199Z"
},
{
key: "left-abdomen",
label: "右腹",
shape: "path",
path: "M86 197C96 201 107 203 119 203L119 263C108 263 98 261 89 256Z"
},
{
key: "right-abdomen",
label: "左腹",
shape: "path",
path: "M121 203C133 203 144 201 154 197L151 256C142 261 132 263 121 263Z"
},
{
key: "left-waist",
label: "右腰",
shape: "path",
path: "M89 259C98 264 108 266 119 267L119 302C107 302 96 299 86 294Z"
},
{
key: "right-waist",
label: "左腰",
shape: "path",
path: "M121 267C132 266 142 264 151 259L154 294C144 299 133 302 121 302Z"
},
{
key: "left-thigh",
label: "右大腿",
shape: "path",
path: "M86 298C96 302 106 304 117 302L113 368C104 372 91 372 82 368L79 333Z"
},
{
key: "right-thigh",
label: "左大腿",
shape: "path",
path: "M123 302C134 304 144 302 154 298L161 333L158 368C149 372 136 372 127 368Z"
},
{ key: "left-knee", label: "右膝", shape: "ellipse", cx: 97, cy: 382, rx: 16, ry: 15 },
{ key: "right-knee", label: "左膝", shape: "ellipse", cx: 143, cy: 382, rx: 16, ry: 15 },
{
key: "left-calf",
label: "右小腿",
shape: "path",
path: "M83 397C92 400 102 400 111 397L108 462C100 466 91 466 83 462L80 424Z"
},
{
key: "right-calf",
label: "左小腿",
shape: "path",
path: "M129 397C138 400 148 400 157 397L160 424L157 462C149 466 140 466 132 462Z"
},
{
key: "left-foot",
label: "右脚",
shape: "path",
path: "M83 462C90 465 101 465 108 462L110 480C110 489 103 494 91 494H77C72 493 73 487 78 482Z"
},
{
key: "right-foot",
label: "左脚",
shape: "path",
path: "M132 462C139 465 150 465 157 462L162 482C167 487 168 493 163 494H149C137 494 130 489 130 480Z"
}
];
export const bodyAreaLabelMap = new Map(bodyAreaList.map(item => [item.key, item.label]));