Fix aspect ratio in circle hit detection logic

- 캔버스 종횡비에 따른 원형 영역 클릭 감지 로직 수정
- SpriteEffectManager의 원형 판정 함수에 aspect ratio 계산 추가
- 패키지 버전을 1.5.4로 업데이트
This commit is contained in:
BaekRyang 2026-03-16 16:53:13 +09:00
parent 15144240b7
commit 769934adff
3 changed files with 7 additions and 5 deletions

View File

@ -1,6 +1,6 @@
{ {
"name": "@baekryang/responsive-image-canvas", "name": "@baekryang/responsive-image-canvas",
"version": "1.5.2", "version": "1.5.4",
"publishConfig": { "publishConfig": {
"registry": "https://git.bnovalab.com/api/packages/baekryang/npm/" "registry": "https://git.bnovalab.com/api/packages/baekryang/npm/"
}, },

View File

@ -147,7 +147,8 @@ export const EditorCanvas: React.FC<EditorCanvasProps> = ({
for (let i = spriteEffectAreas.length - 1; i >= 0; i--) { for (let i = spriteEffectAreas.length - 1; i >= 0; i--) {
const sa = spriteEffectAreas[i]; const sa = spriteEffectAreas[i];
const dx = clickPoint.x - sa.position.x; const dx = clickPoint.x - sa.position.x;
const dy = clickPoint.y - sa.position.y; const aspect = rect.width / rect.height;
const dy = (clickPoint.y - sa.position.y) / aspect;
const radius = sa.radius ?? 0.1; const radius = sa.radius ?? 0.1;
if (dx * dx + dy * dy <= radius * radius) { if (dx * dx + dy * dy <= radius * radius) {
setDraggingSpriteAreaId(sa.id); setDraggingSpriteAreaId(sa.id);

View File

@ -16,9 +16,10 @@ export interface SpriteEffectTouchState {
/** /**
* *
*/ */
const isPointInCircle = (point: Point, center: Point, radius: number): boolean => { const isPointInCircle = (point: Point, center: Point, radius: number, resolution?: { x: number; y: number }): boolean => {
const aspect = resolution ? resolution.x / resolution.y : 1;
const dx = point.x - center.x; const dx = point.x - center.x;
const dy = point.y - center.y; const dy = (point.y - center.y) / aspect;
return dx * dx + dy * dy <= radius * radius; return dx * dx + dy * dy <= radius * radius;
}; };
@ -97,7 +98,7 @@ export class SpriteEffectManager {
if (touchState.isDragging && touchState.position) { if (touchState.isDragging && touchState.position) {
for (const area of effectAreas) { for (const area of effectAreas) {
const radius = area.radius ?? 0.1; const radius = area.radius ?? 0.1;
if (isPointInCircle(touchState.position, area.position, radius)) { if (isPointInCircle(touchState.position, area.position, radius, resolution)) {
currentTouchingAreas.add(area.id); currentTouchingAreas.add(area.id);
} }
} }