Question

我目前正在开发自己的小在线像素编辑器现在我正在尝试添加旋转功能。但我无法弄清楚如何实现它。

以下是我的像素网格的基本查询：

for (var y = 0;y < pixelAmount;y++) {
    for (var x = 0;x < pixelAmount;x++) {
        var name = y + "x" + x;

        newY = ?? ;
        newX = ?? ;

        if ($(newY + "x" + newX).style.backgroundColor != "rgb(255, 255, 255)")
        { $(name).style.backgroundColor = $(newY + "x" + newX).style.backgroundColor; }
    }
}

如何计算newY和newX？

Answer 1

How do you rotate a two dimensional array?

从这个^帖子我得到了这个方法（在c＃中）：

int a[4][4];
int n=4;
int tmp;
for (int i=0; i<n/2; i++){
        for (int j=i; j<n-i-1; j++){
                tmp=a[i][j];
                a[i][j]=a[j][n-i-1];
                a[j][n-i-1]=a[n-i-1][n-j-1];
                a[n-i-1][n-j-1]=a[n-j-1][i];
                a[n-j-1][i]=tmp;
        }
}

或者这个：

int[,] array = new int[4,4] {
    { 1,2,3,4 },
    { 5,6,7,8 },
    { 9,0,1,2 },
    { 3,4,5,6 }
};

int[,] rotated = RotateMatrix(array, 4);

static int[,] RotateMatrix(int[,] matrix, int n) {
    int[,] ret = new int[n, n];

    for (int i = 0; i < n; ++i) {
        for (int j = 0; j < n; ++j) {
            ret[i, j] = matrix[n - j - 1, i];
        }
    }

    return ret;
}

第一种方法不使用第二个数组（/ matrix）来节省内存..

Answer 2

查看this doc（第3节：使用任意值的角度旋转位图）。它将引导您完成如何进行数学运算并为您提供一些示例代码（C ++，但它应该足以满足您的需求）。

Answer 3

如果非常快速的性能不是很重要（默认情况下是这种情况），您可以考虑顺时针旋转图片，方法是将图片对着主对角线然后水平翻转。逆时针旋转，水平翻转，然后靠近主对角线。代码更简单。

对于对角线翻转，您可以在此循环中将image[x,y]的值与image[y,x]进行交换

for( var x = 0; x < pixelAmount; ++x )
    for( var y = x + 1; y < pixelAmount; ++y )
        swap(image[x,y],image[y,x]);

对于水平翻转，您可以执行类似

的操作

    for( var y = 0; y < pixelAmount; ++y )
    {
        i = 0; j = pixelAmount - 1;
        while( i < j ) {
            swap( image[i,y], image[j,y] );
            ++i; --j;
        }
    }

方形像素网格的图像旋转算法

3 个答案: