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

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));

Vector/Array 版本类似，但没有视觉提示。根据您的设置，您可能想要测试哪个最适合您：BitmapData 比 Arrays 占用更多内存，但您可以轻松创建 Bitmap，将其添加到显示列表并检查是否正确，等等。

如果速度是个问题：

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

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

  var 像素：int = source.width * source.height; 对于（像素；像素 >=0；像素--）

HTH