首页 新闻 搜索 专区 学院

setTransform();

1
悬赏园豆:5 [已关闭问题] 关闭于 2012-04-29 15:44

我查到的这个函数的用处是:在渲染世界之前进行矩阵转换。

不是很明白,为什么在渲染世界之前要进行矩阵转换,另外这个函数的参数是什么情况?

先谢谢了~急等~

oO瑤池l佡的主页 oO瑤池l佡 | 初学一级 | 园豆:198
提问于:2012-04-29 15:11
< >
分享
所有回答(2)
0

繪製圖形,並且進行圖形轉換。矩形旋轉,變動等。

语法:context.setTransform(m11,m12,m21,m22,dx,dy)
m11,m12,m21,m22四个参数用来修改使用这个方法之后,绘制图形的计算方法,以达到变形目的
dx表示将坐标原点在x轴上向右移动x个单位
dy表示将坐标原点在y周上向下移动y个单位

無限遐想 | 园豆:3740 (老鸟四级) | 2012-04-29 15:36
0

变换矩阵:所有的变换其实都可以用矩阵来表述。

可以用下面两种方法直接设置变换矩阵:

context.transform(m11, m12, m21, m22, dx, dy)
context.setTransform(m11, m12, m21, m22, dx, dy)
第一个方法直接将当前的变形矩阵乘上下面的矩阵(注意排列的顺序):
m11  m21  dx
m12  m22  dy
0       0       1
第二个方法会重置当前的变形矩阵为单位矩阵,然后以相同的参数调用transform方法。

function draw() {  
  var canvas = document.getElementById("lesson01");  
  var ctx = canvas.getContext("2d");  
  
  var sin = Math.sin(Math.PI/6);  
  var cos = Math.cos(Math.PI/6);  
  ctx.translate(200, 200);  
  var c = 0;  
  for (var i=0; i <= 12; i++) {  
    c = Math.floor(255 / 12 * i);  
    ctx.fillStyle = "rgb(" + c + "," + c + "," + c + ")";  
    ctx.fillRect(0, 0, 100, 10);  
    ctx.transform(cos, sin, -sin, cos, 0, 0);  
  }  
    
  ctx.setTransform(-1, 0, 0, 1, 200, 200);  
  ctx.fillStyle = "rgba(255, 128, 255, 0.5)";  
  ctx.fillRect(0, 50, 100, 100);  
}

  所有的变换起始都是通过变换矩阵实现的,所以上述的平移,旋转,缩放都可以用相应的矩阵代替,精通数学的同学可以自己推导出来:
平移:context.translate(dx,dy)可以使用context.transform (1,0,0,1,dx,dy)或者context.transform(0,1,1,0.dx,dy)代替。
旋转:context.rotate(θ)可以使用context.transform(Math.cos(θ*Math.PI/180),Math.sin(θ*Math.PI/180),-Math.sin(θ*Math.PI/180),Math.cos(θ*Math.PI/180),0,0)或者

context.transform(-Math.sin(θ*Math.PI/180),Math.cos(θ*Math.PI/180),Math.cos(θ*Math.PI/180),Math.sin(θ*Math.PI/180), 0,0)代替。
缩放:context.scale(sx, sy)可以使用context.transform(sx,0,0,sy,0,0)或者context.transform(0,sy,sx,0, 0,0)代替。 

oO瑤池l佡 | 园豆:198 (初学一级) | 2012-04-29 15:43
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册