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

Popular posts from this blog

java - activate/deactivate sonar maven plugin by profile? -

python - TypeError: can only concatenate tuple (not "float") to tuple -

java - What is the difference between String. and String.this. ? -