lunanting/ai-chatbot
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style: refine PSD dimension annotation sizing
Some checks failed
Lint / build (20) (push) Has been cancelled
Details
Playwright Tests / test (push) Has been cancelled
Details

Browse Source
This commit is contained in:
Your Name 2026-04-02 21:58:09 +08:00
parent b26f46cc80
commit 427e99b51e
1 changed files with 42 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

61
components/agents/agent-psd-template-export-preview.tsx
View File

@ -87,6 +87,17 @@ const DIMENSION_SUFFIX_REGEX = /-尺寸标注(?=\.)/;
const DIMENSION_LINE_COLOR = "#666b73";
const DIMENSION_TEXT_COLOR = "#2a2f35";
const DIMENSION_TEXT_HALO_COLOR = "rgba(255,255,255,0.92)";
const PREVIEW_DIMENSION_FONT_SIZE = 10.4;
const PREVIEW_DIMENSION_LABEL_OFFSET = 13;
const PREVIEW_DIMENSION_STROKE_WIDTH = 1.1;
const PREVIEW_DIMENSION_STROKE_WIDTH_ACTIVE = 1.5;
const PREVIEW_DIMENSION_CAP_STROKE_WIDTH = 1.55;
const PREVIEW_DIMENSION_CAP_STROKE_WIDTH_ACTIVE = 1.9;
const PREVIEW_DIMENSION_TICK_LENGTH = 5.2;
const PREVIEW_DIMENSION_TICK_LENGTH_ACTIVE = 6.5;
const PREVIEW_DIMENSION_HANDLE_RADIUS = 3.2;
const PREVIEW_DIMENSION_HANDLE_STROKE_WIDTH = 1.2;
const PREVIEW_DIMENSION_TEXT_HALO_WIDTH = 2.2;
const SIZE_INFO_LINE_REGEX = /尺寸信息[:：]\s*([^\n]+)/i;
const NUMBER_REGEX = /\d+(?:\.\d+)?/g;
@ -377,7 +388,7 @@ function getPreviewAnnotationGeometry(params: {
annotations,
autoDimensionValues,
});
const labelOffset = 16;
const labelOffset = PREVIEW_DIMENSION_LABEL_OFFSET;
const rawAngleRadians = Math.atan2(vector.dy, vector.dx);
const angleRadians =
rawAngleRadians > Math.PI / 2
@ -506,15 +517,15 @@ function drawAnnotationToCanvas(params: {
? rawAngleRadians + Math.PI
: rawAngleRadians;
const strokeWidth = clamp(
Math.min(imageSize.width, imageSize.height) * 0.0018,
1.25,
3
Math.min(imageSize.width, imageSize.height) * 0.001_35,
1,
2.4
);
const capLength = strokeWidth * 6;
const capLength = strokeWidth * 5.3;
const fontSize = clamp(
Math.round(Math.min(imageSize.width, imageSize.height) * 0.022),
14,
34
Math.round(Math.min(imageSize.width, imageSize.height) * 0.0176),
11,
27
);
const labelOffset = fontSize * 0.95;
const centerX = (annotation.x1 + annotation.x2) / 2 + vector.nx * labelOffset;
@ -549,7 +560,7 @@ function drawAnnotationToCanvas(params: {
context.font = `500 ${fontSize}px "PingFang SC", "Microsoft YaHei", "Noto Sans SC", sans-serif`;
context.textAlign = "center";
context.textBaseline = "middle";
context.lineWidth = Math.max(2, fontSize * 0.22);
context.lineWidth = Math.max(1.5, fontSize * 0.18);
context.strokeStyle = DIMENSION_TEXT_HALO_COLOR;
context.strokeText(label, 0, 0);
context.fillStyle = DIMENSION_TEXT_COLOR;
@ -1102,8 +1113,12 @@ export function AgentPsdTemplateExportPreview({
imageSize,
previewRect,
});
const strokeWidth = isSelected ? 2 : 1.5;
const tickLength = isSelected ? 8 : 6.5;
const strokeWidth = isSelected
? PREVIEW_DIMENSION_STROKE_WIDTH_ACTIVE
: PREVIEW_DIMENSION_STROKE_WIDTH;
const tickLength = isSelected
? PREVIEW_DIMENSION_TICK_LENGTH_ACTIVE
: PREVIEW_DIMENSION_TICK_LENGTH;
return (
<g key={annotation.id}>
@ -1133,7 +1148,11 @@ export function AgentPsdTemplateExportPreview({
pointerEvents="none"
stroke={DIMENSION_LINE_COLOR}
strokeLinecap="round"
strokeWidth={isSelected ? 2.5 : 2}
strokeWidth={
isSelected
? PREVIEW_DIMENSION_CAP_STROKE_WIDTH_ACTIVE
: PREVIEW_DIMENSION_CAP_STROKE_WIDTH
}
x1={geometry.start.x + geometry.vector.nx * tickLength}
x2={geometry.start.x - geometry.vector.nx * tickLength}
y1={geometry.start.y + geometry.vector.ny * tickLength}
@ -1143,7 +1162,11 @@ export function AgentPsdTemplateExportPreview({
pointerEvents="none"
stroke={DIMENSION_LINE_COLOR}
strokeLinecap="round"
strokeWidth={isSelected ? 2.5 : 2}
strokeWidth={
isSelected
? PREVIEW_DIMENSION_CAP_STROKE_WIDTH_ACTIVE
: PREVIEW_DIMENSION_CAP_STROKE_WIDTH
}
x1={geometry.end.x + geometry.vector.nx * tickLength}
x2={geometry.end.x - geometry.vector.nx * tickLength}
y1={geometry.end.y + geometry.vector.ny * tickLength}
@ -1157,13 +1180,13 @@ export function AgentPsdTemplateExportPreview({
<text
dominantBaseline="middle"
fill={DIMENSION_TEXT_COLOR}
fontSize={13}
fontSize={PREVIEW_DIMENSION_FONT_SIZE}
fontWeight={500}
paintOrder="stroke"
pointerEvents="none"
stroke={DIMENSION_TEXT_HALO_COLOR}
strokeLinejoin="round"
strokeWidth={2.8}
strokeWidth={PREVIEW_DIMENSION_TEXT_HALO_WIDTH}
textAnchor="middle"
transform={`rotate(${geometry.angleDegrees} ${geometry.labelCenterX} ${geometry.labelCenterY})`}
x={geometry.labelCenterX}
@ -1185,9 +1208,9 @@ export function AgentPsdTemplateExportPreview({
event
)
}
r={4}
r={PREVIEW_DIMENSION_HANDLE_RADIUS}
stroke={DIMENSION_LINE_COLOR}
strokeWidth={1.5}
strokeWidth={PREVIEW_DIMENSION_HANDLE_STROKE_WIDTH}
/>
<circle
cx={geometry.end.x}
@ -1200,9 +1223,9 @@ export function AgentPsdTemplateExportPreview({
event
)
}
r={4}
r={PREVIEW_DIMENSION_HANDLE_RADIUS}
stroke={DIMENSION_LINE_COLOR}
strokeWidth={1.5}
strokeWidth={PREVIEW_DIMENSION_HANDLE_STROKE_WIDTH}
/>
</>
) : null}