# 滑鼠十字線＋座標

正式網址：https://newmediaart.course.monolab.world/snippets/mouse-crosshair

跟著滑鼠畫一條直線、一條橫線，旁邊寫出 (mouseX, mouseY)；想知道某個點的座標，移過去看一眼就知道。

- **分類**：除錯
- **行數**：32 行（p5.js 1.x／2.x）

把 drawCrosshair() 貼進自己的 sketch，在 draw() 最後一行呼叫它；對好位置、把數字抄進程式之後，刪掉那一行。

```js
// 滑鼠十字線：(mouseX, mouseY) 在畫布的哪裡，一眼看出來
function setup() {
  createCanvas(600, 400);
}

function draw() {
  background(240);
  // 你的作品畫在這裡
  fill(255, 180, 0);
  noStroke();
  circle(300, 200, 120);
  drawCrosshair(); // 放在 draw() 的最後
}

function drawCrosshair() {
  push();
  resetMatrix();
  stroke(255, 0, 0, 160);
  strokeWeight(1);
  line(mouseX, 0, mouseX, height); // 直線：這條線上每一點的 x 都一樣
  line(0, mouseY, width, mouseY); // 橫線：這條線上每一點的 y 都一樣
  noStroke();
  fill(255, 0, 0);
  textSize(14);
  // 靠近右邊或上面時，字換到另一邊，才不會跑出畫布
  const right = mouseX > width - 110;
  const top = mouseY < 30;
  textAlign(right ? RIGHT : LEFT, top ? TOP : BOTTOM);
  const label = '(' + round(mouseX) + ', ' + round(mouseY) + ')';
  text(label, mouseX + (right ? -8 : 8), mouseY + (top ? 8 : -8));
  pop();
}
```

## 同類常用指令・除錯

- [左上角顯示 fps 與 frameCount](https://newmediaart.course.monolab.world/snippets/fps-overlay)
- [每秒在 console 印一次變數](https://newmediaart.course.monolab.world/snippets/log-every-second)
- [麥克風測試](https://newmediaart.course.monolab.world/snippets/mic-test)

[回到全部常用指令](https://newmediaart.course.monolab.world/snippets)

[到 Hahow 報名](https://hahow.in/cr/creative-code)。價格與優惠以 Hahow 頁面為準。