React Nativeで比較的複雑な画像編集UIを構築しました。
このエクスペリエンスは、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
}
回転とズームの実装に関する問題が一緒に機能していません。
バグを再現するには:
これで画像が反転し、正しくオフセットされなくなります。
ここでは、バグを再現するために少なくとも3つの変換が連続して行われているため、問題を追跡することができませんでした。
この質問は、必要に応じて確実に賞金が支払われます。また、金銭的な報酬を提供することもあります。ありがとう!
更新:いくつかの提案をした後、この問題を解決する最善の方法は、マトリックス変換を介して、そして何らかの形でこのマトリックスを変換して、RNをスタイリングに戻すことです画面上で表現できます。マトリックス変換は、パン、回転、ズームをサポートする必要があります。
bottomBoundary
などを分解した変換行列(回転、スケール、変換)に置き換え、UIでマルチタッチを使用します。画像上で1本の指をスライドさせると、マトリックスの変換コンポーネントを更新できます。2本の指でそれを変形すると、画像が指にくっついているように見えます。回転を90度の増分に制限したい場合は、ユーザーが離したときに回転をスナップできます。これにより、現在の回転ボタンを必要とせずに、画像内を自由かつ直感的に移動できます。
マトリックスを常に分解された形式で格納することで、数値の不正確さ(スキューおよびアスペクト比の変化)が蓄積するのを避けるために、マトリックスを分解または正規化する必要がなくなります。
新しいDecomposedMatrix
クラスを作成すると、コードの構造化に役立ちます。重要なのは、大まかに次のように変換することです。
scaleBy(scale) {
this.scale *= scale;
this.x *= scale;
this.y *= scale;
}