Question

我正在使用svg为我的游戏创建游戏等级。我解析svg文件，看看我的精灵在场景中的位置。我得到了x和y，但后来我注意到一些元素有一个“transform”属性。在我的情况下，我的这个属性包含一个“矩阵（A，B，C，D，E，F）”值，我将其解析为一个结构并使用这种方式。

新的精灵位置是：

X = t.A * oldX + t.C * oldY + t.E;

Y = t.B * oldX + t.D * oldY + t.F;

新的精灵宽度和高度为：

W = oldW * Math.Sqrt（t.A * t.A + t.B * t.B）;

H = oldH * Math.Sqrt（t.C * t.C + t.D * t.D）;

要应用于精灵的旋转是：

R + =（（180 / Math.PI）* Math.Atan2（t.D，t.C） - 90）;

通常它可以工作但总是很好但是在“矩阵（1,0,0，-1,0,0）”的情况下，这相当于值“scale（1，-1）”，这是一个垂直翻转。

在这种情况下的结果是我想要的垂直翻转，但也是-oldW的x acis上的移位。

它接缝在末端刻度（1，-1）与矩阵（1,0,0，-1,0,0）不同... 在这种情况下，任何人都可以帮助理解什么是错的？

注意：我总是从左上角旋转我的精灵（这对我尝试的每个矩阵都很好，但是比例（1，-1））。

[编辑] Tnx为你发表评论。我做的很直接：我从SVG元素得到了比例（1，-1），我将其转换为矩阵（1,0,0，-1,0,0），如下所示：

public static Transform GetScale(float[] values)
{
    // here values is float[] { 1, -1 }
    return GetMatrix(new float[] { values[0], 0, 0, values[1], 0, 0 });
}

public static Transform GetMatrix(float[] values)
{
    // here values is float[] { 1, 0, 0, -1, 0, 0 }
    var px = DeltaTransformPoint(values, new float[] { 0, 1 });
    var py = DeltaTransformPoint(values, new float[] { 1, 0 });

    var skewX = ((180 / Math.PI) * Math.Atan2(px[1], px[0]) - 90);
    var skewY = ((180 / Math.PI) * Math.Atan2(py[1], py[0]));

    return new Transform()
    {
        A = values[0],
        B = values[1],
        C = values[2],
        D = values[3],
        E = values[4],
        F = values[5],
        TranslateX = values[4],
        TranslateY = values[5],
        ScaleX = Math.Sqrt(values[0] * values[0] + values[1] * values[1]),
        ScaleY = Math.Sqrt(values[2] * values[2] + values[3] * values[3]),
        SkewX = skewX,
        SkewY = skewY,
        Rotation = skewX
    };
}

public static float[] DeltaTransformPoint(float[] values, float[] point)
{
    var dx = point[0] * values[0] + point[1] * values[2] + 0;
    var dy = point[0] * values[1] + point[1] * values[3] + 0;

    return new float[] { dx, dy };
}

然后，Transform对象进入我之前发布的代码：

var X = t.A * oldX + t.C * oldY + t.E
var Y = t.B * oldX + t.D * oldY + t.F

在（58，-67）处有一个带有刻度（1，-1）的矩形意味着：

var X = 1 + 58 + 0 + -67 + 0 = 58
var Y = 0 * 58 + -1 * -67 + 0 = 67
R = ((180 / Math.PI) * Math.Atan2(-1, 0) - 90) // this is -180

所以我的矩形向下移动，然后应用-180的旋转。从我的矩形的左上角旋转，结果是矩形向上朝上，但也向左移动了矩形的宽度。

SVG变换：缩放到矩阵值？

0 个答案: