Animate CC开发儿童涂色游戏如何检测对象是否已完全涂色

获取Shape颜色的实现方法 #

分两种场景对应不同实现：

• 实时读取当前正在使用的涂色颜色：直接读取你代码中定义的全局变量color即可，该变量会在每次用户落笔时自动更新为当前选中的色值
• 读取Shape上指定坐标的颜色：CreateJS的Shape实例不会存储已绘制路径的像素信息，你需要将承载涂色内容的MovieClip绘制到临时Canvas上下文，再通过像素读取API获取对应位置色值，示例代码如下：

// 初始化临时canvas，尺寸和目标涂色MovieClip一致
var tempCanvas = document.createElement("canvas");
tempCanvas.width = that.obj1.nominalBounds.width;
tempCanvas.height = that.obj1.nominalBounds.height;
var tempCtx = tempCanvas.getContext("2d");

stage.update(); // 先同步最新的渲染状态
that.obj1.draw(tempCtx); // 将涂色容器绘制到临时上下文

// 读取坐标(x,y)的像素值，x、y为相对于obj1的本地坐标
var pixel = tempCtx.getImageData(x, y, 1, 1).data;
// 把rgba值转换为十六进制颜色格式
var targetColor = "#" + ((1 << 24) + (pixel[0] << 16) + (pixel[1] << 8) + pixel[2]).toString(16).slice(1);

检测涂色区域是否完全填充的实现方法 #

推荐用像素对比方案实现，适配你当前的代码结构，步骤如下：

1. 提前生成基准数据：隐藏上层轮廓MovieClip，导出空白状态下涂色容器的像素数据，统计其中非透明像素的总数量，这个数值就是你需要涂色的目标区域总像素数，自动排除了轮廓外的无效透明区域
2. 触发检测时机：在handleMouseUp事件（用户每次涂色结束抬手）时触发检测逻辑
3. 对比涂色进度：将当前涂色容器绘制到临时Canvas，统计所有和空白底色不同的非透明像素数量，和基准总像素数做对比，达到预设阈值（建议设95%~98%，规避抗锯齿导致的边缘像素误差）即可判定为完全涂色

如果你的项目包含多个独立涂色区域，可以提前为每个区域单独生成基准像素数据，分区域检测，避免跨区域误判

内容的提问来源于stack exchange，提问作者TheGunners