Challenge · 对象级编辑

在 Task D 绘图板基础上新增:选择已有对象、改变被选对象颜色、撤销最后一个对象。

图形由 WebGL 2.0 渲染;控件由 HTML 提供。

等待点击
选择模式:点击对象选中(橙色高亮),再调颜色即改色;点击空白取消选中。切换工具会取消未完成的两次点击。

挑战说明

对象数据结构:{type:"point"|"line"|"rect", vertices:[[x,y],...], color:[r,g,b,a]},保存在 JS 的 objects 数组中,颜色随对象保存,改色不重建对象。

命中判断(js/challenge.js 的 hitTest):矩形用轴对齐内部判断(点坐标在 min/max 范围内,含边界);线段用点到线段距离 ≤ 0.03;点用欧氏距离 ≤ 0.03。命中按「后画的优先」(从数组尾部向前找)。

新增功能与代码位置:选择模式(canvas click 中 kind==="select" 分支)、选中高亮(render 中 HIGHLIGHT)、改色(color input 事件)、撤销(undo 按钮事件 objects.pop())。