web-dev-qa-db-ja.com

React Native？

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
}

回転とズームの実装に関する問題が一緒に機能していません。

完全なスナックの例を示します 。

バグを再現するには：

  1. 画像を1回転させます
  2. ピンチしてズームインまたはズームアウト
  3. 画像をもう一度回転させます

これで画像が反転し、正しくオフセットされなくなります。

ここでは、バグを再現するために少なくとも3つの変換が連続して行われているため、問題を追跡することができませんでした。

この質問は、必要に応じて確実に賞金が支払われます。また、金銭的な報酬を提供することもあります。ありがとう！

更新：いくつかの提案をした後、この問題を解決する最善の方法は、マトリックス変換を介して、そして何らかの形でこのマトリックスを変換して、RNをスタイリングに戻すことです画面上で表現できます。マトリックス変換は、パン、回転、ズームをサポートする必要があります。

javascriptreactjsreact-nativemathgeometry
34
j_d

bottomBoundaryなどを分解した変換行列（回転、スケール、変換）に置き換え、UIでマルチタッチを使用します。画像上で1本の指をスライドさせると、マトリックスの変換コンポーネントを更新できます。2本の指でそれを変形すると、画像が指にくっついているように見えます。回転を90度の増分に制限したい場合は、ユーザーが離したときに回転をスナップできます。これにより、現在の回転ボタンを必要とせずに、画像内を自由かつ直感的に移動できます。

マトリックスを常に分解された形式で格納することで、数値の不正確さ（スキューおよびアスペクト比の変化）が蓄積するのを避けるために、マトリックスを分解または正規化する必要がなくなります。

新しいDecomposedMatrixクラスを作成すると、コードの構造化に役立ちます。重要なのは、大まかに次のように変換することです。

scaleBy(scale) {
    this.scale *= scale;
    this.x *= scale;
    this.y *= scale;
}
1
jjrv