React Native - 使用变换矩阵将缩放变换的原点从中心更改为顶部答案

【问题标题】：React Native - use transformation matrix to change the origin of the scale transform from the center to the topReact Native - 使用变换矩阵将缩放变换的原点从中心更改为顶部
【发布时间】：2019-02-22 08:35:06
【问题描述】：

我正在使用下面的代码来做一个变换动画：

transform: [
    // scaleX, scaleY, scale, theres plenty more options you can find online for this.
    {  scaleY: this.state.ViewScale } // this would be the result of the animation code below and is just a number.
]}}>

目前，transform-origin（

我找到了一个模拟transform-origin css的方法：

transformOrigin(matrix, origin) {
    const { x, y, z } = origin;

    const translate = MatrixMath.createIdentityMatrix();
    MatrixMath.reuseTranslate3dCommand(translate, x, y, z);
    MatrixMath.multiplyInto(matrix, translate, matrix);

    const untranslate = MatrixMath.createIdentityMatrix();
    MatrixMath.reuseTranslate3dCommand(untranslate, -x, -y, -z);
    MatrixMath.multiplyInto(matrix, matrix, untranslate);
}

但我不确定使用什么矩阵来以我想要的方式影响组件。我对变换矩阵有一些了解，但仅用于平移和旋转 - 我不确定如何影响 scale 变换的原点。

对于任何想要挖掘的人，谢谢：https://en.wikipedia.org/wiki/Transformation_matrix

【问题讨论】：

标签： javascript css react-native matrix transform

【解决方案1】：

您需要 3 次矩阵变换。 1) 将视图中心平移到所需的原点，2) 应用缩放，3) 应用负平移。

const matrix = MatrixMath.createIdentityMatrix();

// First translation, move view center to top left corner
const translate = MatrixMath.createIdentityMatrix();
MatrixMath.reuseTranslate3dCommand(translate, -viewWidth / 2, -viewHeight / 2, 0);
MatrixMath.multiplyInto(matrix, matrix, translate);

// Scale, center point and the top left corner are now overlapping so view will expand or shrink from the top left corner
const scale = MatrixMath.createIdentityMatrix();
MatrixMath.reuseScale3dCommand(scale, this.state.ScaleView, this.state.ScaleView, 1);
MatrixMath.multiplyInto(matrix, matrix, scale);

// Move your view's top left corner to it's original position
const untranslate = MatrixMath.createIdentityMatrix();
MatrixMath.reuseTranslate3dCommand(untranslate, viewWidth / 2, viewHeight / 2, 0);
MatrixMath.multiplyInto(matrix, matrix, untranslate);

// You need to set transform matrix somewhere in your JSX like this:
// <View style={{ transform: [ { matrix } ] }} />
// Or, you can call ref.setNativeProps().

我认为这种方式你必须使用矩阵进行缩放，所以不需要使用特定的变换函数，如 scale/scaleX/scaleY。

您也可以手动计算翻译值，并使用 transform 的translateX/translateY 函数来达到相同的效果。

【讨论】：