[Canvas] Interaction

오늘 배운 것! 캔버스에서 클릭한 특정 객체를 딱 집어내는 것!!

---

clientX, layerX, offsetX

clientX는 캔버스 이벤드 리스너라도 브라우저 기준,
layerX는 layer 개념으로, 위에 있는 layer(박스든 뭐든간에)를 기준으로

근데...!! 0,0 이 찍혀야 하는데 다른 값이 찍힌다? clientX, clientY...?

layerX/layerY는 Gecko 기반 브라우저(Firefox 등)에서 사용되며, 가장 가까운 위치 지정된 요소에 상대적인 마우스 위치 나타냄. Chrome과 Opera에서도 지원되지만, 곧 사용 중단(deprecated) 예정. 앞으로 사용 안 하는 게 좋음. StackOverflow

강의가 4년 전 강의라 그럴만함

context.fillRect(200, 200, 100, 100);

function clickHandler(e) {
    const x = e.offsetX;
    const y = e.offsetY;

    if (x > 200 && x < 300 && y > 200 && y < 300) {
        console.log('click!');
    }
}

canvas.addEventListener('click', clickHandler);

---

Box.js (랜덤으로 뿌리기)

생성 후 v.s. 생성하는 동시에 그리기

기능에 따라 선택가능, but 여기서는 바로 그리도록

constructor(x, y) {
    this.x = x;
    this.y = y;
    this.draw();
}

const boxes = [];

class Box {
    constructor(x, y) {
        this.x = x;
        this.y = y;
        this.draw();
    }

    draw() {
        context.fillStyle = 'rgba(0, 0, 0, 0.5)';
        context.fillRect(this.x, this.y, 100, 100);
    }
}

let tempX, tempY;
for (let i = 0; i < 10; i++) {
    tempX = Math.random() * canvas.width * 0.8;
    tempY = Math.random() * canvas.height * 0.8;

    boxes.push(new Box(tempX, tempY));
}

console.log(boxes);

각 박스마다 고유 식별자 index 주기

class Box {
    constructor(index, x, y) {
        this.index = index;
        this.x = x;
        this.y = y;
        this.draw();
    }

    draw() {
        context.fillStyle = 'rgba(0, 0, 0, 0.5)';
        context.fillRect(this.x, this.y, 100, 100);
        context.fillStyle = 'white';
        context.fillText(this.index, this.x + 40, this.y + 55);
    }
}

let tempX, tempY;
for (let i = 0; i < 10; i++) {
    tempX = Math.random() * canvas.width * 0.8;
    tempY = Math.random() * canvas.height * 0.8;

    boxes.push(new Box(i, tempX, tempY));
}

---

mousePos 객체 생성

const mousePos = { x: 0, y: 0}

class Box {
      constructor(index, x, y) {
          this.index = index;
          this.x = x;
          this.width = 100;
          this.height = 100;
          this.y = y;
          this.draw();
      }
}

canvas.addEventListener('click', (e) => {
    mousePos.x = e.offsetX;
    mousePos.y = e.offsetY;

    // 박스 10개니까 boxes.length 돌아야함 어쩔수없음
    let box;
    for (let i = 0; i < boxes.length; i++) {
        box = boxes[i];
        if (
            mousePos.x > box.x &&
            mousePos.x < box.x + box.width &&
            mousePos.y > box.y &&
            mousePos.y < box.y + box.height
        ) {
            console.log(box.index);
        }
    }
});

박스가 겹치면 ?

let selectedBox; // 클릭된 박스

let box;
for (let i = 0; i < boxes.length; i++) {
    box = boxes[i];
    if (
        mousePos.x > box.x &&
        mousePos.x < box.x + box.width &&
        mousePos.y > box.y &&
        mousePos.y < box.y + box.height
    ) {
        selectedBox = box; // 대체
    }
}
console.log(selectedBox.index);

---

움직이는 박스 + 클릭 인터랙션!

draw()함수가 requestAniFrame을 하면서 반복해서 그리고 지우기를 하면서 => x, y 좌표를 바꿔주는 원리

x++, y++

function render() {
    context.clearRect(0, 0, canvas.width, canvas.height);
    let box;
    for (let i = 0; i < boxes.length; i++) {
        box = boxes[i];
        box.x += 3;
        if (box.x > canvas.width) {
            box.x = -box.width;
        }
        box.draw();
    }
    requestAnimationFrame(render);
}


render()

---

박스 속도를 제각각으로!

class Box {
    constructor(index, x, y, speed) {
        this.index = index;
        this.x = x;
        this.speed = speed;
        this.width = 100;
        this.height = 100;
        this.y = y;
        this.draw();
    }
}

function render() {
    context.clearRect(0, 0, canvas.width, canvas.height);
    let box;
    for (let i = 0; i < boxes.length; i++) {
        box = boxes[i];
        box.x += box.speed;
        if (box.x > canvas.width) {
            box.x = -box.width;
        }
        box.draw();
    }
    requestAnimationFrame(render);
}

let tempX, tempY, tempSpeed;
for (let i = 0; i < 10; i++) {
    tempX = Math.random() * canvas.width * 0.8;
    tempY = Math.random() * canvas.height * 0.8;
    tempSpeed = Math.random() * 4 + 1; // 최소값, 최댓값 설정
    boxes.push(new Box(i, tempX, tempY, tempSpeed));
}

---

에러 1

selectedBox.index 가 아닌 걸 클릭했을 때, else 처리를 안해줬기 때문에 나는 당연한 에러! 예외 처리 해주자

기존

console.log(selectedBox.index);

변경 (selectedBox 가 존재할 때에만)

if (selectedBox) {
    console.log(selectedBox.index);
}

에러 2

여백을 클릭해도 마지막으로 클릭한 박스 index가 찍힌다.
이유는 selectedBox = box라고 하고 clear 을 안해줬기 때문. 값을 비워줘야지

if (selectedBox) {
    console.log(selectedBox.index);
    selectedBox = null;
}