前言
公司项目需求,需要实现图中的功能和效果
实现效果(上图)
参考了很多资料,也摸索了很多天,终于实现了
实现思路
在实现过程中,遇到了很多问题:
1.旋转的是坐标轴也跟着旋转吗?
答:坐标轴不会跟着旋转,只是坐标变化旋转。
2.旋转到一定角度时,旋转图片点击的范围会超过刚开始坐标,包括x、y
3.要获取旋转后的坐标, 首先要获取旋转按钮图片刚开始的角度(也就一开始画的角度),用Math.atan2(y,x)方法求得。可以参考这篇文章:详解canvas实现图片的拖拽、旋转、缩放(更新在Vue中使用的版本) - 掘金 (juejin.cn)
部分主要代码,计算旋转角度代码
mStartRotateAngle =atan2(mRectTop - height, mRectLeft + mRectWith / 2 - width / 2) / Math.PI * 180
//计算手指按下画布移动后的x,y角度
val transformAngle = atan2(y - mCentreY, x - mCentreX) / Math.PI * 180
//计算需要旋转的角度
mRotateAngle = transformAngle - mStartRotateAngle
获取旋转后的xy坐标点
/**
* @param x 是坐标轴移动以(mCentreX,mCentreY)原点的坐标
* @param y
* 获取以mCentreX、mCentreY为原点的坐标轴进行旋转后的XY坐标
*/
private fun getRotateXY(x: Float, y: Float, rotate: Double): FloatArray {
//Math.toRadians(double angdeg) 角度转化为弧度
//Math.toDegrees(Math.PI/2);弧度转化为角度 (π/2的角度值)
val curAngle = atan2(y, x) / Math.PI * 180
val sumAngle = curAngle + rotate
//将角度化为弧度
// val angle = Math.PI / 180 * sumAngle
val angle = Math.toRadians(sumAngle)
//初始坐标与中点形成的直线长度不管怎么旋转都是不会变的,用勾股定理求出然后将其作为斜边
val c = sqrt(x.pow(2) + y.pow(2))
//斜边乘sin值等于即可求出y坐标
val a = sin(angle) * c
//斜边乘cos值等于即可求出x坐标
val b = cos(angle) * c
//目前的xy坐标是相对于图片中点为原点的坐标轴
return floatArrayOf((b).toFloat(), (a).toFloat())
}
最后
由于是涉及公司产品,暂时就不上源码了,已经列出遇到的难题,解决了应该不难了!