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
            };
        });
    },

设计器效果

 

备注

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