爲什麼翻譯和縮放的行爲與預期的一樣，但旋轉不在天真的變換實現中？

Question

手動將轉換矩陣應用於2D點時，我遇到了一個奇怪的問題。當我將變換或縮放應用到變換矩陣時，2D點的結果位置就是人們所期望的位置。另一方面，旋轉似乎傾斜並以奇怪和意想不到的方式旋轉形狀。

我一直在試圖找出爲什麼這個問題發生了幾天，但無濟於事。我檢查了數學，並且它似乎並不是問題的原因（當通過SVG中的transform屬性應用複合變換時，複合變換的行爲與預期相同，但手動應用於每個像素時不會發生），所以我是鉛相信這是我理解變換矩陣實際應用於2D點的一個缺陷。我天真地將2D點與變換矩陣相乘以得到新的點。

爲什麼輪轉表現不如預期？

舉例說明此問題，請登錄jsfiddle。忽略倒轉的y軸，因爲即使使用正確定向的旋轉矩陣，問題也會出現。以下是主要部分：

window.onload = function(e) { 
    var canvas = document.getElementsByTagName('canvas')[0]; 

    if (canvas.getContext) { 
     var ctx = canvas.getContext('2d'); 
     var ctm = [1.0, 0.0, 0.0, 1.0, 0.0, 0.0]; 
     ctx.lineWidth = 0.0; 

     function matrix_mul(a, b) { 
      return [ 
       a[1]*b[2] + a[0]*b[0], 
       a[1]*b[3] + a[0]*b[1], 
       a[3]*b[2] + a[2]*b[0], 
       a[3]*b[3] + a[2]*b[1], 
       b[4] + a[5]*b[2] + a[4]*b[0], 
       b[5] + a[5]*b[3] + a[4]*b[1] 
      ]; 
     } 
     function rotate(ang) { 
      ctm = matrix_mul(ctm, [Math.cos(ang), Math.sin(ang), -Math.sin(ang), Math.cos(ang), 0.0, 0.0]); 
     } 
     function paint_point(x, y) { 
      var x = ctm[0]*x + ctm[2]*y + ctm[4]; 
      var y = ctm[1]*x + ctm[3]*y + ctm[5]; 
      ctx.fillRect(x, y, 1, 1); 
     } 
     function square() { 
      for (i = 0; i <= 100; ++i) { paint_point(150+i, 150); } 
      for (j = 0; j <= 100; ++j) { paint_point(150, 150+j); 
             paint_point(250, 150+j); } 
      for (i = 0; i <= 100; ++i) { paint_point(150+i, 250); } 
     } 


     square(); 
     for (d=0; d<3; ++d) { 
      rotate(Math.PI/14); 
      ctx.fillStyle = 'rgb(0, ' + d+30*40 + ', 0)'; 
      square(); 
     } 

     ctm = [1.0, 0.0, 0.0, 1.0, 0.0, 0.0]; 
     ctx.fillStyle = 'rgb(0, 0, 255)'; 
     rotate(Math.PI/14 * 3); 
     square(); 

    } else { 
     alert("Something bad happend"); 
    } 
}; 

Answer 1

只是一個簡單的拼寫錯誤在您的轉換功能

function paint_point(x, y) { 
    var x = ctm[0]*x + ctm[2]*y + ctm[4]; 
    var y = ctm[1]*x + ctm[3]*y + ctm[5]; 
    ctx.fillRect(x, y, 1, 1); 
    } 

您已經聲明x和y，但他們已經被定義爲參數。因此x在第一行上被修改，使得第二行使用不正確的值x。

修復很簡單。

function paint_point(x, y) { 
    var x1 = ctm[0]*x + ctm[2]*y + ctm[4]; 
    var y1 = ctm[1]*x + ctm[3]*y + ctm[5]; 
    ctx.fillRect(x1, y1, 1, 1); 
    } 

或者更好

function paint_point(x, y) { 
    ctx.fillRect(
     ctm[0]*x + ctm[2]*y + ctm[4], 
     ctm[1]*x + ctm[3]*y + ctm[5], 
     1, 1 
    ); 
    }