canvas：如何完成翻译，倾斜，旋转...在一个变换语句？ [英] canvas:how to complete translate,skew,rotate...in just one transform statement?

问题描述

我在最近几天学习变换，现在我知道如何通过transform的matirx做平移，旋转，倾斜和缩放。但是如果我想在一个转换语句中做所有的动作，我该怎么办？

I studying 'transform' in recent days,and now i know how to do translate,rotate,skew,scale by transform's matirx. but if i want to do all actions above in one transform statement, how can i do?

ctx.transform(a,b,c,d,e,f);

当我们想要通过transform旋转东西时，我们必须为每个参数发送4个参数（a，b， c，d），所以，如果我想旋转和缩放，例如，旋转30度和缩放（1.5,2），可以同时进行变换吗？所以（a，b，c，d）的值是多少？以及如何计算它们？

when we want rotate something by transform, we must post 4 arguments for each one (a,b,c,d), So ,if i want rotate and scale, for example, rotate 30 deg and scale (1.5,2), can the transform done them at the same time? so what the values of (a,b,c,d)? and how calculate them?

另一个问题：transform是否有顺序？我的意思是如果我使用transform来旋转和缩放和平移，它们之间的顺序是什么？毕竟，顺序是非常重要的，翻译第一，缩放下一个'与'缩放第一，翻译下一步'，将得到不同的结果。

and another question: Is there an order in transform? I mean if i use transform to rotate and scale and translate, what's the order between them? after all, the order is very important, 'translate first,scale next' with 'scale first,translate next', will get different results.

推荐答案

这是由context.transform（a，b，c，d，e，f）完成的数学

您使用单个context.transform执行多个操作（translate + scale + rotate）

When you use a single context.transform to do multiple operations (translate+scale+rotate)

• 首先完成翻译。


• 缩放和旋转完成（这些顺序无关紧要）。

数学JavaScript形式：

This is the matrix math in javascript form:

    // a=0, b=1, c=2, d=3, e=4, f=5

    // declare an array that will hold our transform math
    // this is the identity matrix (where no transforms exist)
    var matrix=[1,0,0,1,0,0];

    // for example, 

    // rotate 30 degrees clockwise from 0 degrees
    // note: 0 degrees extends rightward horizontally from the origin
    rotate(30*Math.PI/180);

    // scale by 1.5 in X and 2.0 in Y scales
    scale(1.5,2,0);

    // plug our transform array into the context
    context.transform(matrix[0],matrix[1],matrix[2],matrix[3],matrix[4],matrix[5]);



    // do the translate to the array 
    function translate(x,y){
        matrix[4] += matrix[0] * x + matrix[2] * y;
        matrix[5] += matrix[1] * x + matrix[3] * y;
    }

    // do the scale to the array
    function scale(x,y){
        matrix[0] *= x;
        matrix[1] *= x;
        matrix[2] *= y;
        matrix[3] *= y;    
    }

    // do the rotate to the 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;   
    }

这篇关于canvas：如何完成翻译，倾斜，旋转...在一个变换语句？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！