js通过原型链的形式封装方法为组件

首先我们可以看看下面一张图

 控制区有两个功能，一方面是和前端做交互渲染，另一方面是调用缓存区中所返回回来的封装方法所产生的值

此处我们采用的是angular.js的形式

html文件为

    
        
        
        
        
        
        
        
        
        
        
        
    
    
        

            

                

                    
按钮区域
                    取消测量
                    切换测量
                    测试距离
                    测试半径
                
                

                    直线距离:{{line}}
                    夹角:{{rice}}°
                    圆的半径:{{yuan}}
                
                

                
保留区域
            
        
        
        
        
        
    

控制器的名称为MangerCtrl.js

var app = angular.module("myApp", []);
app.controller("myController", function ($scope) {
    $scope.line = [];
    $scope.rice = [];
    $scope.yuan = [];
    $scope.option = "green";

    var manger = new mangerBuffer();
    // 计算坐标方法
    $scope.SetPoint = function (e) {
        manger.SetPoint(e);
    };

    $scope.Delete = function () {
        $scope.line = [];
        $scope.yuan = [];
        $scope.rice = [];
    };
    $scope.GetStateD = function () {
        var list = manger.GetStateD();
        $scope.line = list[0];
        $scope.rice = list[1];
        if ($scope.rice == "NaN") {
            $scope.option = "red";
        }
    };
    $scope.GetStateR = function () {
        $scope.yuan = manger.GetStateR();
        if ($scope.yuan == "NaN") {
            $scope.option = "red";
        }
    };
});

缓存区的名称为mangerBuffer.js

function mangerBuffer() {
    this.lineRobot = new Line();
    this.riceRobot = new Rice();
    this.listX = [];
    this.listY = [];
}

mangerBuffer.prototype.GetStateD = function () {
    if (this.isVable()) {
        // 计算(调用函数发送参数)
        return this.lineRobot.GetStateD(this.listX, this.listY);
    } else {
        alert("至少两个坐标数");
    }
};

//判断是否计算
mangerBuffer.prototype.isVable = function () {
    if (this.listX.length > 1) {
        // 计算(调用函数发送参数)
        return true;
    } else {
        return false;
    }
};

mangerBuffer.prototype.GetStateR = function () {
    if (this.isVable()) {
        return this.riceRobot.GetStateR(this.listX, this.listY);
    } else {
        alert("至少三个坐标数");
    }
};

mangerBuffer.prototype.SetPoint = function (e) {
    var p1, p2;
    p1 = this.listX.push(e.offsetX);
    p2 = this.listY.push(e.offsetY);
};

mangerBuffer.prototype.GetState = function () {};

方法1，计算点之间的距离，LineRobot.js

function Line() {}

// 接受父级的传参
Line.prototype.GetStateD = function (listX, listY) {
    var list = [];
    dx = Math.abs(listX[listX.length - 2] - listX[listX.length - 1]);
    dy = Math.abs(listY[listY.length - 2] - listY[listY.length - 1]);
    var dis = Math.sqrt(Math.pow(dx, 2) + Math.pow(dy, 2));
    var distance = (360 * Math.atan(dy / dx)) / (2 * Math.PI);
    list.push(parseInt(dis), parseInt(distance));
    return list;
};

方法2，计算点所形成圆的半径，YuanRobot.js

function Rice() {}

Rice.prototype.GetStateR = function (listX, listY) {
    const a =
        Math.abs(
            (listX[listX.length - 3] - 0) * (listY[listY.length - 2] - 0) -
                (listY[listY.length - 3] - 0) * (listX[listX.length - 2] - 0)
        ) / 2;
    const b = Math.sqrt(
        (listX[listX.length - 3] - 0) * (listY[listY.length - 1] - 0) -
            (listY[listY.length - 3] - 0) * (listX[listX.length - 1] - 0)
    );
    dr = parseInt(a / b);
    return dr;
};

最终的效果图