二维扭曲

二维扭曲原理

• 二维扭曲的基本原理是二维图形的顶点进行扭曲处理，为了扭曲效果更佳真实，扭曲更佳平和，需要将二维图形切分成很多个小块，即由很多个小三角形组成一个大的二维图形。具体如下图。
  

  

• 当一个二维图形有很多个小三角形组成时，便可以对其进行很真实的扭曲了，详细的扭曲原理如下。
  

  

  • 首先，假设扭曲中心点为O，其坐标为(X₀,Y₀),绕中心扭动的点为D，其坐标为(X₁,Y₁)。
  • 设点D在X方向上相对于O点的偏移量为XSpan，Y方向上相对于O点的偏移量为YSpan，那么有如下公式：
    XSpan=X₁-X₀
    YSpan=Y₁-Y₀
    OD=$\sqrt{XSpan^2+YSpan^2}$
  • 有了XSpan与YSpan的值后可以很方便的求出OD与X轴的夹角θ，具体情况如下:
    当XSpan=0时，YSpan>0时，θ=90^o;
    当XSpan=0时，YSpan<0时，θ=270^o;
    当XSpan!=0时，那么θ=atan(YSpan/XSpan);
  • 计算出θ角后，便可以进一步计算D点旋转后OD与X轴的夹角θ^':
    θ^'=θ+ratio*OD;
        提示：ratio是与当前D点旋转角度相关的一个系数，通过将其与OD相乘，可以使二维图形OD射线上不同距离处产生不同程度的扭曲，同时在程序运行过程中，ratio是不断更新且连续变化的，因此可以产生动画效果。
  • 计算出旋转后的角度θ^'后就可以求出旋转后的点X、Y坐标了：
    X₁^'= X₀+ OD×cos(θ^')
    Y₁^'= Y₀+ OD×sin(θ^')