将用户生成的折线图与程序随机生成的折线图进行比较

Question

该程序将向学生显示折线图。学生必须使用箭头键将角色远离或靠近运动检测器来重新创建该线图，从而创建距离-时间图。我可以捕获程序在绘制图形时生成的数据点。我还可以捕获学生生成的数据点。如何比较这两个图表，同时允许学生有一定的容忍度？我是否应该在绘制图表时或记录所有数据点后尝试检测不正确的图表？虽然有些图表是线性的并且易于比较，但其他图表将是分段函数，具有随机间隔的正斜率、负斜率和零斜率。

谢谢！

Answer 1

绘制图表线的顺序重要吗？

您可以将具有特定阈值的点记录到数组/向量中并进行比较。

一种快速而肮脏的方法是使用 2 个二进制（单色，只是黑白）图像：

1. 一个图像将是“打印屏幕”（BitmapData.draw()) 的图形（例如黑底白字）
2. 另一个图像将为白色（空白）用于写入黑色像素的 BitmapData
   用户/学生绘图的地方（按下鼠标时）。

例如

userBitmapData.setPixel(mouseX,mouseY,0x000000);

，当绘图完成时（释放鼠标或您设置的任何规则），
您运行一个函数来检查源（原始图）图像中有多少黑色像素
在目标（用户图）图像中匹配。

您可以创建一个包含在差异模式下混合的其他两个位图的 BitmapData，因此任何非黑色的内容都不匹配，或者只需循环遍历所有像素一次并手动检查像素是否匹配。请注意，这依赖于两个图像的尺寸（宽度，高度）相同的事实。

下面是一些代码来说明这一点：

function compare(source:BitmapData,destination:BitmapData,threshold:Number):Boolean{
    var commonPixels:Number = 0, totalPixels:Number = 0;

    for(var j:int = 0 ; j < source.height ; j++){
        for(var i:int = 0 ; i < source.width; i++){
            pixels++;
            if(source.getPixel(i,j) == destination.getPixel(i,j)) commonPixels++;
        }
    }
    trace('matching: ' + (commonPixels/pixels * 100) + ' % ');//delete this line,just testing
    if(commonPixels/pixels >= threshold) return true;
    else                     return false;  
}

//usage:
trace('is the graph correct ?: ' + compare(graphBitmapData,userBitmapData,0.7));

向量/数组版本将是类似的，但不会有视觉提示。根据您的设置，您可能想要测试哪一个最适合您：BitmapData 比数组占用更多内存，但您可以轻松创建位图，将其添加到显示列表并检查看起来是否正确等。

如果速度是一个重要因素，问题：

• 使用向量。而不是 Array 反向循环可能会更快
• （最大数为 0，递减）也应该加快速度

• 你可能会用一个循环而不是两个循环
  例如

  var Pixels:int = source.width * source.height;
  for(pixels;pixels >=0;pixels--)

HTH