javascript - 测量 HTML 5 Canvas 元素的 Angular ？

Question

在 HTML5 Canvas 中实现(测量) Angular 时，尤其是在旋转对象之后，我感到很困惑

假设我画了一个像这样的形状

ctx.moveTo(100,100)//center of canvas
ctx.lineTo(0,200)//left bottom
ctx.lineTo(200,200)//right bottom

我们知道它是 45 度或 pi*2/4 Angular 。

但是我如何使用数学函数计算出形状是否旋转？改变形状的x和y(第一个点)后如何重新测量它？

Answer 1

首先，您需要确保点存储在某种数据结构中，因为从 Canvas 本身提取点并不容易。类似数组的数组:

var angle = [[100,100], [0,200], [200,200]];

现在，您需要将线条转换为矢量:

var AB = [angle[1][0]-angle[0][0], angle[1][1]-angle[0][1]];
var BC = [angle[2][0]-angle[1][0], angle[2][1]-angle[1][1]];

现在求两者的点积:

var dot_product = (AB[0]*BC[0]) + (AB[1]*BC[1]);//not dot-product

现在您需要找到向量的长度(大小):

var ABmagnitude = Math.sqrt(Math.pow(AB[0],2) + Math.pow(AB[1],2));
var BCmagnitude = Math.sqrt(Math.pow(BC[0],2) + Math.pow(BC[1],2));

现在，您可以通过将点积除以两个量值的乘积并得到反余弦来将它们放在一起:

var theta = Math.acos(dot_product/(ABmagnitude*BCmagnitude));

您提到了旋转，但除非您只旋转一条线，否则 Angular 将保持不变。