Workflow：采用坐标变换（移动和旋转）画箭头

背景

流程设计器的连线部分需要画一个箭头代表连接的方向，下图是期望的效果：

刚开始我准备采用三角函数（sin和cos）来计算三角的坐标，实现的过程真不爽（有兴趣的朋友可以试试），就在完工的时候，突然想到了很早之前看过一本书《flash动画编程》，一下子有所顿悟，当时书中好像讲到了坐标变换，下面贴出采用坐标变换后的实现。

思路

1. 先画出下图中的第一个三角。
2. 旋转第一个三角的坐标得到第二个三角。
3. 移动第二个三角的坐标得到第三个三角。

实现

     /**
      * 创建箭头坐标数组。
      *
      * @public
      * @param {Object} end 顶点坐标
      * @param {Number} angle 箭头角度
      * @param {Number} angle 箭头长度
      * @return {Array} 箭头坐标数组
      */
     createArrawPoints: function (end, angle, length) {
         var me = this;

         var tan = Math.tan(75 * Math.PI / 180);
         var size = length / tan;

         var points = [
             {
                 x: 0,
                 y: 0
             },
             {
                 x: -length,
                 y: -size
             },
             {
                 x: -length,
                 y: size
             }
         ];

         points = this.rotate(points, angle);

         return this.move(points, end);
     },

     /**
      * 坐标批量移动。
      *
      * @public
      * @param {Array} points 坐标数组
      * @param {Object} to 移动后的中心坐标
      * @return {Array} 移动后的坐标数组
      */
     move: function (points, to) {
         var me = this;

         return Ext.Array.map(points, function (point) {
             return {
                 x: to.x + point.x,
                 y: to.y + point.y
             };
         });
     },

     /**
      * 坐标批量旋转。
      *
      * @public
      * @param {Array} points 坐标数组
      * @param {Number} angle 角度
      * @return {Array} 旋转后的坐标数组
      */
     rotate: function (points, angle) {
         var me = this;

         var cos = Math.cos(angle);
         var sin = Math.sin(angle);

         return Ext.Array.map(points, function (point) {
             return {
                 x: cos * point.x - sin * point.y,
                 y: cos * point.y + sin * point.x
             };
         });
     },

设计器效果

备注

初中数学解决了大问题，有机会想好好再温习一下数学知识。