如何在javascript canvas中绘制并将其与形状进行比较？ [英] How to draw in javascript canvas and compare it to a shape?

问题描述

为了保持简短我想知道如何跟踪用户绘图从他们点击到他们放手，比较它，以检查其精度与说，一个完美的圆？

so to keep it short I'm wondering how would I be able to track a user drawing from the moment they click to when they let go and compare it to check its accuracy with say, a perfect circle?

这是否可能，如果是这样，与完美圆相比，检查其准确性的最佳方法是什么？

Would this be possible, and if so what are the best ways to check its accuracy compared to a perfect circle and how?

也想像这样，如果用户画了一个圆，但开始和结束点不完全相符，可能画一条线连接他们等。

Also thinking of this like if the user has drawn a circle but the start and end points don't exactly meet, maybe draw a line to connect them, etc?

推荐答案

下面是我如何做比较一个数字：我会让globalComposite操作'xor'模式做正确的图的substraction，然后，用getImageData，计算非空像素以估计误差。

Here's how i would do to compare a figure : I would let globalComposite operation 'xor' mode do the 'substraction' of the right figure, then, with getImageData, count the non-null pixels to estimate the error.

步骤：

•让用户绘制和存储点坐标。

•当figure完成时，计算图边界框（基本上是x / y上的最小值/最大值）。

•在具有bbox大小的临时画布上再次绘制图形（作为实心多边形）。

•将globalComposite设置为xor，并在该画布上绘制完美的图形。

•获取画布的imageData并计算非空像素。

•计算非分数像素计数与画布大小的分数。我想，小于5％的错误是完美的，小于25％是非常好的...只有尝试可以告诉。

Steps :
• Let the user draw and store the points coordinates.
• When figure is complete, compute the figure bounding box (min/max on x/y basically).
• Draw again the figure (as a filled polygon) on a temporary canvas having the size of the bbox.
• Set globalComposite to 'xor', and draw what would be the perfect figure on this canvas.
• Grab the imageData of the canvas and count non-null pixels.
• Compute the 'score' out of non-null pixels count vs canvas size. I suppose that less than 5% error is perfect, less than 25% is very good... Only trying can tell.

这篇关于如何在javascript canvas中绘制并将其与形状进行比较？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！