引子——聊聊这玩意儿

哎呀，今天咱们来唠一唠怎么把足球战术App的球员拖动和路线绘制整出来。

说实话，这事儿kan起来挺高大上，实际上也就几个点。

你要是跟我一样，是个老前端，估计Yi经踩过不少坑了。

哈哈，别慌，我这篇文章会像老友叨叨一样，慢慢说。

先弄个画布——Canvas基础

先在页面上放个。

宽高随便设，常用的是640×360。

记得给它一个id，后面要找。

代码里直接const canvas = document.getElementById就行了。

再拿到ctx = canvas.getContext，后面的绘制全靠它。

画场地的那点事

先填个绿底，用#006400之类的深绿。

画两条边线，再加中线、禁区、圆心点。

这一步Ke以抽成函数drawField，随时调起刷新。

球员模型——怎么存数据

每个球员就是一个对象，属性Zui少有{id,name,x,y}

x、y是场地坐标，一般用米或者百分比dou行。

比如：

const players = ;

别忘了给每个人一个头像或颜色，这样画起来好辨认。

核心：实现球员拖拽

这里咱们用原生触摸事件，不依赖任何库。

#touchstart

- 检测手指落在哪个球员上；

- 用一个小圆形碰撞检测，半径20像素左右够用了。

#touchmove

- 手指移动的时候，把对应球员的x、y实时geng新成场地坐标；

- 别忘了把坐标限制在场地范围内，否则会跑出界外。

#touchend

- 手指抬起时把拖拽状态清空；

代码小片段示例

// 假设Yi经有 canvasRef
function handleTouchStart {
  const touch = e.touches;
  const rect = canvasRef.current.getBoundingClientRect;
  const cx = touch.clientX - rect.left;
  const cy = touch.clientY - rect.top;
  const player = findPlayerAt;
  if  {
    setDraggingPlayer;
    setDragOffset;
  }
}
function handleTouchMove {
  if  return;
  const touch = e.touches;
  const rect = canvasRef.current.getBoundingClientRect;
  const cx = touch.clientX - rect.left - dragOffset.x;
  const cy = touch.clientY - rect.top - dragOffset.y;
  // 场地坐标转换
  const fieldPos = canvasToField;
  // geng新状态
}
function handleTouchEnd {
  setDraggingPlayer;
}

路线绘制——从点到点连线

双击某个球员开始画路线，再双击另一名球员结束。

C++里叫“state machine”，这里我们只需要两个布尔量：drawingRoute/routeFrom.

临时线段

#touchmove期间，Ru果正在绘制，就在起点和当前手指位置之间画一根虚线。

正式线路保存

#touchendRu果手指正好落在另一个球员身上，就把这条路加入数组{fromId,toId,waypoints}.

Smooth 曲线小技巧

- 把中间点保存在.waypoints;

想让线geng柔和，Ke以用二次贝塞尔曲线：

ctx.quadraticCurveTo;

手势识别——区分点击、拖动和双击

Aha，这一步hen关键，不然玩家会觉得卡顿或误操作。

#touchstart记录时间戳和起始坐标；

#touchmove累计位移，Ru果超过10像素就判定为拖动；

#touchend判断时间间隔，Ru果两次tap间隔小于300ms且位移小于阈值，就算双击；

保存与加载——别让战术白跑掉

#localStorage或者移动端的本地数据库dou行，这里演示Zui简版：

// 保存
localStorage.setItem);
// 加载
const data = JSON.parse||'{}');
if  setPlayers;
if  setRoutes;

常见疑问：为什么百度不收录？ 🤔 踩坑提醒——咱们一起吐槽一下

A1：触摸精度太低。手机屏幕小，默认点击半径要调大到20~30像素，否则老是点不中球员。害，那种体验真的糟心啊！

A2：频繁重绘导致卡顿。每帧dou全局clear再draw会消耗CPU，用alert 把绘制节流到浏览器刷新率上，一下子顺滑多了。说实话，我之前没开这个，到后来才发现卡死是自己搞的鬼。

A3：手势冲突。点击和拖动容易混淆，用移动阈值区分，两者配合得好用户才不会慌。 不对不对，这阈值Zui好根据设备dpi动态算，不然高分辨率手机会误判成拖动呢。

A4：数据持久化忘记同步UI。有时候save成功，但界面还显示旧位置，因为setState没跟着改。这种情况记得在保存后再调用一次render或forceUpdate。

A5：路线中间点乱加。用户随意点会产生交叉线路，可加撤销栈，让用户Ctrl+Z回退一步。呵呵，我自己实现撤销时差点把整个数组删空了哭笑不得啊！

——走完这一套，你就Ke以玩转战术板啦！ 🎉

Crap，我刚刚说太官方了其实就是这么几个步骤：

- 搭建Canvas并绘制场地；

- 定义球员数据结构；

- 用touch事件实现拖拽并限制边界；

- 双击识别开启/关闭线路绘制；

- 用requestAnimationFrame提升渲染流畅度；

- 持久化存储战术配置；

- Zui后别忘了检查SEO，小细节决定百度是否收录！ :)

好了就酱紫。Ru果你还有啥奇怪需求，比如多玩家协同编辑，那就另开话题吧，咱们慢慢聊～ 哈哈，祝你玩得开心！ 🙌‍♀️

---