我刚刚在React Native中建立了一个相对复杂的图像编辑用户界面。
体验意图与Instagram非常相似,具有捏合缩放,平移和旋转功能。
变换以数据形式存储,例如:
transformation: {
bottomBoundary: 1989,
leftBoundary: 410,
rightBoundary: 1634,
topBoundary: 765,
rotation: 0,
},
其中topBoundary
和bottomBoundary
是相对于图像顶部的偏移量,leftBoundary
和rightBoundary
是相对于图像左侧的偏移量。
旋转时,由于React Native使用对象的中心作为变换原点,因此在90°或270°方向上,需要对图像进行偏移,以使它们仍然"粘附"在顶部/左侧并可以被偏移:
calculateRotationOffset.js
export default function (width, height) {
const transform = [
{ rotate: `${this.rotation}deg` },
]
/*
RN rotates around centre point, so we need to
manually offset the rotation to stick the image
to the top left corner so that our offsets will
work.
*/
if (this.rotation === 90) {
transform.push(
{ translateX: -((width - height) / 2) },
{ translateY: -((width - height) / 2) },
)
} else if (this.rotation === 270) {
transform.push(
{ translateX: ((width - height) / 2) },
{ translateY: ((width - height) / 2) },
)
}
return transform
}
我的旋转和缩放实现存在问题。
要重现错误,请按照以下步骤:
- 将图像旋转一次
- 捏合缩放
- 再次旋转图像
图像现在将被翻转和偏移不正确。
为了重现错误,这里顺序发生了至少三个变换,因此我无法找到问题所在。
如果需要,本问题肯定会有赏金,我还可能提供货币奖励。谢谢!
更新:经过一些建议,似乎最好的解决方法是通过矩阵变换,然后以某种方式将该矩阵转换回RN可以在屏幕上表示的样式。 矩阵变换需要支持平移,旋转和缩放。
Xz,Yz,Zx,Zy,Zz
和Z?
列中的一个零)。 - Spektreif
条件。 - Spektre