JavaScript图形实例：图形的扇形变换和环形变换

1.1  扇形变换

        将如图1所示的上边长方形的图形变换为下边的扇形图形的变换称为扇形变换。

        设长方形图形中任一点P₁(X₁,Y₁)变换为扇形图形上的点P₂(X₂,Y₂)，长方形的长为X，扇形圆心坐标为（X₀,Y₀），扇形半径为L，扇形与X轴的最小夹角为B，扇形弧对应夹角为C，则点P₂的坐标计算公式为：

            X₂=(L+Y₁)*COS(θ)+X₀

            Y₂=-(L+Y₁)*SIN(θ)+Y₀

        其中： θ=C*(X-X₁)/X₁+B

 

图1  扇形变换

        生成一个六瓣花型图案的基本数据，将长方形中的8个六瓣花型作为基本图案，进行指定层数的扇形变换。

        编写如下的HTML代码。

基本图案

您的浏览器不支持canvas！

扇形中基本图案层次数

您的浏览器不支持canvas！

        将上述HTML代码保存到一个html文本文件中，再在浏览器中打开包含这段HTML代码的html文件，在“扇形中基本图案层次数”数值框中输入“5”，单击“确定”按钮，可以在浏览器窗口中看到基本六瓣花型图案的5层扇形变换，如图2所示。

 

图2  扇形变换

1.2  环形变换

        将如图3所示的上边长方形带状图形变换为下边的环状图形的变换称为环形变换。环状变换将带状图的左右两端接在一起，因而带状图的上部被拉伸，下部被压缩。

        设带状图形中任一点P₁(X₁,Y₁)变换为环状图形上的点P₂(X₂,Y₂)，带状长方形的长为X，环状图形的圆心坐标为（PX,PY），L为环形内半径（L的值越小，变换后图案的变形越大），则点P₂的坐标计算公式为：

             X₂=(L+Y₁)*COS(θ)+PX

            Y₂=-(L+Y₁)*SIN(θ)+PY

        其中： θ=2π*(X-X₁)/X

 

图3  环形变换

        按环形变换的方法将如图4所示的基本图案进行环形变换。

图4  用于环形变换的基本图案

编写如下的HTML代码。

基本图案  

环形变换  

二重环形变换  

三重环形变换

您的浏览器不支持canvas！

        将上述HTML代码保存到一个html文本文件中，再在浏览器中打开包含这段HTML代码的html文件，可以看到在浏览器窗口中，出现“基本图案”、“环形变换”、“二重环形变换”、“三重环形变换”这四个按钮，单击“基本图案”按钮，绘制出如图4所示的基本图案，单击“环形变换”，绘制出如图5所示的环形变换图案，单击“二重环形变换”，绘制出如图6所示的二重环形变换图案，单击“三重环形变换”，绘制出如图7所示的三重环形变换图案。

        

图5  环形变换图案

 

图6 二重环形变换图案

 

图7 三重环形变换图案 

        下面我们将上面的例子进行扩充，提供多种基本图案的选择，选择好基本图案后，进行环形变换。编写的HTML文件内容如下。

基本图案选择：

--请选择--

图案1

图案2

图案3

环形变换  

二重环形变换  

三重环形变换

您的浏览器不支持canvas！

        将上述HTML代码保存到一个html文本文件中，再在浏览器中打开包含这段HTML代码的html文件，可以看到在浏览器窗口中，出现“基本图案选择”下拉列表框，提供三种基本图案的选择，还有“环形变换”、“二重环形变换”、“三重环形变换”这三个命令按钮。选定“基本图案”后，单击某个按钮，绘制出基本图案的相应环形变换图案。整个演示过程录屏后展示如图8所示。

 

图8  可选择图案的环形变换