最近经常有canvas的画图需求,免不了涉及很多坐标的计算。其中有一个当初困扰我很久的问题,算法返回了一个带角度的文字,绘制在canvas上的时候,必须要旋转后绘制。所以需要根据初时的文字坐标位置,换算出旋转后的坐标。下面就是具体的算法和示例。
如图所示,一个矩形根据左上角旋转90°之后,求旋转后的坐标。
/**
* 计算某个点旋转后的坐标
*
* @param point 旋转的点 {x,y}
* @param angle 旋转的角度
* @param originPoint 基于哪个点旋转,默认值左上角原点{x: 0, y: 0}
* @returns {{x: number, y: number}}
*/
function rotatePoint(point, angle, originPoint = {x: 0, y: 0}) {
const cosA = Math.cos(angle * Math.PI / 180);
const sinA = Math.sin(angle * Math.PI / 180);
const rx = originPoint.x + (point.x - originPoint.x) * cosA - (point.y - originPoint.y) * sinA;
const ry = originPoint.y + (point.x - originPoint.x) * sinA - (point.y - originPoint.y) * cosA;
return { x: rx,y: ry };
}
const point = {x:200, y:100};
const angle = 90;
// const originPoint = {x:0, y:0};
console.log('-->', rotatePoint(point, angle));
上面就是具体的计算方法,拿过去就可以直接使用。
不过该方法也有个小问题,如上面截图所示(-99.999999其实应该是-100),都是直接使用js直接计算,免不了就会存在计算精度问题(想了解更多有关计算精度问题,请自行搜索)。想要解决这个问题,可以通过引入decimal.js或者math.js或者bigNumber.js解决。如何使用也请自己搜索-_-!
但是除非对精度要求特别高,不然这点误差我觉得可以忽略不计。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。