可编程式坐标--单位圆坐标

介绍

传统的坐标表示方法(x,y)需要手动一个个输入坐标，不便于编程，特别是在画规则图形的时候，有规则的点(x, y), (-x, -y), (nx, ny)明明可以使用程序控制，却还需要手工收入，特麻烦。

因此我发明了一种可编程的坐标表示方法--单位圆坐标。

理论

任何坐标都能用N * 单位圆与其外切矩形的切点及外切矩形顶点来表示，这些点包括：

( 0, 1 ) -- up

( 1, 1 ) -- upRight

( 1, 0 ) -- right

( 1, -1 ) -- downRight

( 0, -1 ) -- down

( -1, -1 ) -- downLeft

( -1, 0 ) -- left

( -1, 1 ) -- upLeft

因此在程序中，我只要给定值(N)和方向(单位圆坐标)就能制作一个二维坐标。

实现

/**

  * Create a point in paperJS by using 

the tangent points of an unit circle's enclosing rectangle, 

 * and the vertexes of this enclosing rectangle(directions) multiplied by two any given numbers, 

 * for example, (4, 2) is (1*4, 1*2), and (23.5, -23.5) is (1, -1) * 23.5 …

 * 

  * author: 杜霖 mcdooooo@gmail.com

  */

unitCircleCoor = {

     _Coor_: [{ // up

                    x: 0,

                    y: 1

               }, { // upRight

                    x: 1,

                    y: 1

               }, { // right

                    x: 1,

                    y: 0

               }, { // downRight

                    x: 1,

                    y: -1

               }, { // down

                    x: 0,

                    y: -1

               }, { // downLeft

                    x: -1,

                    y: -1

               }, { // left

                    x: -1,

                    y: 0

               }, { // upLeft

                    x: -1,

                    y: 1

               }],

    

     directions: [ "up", "upRight", "right", "downRight", "down", "downLeft", "left", "upLeft" ],

     _getCoorX: function( valX, direct ) {

                         var index = this.directions.indexOf( direct );

                         return ( -1 == index ) ? -99999 : this._Coor_[ index ].x * valX;

                  },

     _getCoorY: function( valY, direct ) {

                         var index = this.directions.indexOf( direct );

                         return ( -1 == index ) ? -99999 : this._Coor_[ index ].y * valY;

                  },

     /**

      * getCoor: return the point that ( X coord of direct * valX, Y coord of direct * valY )

      */

     getCoor: function( valX, valY, direct ) {

                          var coor = [];

                         coor.push( this._getCoorX( valX, direct ) );

                         coor.push( this._getCoorY( valY, direct ) );

                         return coor;

                },

 

     /**

      * getCoorEqual: return the point that direct * val

      * The point is a part of y=x function

      */

     getCoorEqual: function( val, direct ) {

                           return this.getCoor( val, val, direct );

                      }

};

应用

使用paperJs画规则图形

的代码：

var outerWidht = 50, innerWidth = 12.5, path = new Path();

path.strokeColor = "brown";

/**

  *  遍历["up", "upRight", "right", "downRight", "down", "downLeft", "left", "upLeft"] 

  * "up"，"right", "down", "left"方向的点使用N=50制作，即(0, 50), (50, 0), (0, -50), (-50, 0) 

  * "upRight", "downRight", "downLeft", "upLeft"方向的点使用N=12.5制作，即(12.5, 12.5), (12.5, -12.5), 

  * (-12.5,  -12.5), (-12.5, 12.5)

  */

for ( var i = 0; i < unitCircleCoor.position.length; i++ ) {

          if ( 0 == i % 2 ) {

                    path.add( new Point( unitCircleCoor.getCoorEqual( outerWidht, unitCircleCoor.position[i] ) ) );

          } else {

                    path.add( new Point( unitCircleCoor.getCoorEqual( innerWidth, unitCircleCoor.position[i] ) ) );

          }

}

path.closed = true;