feat: add crop box edge labels (T/B/L/R) for orientation
- Shows which edge is Top, Bottom, Left, Right on crop rectangle - Removes ambiguity about crop box orientation - Green labels on all four edges for clear visual reference
This commit is contained in:
@@ -213,6 +213,25 @@ export function DebugRotationPanel({
|
||||
ctx.shadowBlur = 3;
|
||||
ctx.strokeRect(cropX, cropY, cropW, cropH);
|
||||
|
||||
// Draw edge orientation labels on crop box
|
||||
ctx.fillStyle = '#00FF00';
|
||||
ctx.font = 'bold 12px monospace';
|
||||
ctx.textAlign = 'center';
|
||||
ctx.textBaseline = 'middle';
|
||||
ctx.shadowColor = 'rgba(0, 0, 0, 0.8)';
|
||||
ctx.shadowBlur = 2;
|
||||
|
||||
// Top edge label
|
||||
ctx.fillText('T', cropX + cropW / 2, cropY - 8);
|
||||
// Bottom edge label
|
||||
ctx.fillText('B', cropX + cropW / 2, cropY + cropH + 8);
|
||||
// Left edge label
|
||||
ctx.textAlign = 'right';
|
||||
ctx.fillText('L', cropX - 8, cropY + cropH / 2);
|
||||
// Right edge label
|
||||
ctx.textAlign = 'left';
|
||||
ctx.fillText('R', cropX + cropW + 8, cropY + cropH / 2);
|
||||
|
||||
// Draw resize handles at corners
|
||||
const handleSize = 8;
|
||||
ctx.fillStyle = '#FFB800';
|
||||
|
||||
Reference in New Issue
Block a user