javascript - canvas:how to complete translate,skew,rotate...in just one transform statement? -
i studying 'transform' in recent days,and know how translate,rotate,skew,scale transform's matirx. if want actions above in 1 transform statement, how can do?
ctx.transform(a,b,c,d,e,f);
when want rotate transform, must post 4 arguments each 1 (a,b,c,d), ,if want rotate , scale, example, rotate 30 deg , scale (1.5,2), can transform done them @ same time? values of (a,b,c,d)? , how calculate them?
and question: there order in transform? mean if use transform rotate , scale , translate, what's order between them? after all, order important, 'translate first,scale next' 'scale first,translate next', different results.
this math done context.transform(a,b,c,d,e,f)
when use single context.transform multiple operations (translate+scale+rotate)
- the translate done first.
- the scale , rotate done next (order of these not matter).
this matrix math in javascript form:
// a=0, b=1, c=2, d=3, e=4, f=5 // declare array hold our transform math // identity matrix (where no transforms exist) var matrix=[1,0,0,1,0,0]; // example, // rotate 30 degrees clockwise 0 degrees // note: 0 degrees extends rightward horizontally origin rotate(30*math.pi/180); // scale 1.5 in x , 2.0 in y scales scale(1.5,2,0); // plug our transform array context context.transform(matrix[0],matrix[1],matrix[2],matrix[3],matrix[4],matrix[5]); // translate array function translate(x,y){ matrix[4] += matrix[0] * x + matrix[2] * y; matrix[5] += matrix[1] * x + matrix[3] * y; } // scale array function scale(x,y){ matrix[0] *= x; matrix[1] *= x; matrix[2] *= y; matrix[3] *= y; } // rotate array function rotate(radians){ var cos = math.cos(radians); var sin = math.sin(radians); var m11 = matrix[0] * cos + matrix[2] * sin; var m12 = matrix[1] * cos + matrix[3] * sin; var m21 = -matrix[0] * sin + matrix[2] * cos; var m22 = -matrix[1] * sin + matrix[3] * cos; matrix[0] = m11; matrix[1] = m12; matrix[2] = m21; matrix[3] = m22; }
Comments
Post a Comment