基于HTML5的Canvas在线绘图系统

【实例简介】

  Canvas绘图工具，使用Javascript编写

 实现了基本的绘图功能

【核心代码】

//用于实现Javascript的继承机制
(function () {
    var initializing = false, fnTest = /xyz/.test(function () {
        xyz;
    }) ? /\b_super\b/ : /.*/;
    //基函数Class,什么也不干
    this.Class = function () {
    };
    // 创建一个新函数，继承自该函数
    Class.extend = function (prop) {
        var _super = this.prototype;
        // 实例化一个基函数,但是只建立实例,不调用构造函数
        initializing = true;
        var prototype = new this();
        initializing = false;
        // 将属性赋值到新prototype中
        for (var name in prop) {
            // 检查是否在重写已经存在的函数
            prototype[name] = typeof prop[name] == "function" &&
            typeof _super[name] == "function" && fnTest.test(prop[name]) ?
                (function (name, fn) {
                    return function () {
                        var tmp = this._super;
                        //添加一个新的._super()方法，但是该方法是super-class中的
                        this._super = _super[name];
                        //该方法只需要被暂时绑定，所以完成之后移除它
                        var ret = fn.apply(this, arguments);
                        this._super = tmp;
                        return ret;
                    };
                })(name, prop[name]) :
                prop[name];
        }
        // 利用init函数来虚拟类的构造器
        function Class() {
            // 所有的构建动作其实都是在init方法中完成
            if (!initializing && this.init)
                this.init.apply(this, arguments);
        }

        // 填充构建的 prototype 对象
        Class.prototype = prototype;
        // 强行使构造器指向函数本身而不是父函数
        Class.prototype.constructor = Class;
        // 使该函数为可扩展的
        Class.extend = arguments.callee;
        return Class;
    };
})();
//实现类继承基制的代码到此结束

//Point类
var Point = Class.extend({
    init: function (x, y) {//构造函数
        this.x = x;
        this.y = y;
    }
});

//Vector 向量类
var Vector = Class.extend({
    init: function (x, y) {//构造函数
        this.x = x;
        this.y = y;
    }
});

//图幅尺寸大小类
var Size = Class.extend({
    init: function (w, h) {//构造函数
        this.w = w;
        this.h = h;
    }
});

//图幅尺寸大小类
var CanvasStyle = Class.extend({
    init: function () {//构造函数
        this.strokeStyle = null;
        this.lineWidth = null;
    }
});

//图形边界类
var Bounds = Class.extend({
    init: function (x1, y1, x2, y2) {//构造函数
        this.left = x1;
        this.right = x2;
        this.bottom = y1;
        this.top = y2;
    },
    getCenter: function () {//获取边界中心点
        var w = this.right - this.left;
        var h = this.top - this.bottom;
        return new Point(this.left w / 2, this.bottom h / 2);
    },
    intersect: function (bounds) {//边界与边界是否相交
        var inBottom = (
            ((bounds.bottom >= this.bottom) && (bounds.bottom <= this.top)) ||
            ((this.bottom >= bounds.bottom) && (this.bottom <= bounds.top))
        );
        var inTop = (
            ((bounds.top >= this.bottom) && (bounds.top <= this.top)) ||
            ((this.top > bounds.bottom) && (this.top < bounds.top))
        );
        var inLeft = (
            ((bounds.left >= this.left) && (bounds.left <= this.right)) ||
            ((this.left >= bounds.left) && (this.left <= bounds.right))
        );
        var inRight = (
            ((bounds.right >= this.left) && (bounds.right <= this.right)) ||
            ((this.right >= bounds.left) && (this.right <= bounds.right))
        );
        intersects = ((inBottom || inTop) && (inLeft || inRight));
        return intersects;
    },
    extend: function (bounds) {//扩展边界
        if (this.left > bounds.left) {
            this.left = bounds.left;
        }
        if (this.bottom > bounds.bottom) {
            this.bottom = bounds.bottom;
        }
        if (this.right < bounds.right) {
            this.right = bounds.right;
        }
        if (this.top < bounds.top) {
            this.top = bounds.top;
        }
    }
});


//图层类定义DrawArea
var DrawArea = Class.extend({
    init: function (div) {//构造函数
        var size = new Size(parseInt(div.style.width), parseInt(div.style.height));
        this.size = size;
        this.div = div;
        this.style = null;
        this.graphic = null;
        this.tool = "Line";
        this.scale = new Scale(this);
        this.pan = new Pan(this);
        this.maxBounds = new Bounds(-size.w / 2, -size.h / 2, size.w / 2, size.h / 2);
        this.bounds = new Bounds(-size.w / 2, -size.h / 2, size.w / 2, size.h / 2);
        this.center = this.bounds.getCenter();
        this.zoom = 100;
        this.getRes();
        this.graphicList = [];
        //加入矢量图形的总个数。
        this.graphickListCount = 0;
        this.selectedGraphicList = [];
        this.pointList = [];//交点集合
        this.intersectionPoint = null;
        //创建一个渲染器。
        this._canvas = document.getElementById('canvas2');
        this._context = this._canvas.getContext("2d");
        this.canvas = document.getElementById('canvas1');
        this.context = this.canvas.getContext("2d");
    },
    getRes: function () {
        this.res = 1 / (this.zoom / 100);
        return this.res;
    },
    getResFromZoom: function (zoom) {
        return res = 1 / (zoom / 100);
    },
    addGraphic: function (graphic) {
        this.graphicList.push(graphic);
        this.graphickListCount = 1;
    },
    refresh: function () {
        this.context.clearRect(0, 0, this.size.w, this.size.h);
        if (this.graphicList.length >= 1) {
            for (var i = 0; i < this.graphicList.length; i ) {
                var x = this.graphicList[i];
                x.draw();
            }
        }
    },
    moveTo: function (zoom, center) {
        if (zoom <= 0) {
            return;
        }
        this.zoom = zoom;
        this.center = center;
        var res = this.getRes();
        var width = this.size.w * res;
        var height = this.size.h * res;
        //获取新的视图范围。
        var bounds = new Bounds(center.x - width / 2, center.y - height / 2, center.x width / 2, center.y height / 2);
        this.bounds = bounds;
        //记录已经绘制vector的个数
        this.refresh();
    },
//通过屏幕坐标获取绝对坐标。
    getPositionFromPx: function (px) {
        return new Point((px.x this.bounds.left / this.res) * this.res,
            (this.bounds.top / this.res - px.y) * this.res);
    },
    //获得一个点的屏幕显示位置。与上一个函数功能相反
    getLocalXY: function (point) {
        var resolution = this.getRes();
        var extent = this.bounds;
        var x = (point.x / resolution (-extent.left / resolution));
        var y = ((extent.top / resolution) - point.y / resolution);
        return {x: x, y: y};
    }
});

//Graphic类   图元基类
var Graphic = Class.extend({
    init: function (startPoint, endPoint, drawArea) {
        this.startPoint = startPoint;
        this.endPoint = endPoint;
        this.bounds = null;
        this.selected = false;
        this.hidden = false;
        this.drawArea = drawArea;
        //this.style=this.drawArea.style;
        this.graphicType = null;
    },
    //获取图元边界
    getBounds: function () {
        //
    },
    //为选中的对象绘制控制点
    drawTracker: function () {
        //虚函数，什么也不做，下同
    },
    //碰撞检测
    hitTest: function (pt) {
        return false;
    },
    //根据光标位置获取控制点
    getHandler: function (pt) {

    },
    //鼠标绘图动作，前画布绘制然后更新到后画布
    drawing: function () {

    },
    //根据对象参数直接在后画布绘图
    draw: function () {

    },
    //将对象转化为Jason
    toJSON: function () {
        //do something
    },
    //绘制尺寸
    drawRuler: function () {

    },
    //移动对象
    moveTO: function () {

    },
    //移动控制点
    moveHandler: function () {
    },
    //转变内部点
    switchPoints: function () {

    }
});

//Line类的定义
var Line = Graphic.extend({
    init: function (startPoint, endPoint, drawArea) {
        this._super(startPoint, endPoint, drawArea);//调用父类的构造函数
        this.lineLength = DistanceOfTwoPoint(startPoint, endPoint);
        this.graphicType = "Line"
    },
    //获取图元边界
    getBounds: function () {
        this.bounds = new Bounds(startPoint.x, startPoint.y, startPoint.x, startPoint.y);
        var bounds = new Bounds(endPoint.x, endPoint.y, endPoint.x, endPoint.y);
        this.bounds.extend(bounds);
        return this.bounds;
    },
    drawTracker: function () {
        var context = this.drawArea.context;
        var sp = this.drawArea.getLocalXY(this.startPoint);
        var ep = this.drawArea.getLocalXY(this.endPoint);
        context.fillStyle = 'rgb(0,0,0)';
        context.fillRect(sp.x - 5, sp.y - 5, 10, 10);
        context.fillRect(ep.x - 5, ep.y - 5, 10, 10);
    },
    hitTest: function (pt) {
        var line = new Line(this.startPoint, this.endPoint);
        if (DistanceToLine(pt, line) <= 5) {
            return true;
        }
        return false;
    },
    getHandler: function (pt) {
        if (DistanceOfTwoPoint(pt, this.startPoint) <= 5) {
            return 1
        }
        if (DistanceOfTwoPoint(pt, this.endPoint) <= 5) {
            return 2
        }
        return 0;
    },
    drawing: function () {
        var drawArea = this.drawArea;
        var _context = this.drawArea._context;
        var sp = this.drawArea.getLocalXY(this.startPoint);
        var ep = this.drawArea.getLocalXY(this.endPoint);
        _context.setLineDash([5, 10]);
        _context.lineWidth = 15;
        _context.clearRect(0, 0, 10000, 10000);
        _context.beginPath();
        _context.moveTo(sp.x, sp.y);
        _context.lineTo(ep.x, ep.y);
        _context.stroke();
        _context.closePath();
    },
    draw: function () {
        if (!this.hidden) {
            var context = this.drawArea.context;
            context.setLineDash([5]);
            context.beginPath();
            var sp = this.drawArea.getLocalXY(this.startPoint);
            var ep = this.drawArea.getLocalXY(this.endPoint);
            context.moveTo(sp.x, sp.y);
            context.lineTo(ep.x, ep.y);
            context.stroke();
            context.closePath();
            if (this.selected) {
                this.drawTracker();//如果选中的话 绘制控制点
            }
        }
    },
    //存为JSON对象
    toJSON: function () {
        //do something
    },
    //绘制尺寸
    drawRuler: function () {

    },
    //移动对象
    moveTO: function (pt) {
        this.startPoint.x = this.startPoint.x pt.x;
        this.startPoint.y = this.startPoint.y pt.y;
        this.endPoint.x = this.endPoint.x pt.x;
        this.endPoint.y = this.endPoint.y pt.y;
    },
    moveHandler: function (handlerNumber, pt) {
        if (handlerNumber == 1) {
            this.startPoint.x = this.startPoint.x pt.x;
            this.startPoint.y = this.startPoint.y pt.y;
        }
        if (handlerNumber == 2) {
            this.endPoint.x = this.endPoint.x pt.x;
            this.endPoint.y = this.endPoint.y pt.y;
        }
    },
    switchPoints: function () {
        //虽然直线不需要转换点，但是必须有该函数
    }
});

//Arc类的定义
var Arc = Graphic.extend({
    init: function (origin, startPoint, endPoint, drawArea) {
        this.origin = origin;
        this.startPoint = startPoint;
        this.endPoint = endPoint;
        this.drawArea = drawArea;
        this.bounds = null;
        this.selected = false;
        this.hidden = false;
        this.style = drawArea.style;
        this.r = DistanceOfTwoPoint(origin, startPoint);
        this.startRad = GetRad(origin, startPoint);
        this.endRad = GetRad(origin, endPoint);
        this.relocateEndPoint();
        this.liehu = this.liehu();
        this.graphicType = "Arc";
    },
    //获取图元边界
    getBounds: function () {
        this.bounds = new Bounds(startPoint.x, startPoint.y, startPoint.x, startPoint.y);
        var bounds = new Bounds(endPoint.x, endPoint.y, endPoint.x, endPoint.y);
        this.bounds.extend(bounds);
        return this.bounds;
    },
    drawTracker: function () {
        var context = this.drawArea.context;
        var og = this.drawArea.getLocalXY(this.origin);
        var sp = this.drawArea.getLocalXY(this.startPoint);
        var ep = this.drawArea.getLocalXY(this.endPoint);
        context.fillStyle = 'rgb(0,0,0)';
        context.fillRect(og.x - 5, og.y - 5, 10, 10);
        context.fillRect(sp.x - 5, sp.y - 5, 10, 10);
        context.fillRect(ep.x - 5, ep.y - 5, 10, 10);
    },
    hitTest: function (pt) {
        if (DistanceOfTwoPoint(pt, this.origin) - this.r <= 5 && DistanceOfTwoPoint(pt, this.origin) - this.r >= -5) {
            return true;
        }
        return false;
    },
    getHandler: function (pt) {
        if (DistanceOfTwoPoint(pt, this.origin) <= 5) {
            return 1
        }
        if (DistanceOfTwoPoint(pt, this.startPoint) <= 5) {
            return 2
        }
        if (DistanceOfTwoPoint(pt, this.endPoint) <= 5) {
            return 3
        }
        return 0;
    },
    drawing: function () {
        var drawArea = this.drawArea;
        var _context = this.drawArea._context;
        var pt = this.drawArea.getLocalXY(this.origin);
        _context.setLineDash([5]);
        _context.clearRect(0, 0, 10000, 10000);
        _context.beginPath();
        _context.arc(pt.x, pt.y, this.r / this.drawArea.res, this.startRad, this.endRad, false);
        _context.stroke();
        _context.closePath();
    },
    draw: function () {
        if (!this.hidden) {
            var context = this.drawArea.context;
            context.setLineDash([5]);
            context.beginPath();
            pt = this.drawArea.getLocalXY(this.origin);
            context.arc(pt.x, pt.y, this.r / this.drawArea.res, this.startRad, this.endRad, false);
            context.stroke();
            context.closePath();
            if (this.selected) {
                this.drawTracker();//如果选中的话 绘制控制点
            }
        }
    },
    //存为JSON对象
    toJSON: function () {
        //do something
    },
    //绘制尺寸
    drawRuler: function () {

    },
    //移动对象
    moveTO: function (pt) {
        this.startPoint.x = this.startPoint.x pt.x;
        this.startPoint.y = this.startPoint.y pt.y;
        this.endPoint.x = this.endPoint.x pt.x;
        this.endPoint.y = this.endPoint.y pt.y;
    },
    moveHandler: function (handlerNumber, pt) {
        if (handlerNumber == 1) {
            this.startPoint.x = this.startPoint.x pt.x;
            this.startPoint.y = this.startPoint.y pt.y;
        }
        if (handlerNumber == 2) {
            this.endPoint.x = this.endPoint.x pt.x;
            this.endPoint.y = this.endPoint.y pt.y;
        }
    },
    switchPoints: function () {
        //虽然直线不需要转换点，但是必须有该函数
    },
    relocateEndPoint: function () {
        var k = this.r / DistanceOfTwoPoint(this.endPoint, this.origin);
        this.endPoint.x = k * (this.endPoint.x - this.origin.x) this.origin.x;
        this.endPoint.y = k * (this.endPoint.y - this.origin.y) this.origin.y;
    },
    liehu: function () {
        var v1 = new Vector(this.startPoint.x - this.origin.x, this.startPoint.y - this.origin.y);
        var v2 = new Vector(this.endPoint.x - this.origin.x, this.endPoint.y - this.origin.y);
        if (CrossProduct(v1, v2) > 0) {
            return true;
        }
        return false;
    }
});

//Circle类的定义
var Circle = Graphic.extend({
    init: function (startPoint, endPoint, drawArea) {
        this._super(startPoint, endPoint, drawArea);//调用父类的构造函数
        this.r = DistanceOfTwoPoint(startPoint, endPoint);
        this.origin = this.startPoint;
        this.graphicType = "Circle";
    },
    //获取图元边界
    getBounds: function () {
        this.bounds = new Bounds(startPoint.x, startPoint.y, startPoint.x, startPoint.y);
        var bounds = new Bounds(endPoint.x, endPoint.y, endPoint.x, endPoint.y);
        this.bounds.extend(bounds);
        return this.bounds;
    },
    drawTracker: function () {
        var context = this.drawArea.context;
        var sp = this.drawArea.getLocalXY(this.startPoint);
        var top = new Point(sp.x, sp.y this.r / this.drawArea.res);
        var down = new Point(sp.x, sp.y - this.r / this.drawArea.res);
        var left = new Point(sp.x - this.r / this.drawArea.res, sp.y);
        var right = new Point(sp.x this.r / this.drawArea.res, sp.y);
        context.fillStyle = 'rgb(0,0,0)';
        context.fillRect(sp.x - 5, sp.y - 5, 10, 10);
        context.fillRect(top.x - 5, top.y - 5, 10, 10);
        context.fillRect(down.x - 5, down.y - 5, 10, 10);
        context.fillRect(left.x - 5, left.y - 5, 10, 10);
        context.fillRect(right.x - 5, right.y - 5, 10, 10);
    },
    hitTest: function (pt) {
        if (DistanceOfTwoPoint(pt, this.startPoint) - this.r <= 5 && DistanceOfTwoPoint(pt, this.startPoint) - this.r >= -5) {
            return true;
        }
        return false;
    },
    getHandler: function (pt) {//未完成
        if (DistanceOfTwoPoint(pt, this.startPoint) <= 5) {
            return 1
        }
        if (DistanceOfTwoPoint(pt, this.endPoint) <= 5) {
            return 2
        }
        return 0;
    },
    drawing: function () {
        var drawArea = this.drawArea;
        var _context = this.drawArea._context;
        var pt = this.drawArea.getLocalXY(this.startPoint);
        _context.setLineDash([5]);
        _context.clearRect(0, 0, 10000, 10000);
        _context.beginPath();
        _context.arc(pt.x, pt.y, this.r / this.drawArea.res, 0, 2 * Math.PI, false);
        _context.stroke();
        _context.closePath();
    },
    draw: function () {
        if (!this.hidden) {
            var context = this.drawArea.context;
            context.setLineDash([5]);
            context.beginPath();
            pt = this.drawArea.getLocalXY(this.startPoint);
            context.arc(pt.x, pt.y, this.r / this.drawArea.res, 0, 2 * Math.PI, false);
            context.stroke();
            context.closePath();
            if (this.selected) {
                this.drawTracker();//如果选中的话 绘制控制点
            }
        }
    },
    //存为JSON对象
    toJSON: function () {
        //do something
    },
    //绘制尺寸
    drawRuler: function () {

    },
    //移动对象
    moveTO: function (pt) {
        this.startPoint.x = this.startPoint.x pt.x;
        this.startPoint.y = this.startPoint.y pt.y;
        this.endPoint.x = this.endPoint.x pt.x;
        this.endPoint.y = this.endPoint.y pt.y;
    },
    moveHandler: function (handlerNumber, pt) {
        if (handlerNumber == 1) {
            this.startPoint.x = this.startPoint.x pt.x;
            this.startPoint.y = this.startPoint.y pt.y;
        }
        if (handlerNumber == 2) {
            this.endPoint.x = this.endPoint.x pt.x;
            this.endPoint.y = this.endPoint.y pt.y;
        }
    },
    switchPoints: function () {
        //虽然直线不需要转换点，但是必须有该函数
    }
});

//Rectangle类的定义
var Rectangle = Graphic.extend({
    init: function (startPoint, endPoint, drawArea) {
        this._super(startPoint, endPoint, drawArea);//调用父类的构造函数
        this.widthofRec = this.endPoint.x - this.startPoint.x;
        this.heightofRec = this.endPoint.y - this.startPoint.y;
        this.graphicType = "Rec";
    },
    //获取图元边界
    getBounds: function () {
        this.bounds = new Bounds(startPoint.x, startPoint.y, startPoint.x, startPoint.y);
        var bounds = new Bounds(endPoint.x, endPoint.y, endPoint.x, endPoint.y);
        this.bounds.extend(bounds);
        return this.bounds;
    },
    drawTracker: function () {
        var context = this.drawArea.context;
        var sp = this.drawArea.getLocalXY(this.startPoint);
        var topleft = sp;
        var topright = new Point(topleft.x this.widthofRec / this.drawArea.res, topleft.y);
        var bottomleft = new Point(topleft.x, topleft.y - this.heightofRec / this.drawArea.res);
        var bottomright = new Point(topleft.x this.widthofRec / this.drawArea.res, topleft.y - this.heightofRec / this.drawArea.res);
        context.fillRect(topleft.x - 5, topleft.y - 5, 10, 10);
        context.fillRect(topright.x - 5, topright.y - 5, 10, 10);
        context.fillRect(bottomleft.x - 5, bottomleft.y - 5, 10, 10);
        context.fillRect(bottomright.x - 5, bottomright.y - 5, 10, 10);
    },
    hitTest: function (pt) {
        var topright = new Point(this.startPoint.x this.widthofRec, this.startPoint.y);
        var bottomleft = new Point(this.startPoint.x, this.startPoint.y - this.heightofRec);
        var line1 = new Line(this.startPoint, topright);
        var line2 = new Line(topright, this.endPoint);
        var line3 = new Line(this.endPoint, bottomleft);
        var line4 = new Line(bottomleft, this.startPoint);
        if (DistanceToLine(pt, line1) <= 5 || DistanceToLine(pt, line2) <= 5 || DistanceToLine(pt, line3) <= 5 || DistanceToLine(pt, line4) <= 5) {
            return true;
        }
        else {
            return false;
        }
    },
    //根据光标位置获取控制点
    getHandler: function (pt) {
        var pointSW = new Point(this.startPoint.x, this.endPoint.y);
        var PointNE = new Point(this.endPoint.x, this.startPoint.y);
        var lengthNW = DistanceOfTwoPoint(pt, this.startPoint);
        var lengthSE = DistanceOfTwoPoint(pt, this.endPoint);
        var lengthSW = DistanceOfTwoPoint(pt, pointSW);
        var lengthNE = DistanceOfTwoPoint(pt, PointNE);
        if (lengthNW <= 5) {
            return 1;
        }
        if (lengthNE <= 5) {
            return 2;
        }
        if (lengthSE <= 5) {
            return 3;
        }
        if (lengthSW <= 5) {
            return 4;
        }
        return 0;
    },
    drawing: function () {
        var drawArea = this.drawArea;
        var _context = this.drawArea._context;
        var pt = this.drawArea.getLocalXY(this.startPoint);
        _context.setLineDash([5]);
        _context.clearRect(0, 0, 10000, 10000);
        _context.beginPath();
        _context.rect(pt.x, pt.y, this.widthofRec / this.drawArea.res, -this.heightofRec / this.drawArea.res);
        _context.stroke();
        _context.closePath();
    },
    draw: function () {
        if (!this.hidden) {
            var context = this.drawArea.context;
            context.beginPath();
            pt = this.drawArea.getLocalXY(this.startPoint);
            context.rect(pt.x, pt.y, this.widthofRec / this.drawArea.res, -this.heightofRec / this.drawArea.res);
            context.stroke();
            context.closePath();
            if (this.selected) {
                this.drawTracker();//如果选中的话 绘制控制点
            }
        }
    },
    toJSON: function () {
        //do something
    },
    //绘制尺寸
    drawRuler: function () {

    },
    //移动对象
    moveTO: function (pt) {
        this.startPoint.x = this.startPoint.x pt.x;
        this.startPoint.y = this.startPoint.y pt.y;
        this.endPoint.x = this.endPoint.x pt.x;
        this.endPoint.y = this.endPoint.y pt.y;
    },
    //移动控制点
    moveHandler: function (handlerNumber, pt) {
        if (handlerNumber == 1) {
            this.startPoint.x = this.startPoint.x pt.x;
            this.startPoint.y = this.startPoint.y pt.y;
        }
        if (handlerNumber == 2) {
            this.startPoint.y = this.startPoint.y pt.y;
            this.endPoint.x = this.endPoint.x pt.x;
        }
        if (handlerNumber == 3) {
            this.endPoint.x = this.endPoint.x pt.x;
            this.endPoint.y = this.endPoint.y pt.y;
        }
        if (handlerNumber == 4) {
            this.startPoint.x = this.startPoint.x pt.x;
            this.endPoint.y = this.endPoint.y pt.y;
        }
    },
    //长方形有四种画法，把其他三种画法统一成第一种：向右下角画
    switchPoints: function () {
        /*
         //往右上角画图
         if(this.startPoint.x<this.endPoint.x&&this.startPoint.y>this.endPoint.y)
         {
         var spTemp=this.startPoint;//存放初始开始点
         var epTemp=this.endPoint;//和结束点
         this.startPoint=new Point(spTemp.x,epTemp.y);//初始点重新赋值
         this.endPoint=new Point(epTemp.x,spTemp.y);//结束点重新赋值
         }
         //往左上角画图
         if(this.startPoint.x>this.endPoint.x&&this.startPoint.y<this.endPoint.y)
         {
         var spTemp=this.startPoint;//存放初始开始点
         var epTemp=this.endPoint;//和结束点
         this.startPoint=new Point(epTemp.x,epTemp.y);//初始点重新赋值
         this.endPoint=new Point(spTemp.x,spTemp.y);//结束点重新赋值
         }
         //往左下角画图
         if(this.startPoint.x>this.endPoint.x&&this.startPoint.y>this.endPoint.y)
         {
         var spTemp=this.startPoint;//存放初始开始点
         var epTemp=this.endPoint;//和结束点
         this.startPoint=new Point(epTemp.x,spTemp.y);//初始点重新赋值
         this.endPoint=new Point(spTemp.x,epTemp.y);//结束点重新赋值
         }
         */
    }
});

//缩放控制类
var Scale = Class.extend({
    init: function (drawArea) {//构造函数
        this.drawArea = drawArea;
        this.div = drawArea.div;
        this.Events = [["mousewheel", Scale.prototype.wheelChange], ["DOMMouseScroll", Scale.prototype.wheelChange]];
        this.bind();

    },
    wheelChange: function (e) {
        var drawArea = this.drawArea;
        var delta = e.wheelDelta ? (e.wheelDelta / 120) * 20 : -e.detail / 3 * 20;
        var deltalX = drawArea.size.w / 2 - (e.offsetX || e.layerX);
        var deltalY = (e.offsetY || e.layerY) - drawArea.size.h / 2;
        var px = {x: (e.offsetX || e.layerX), y: (e.offsetY || e.layerY)};
        var zoomPoint = this.drawArea.getPositionFromPx(px);
        var zoom = this.drawArea.zoom delta;
        var newRes = this.drawArea.getResFromZoom(zoom);
        var center = new Point(zoomPoint.x deltalX * newRes, zoomPoint.y deltalY * newRes);
        this.drawArea.moveTo(zoom, center);
        stopEventBubble(e);
        /*    var point1=new Point(0,0);
         var point2=new Point(100,100);
         var point3=new Point(0,100);
         var point4=new Point(100,0);
         var line1=new Line(point1,point2,drawArea);
         var line2=new Line(point3,point4,drawArea);
         var point5=LinesIntresectPoint(line1,line2);*/
    },
    bind: function () {
        for (var i = 0, len = this.Events.length; i < len; i ) {
            var type = this.Events[i][0];
            var listener = this.Events[i][1];
            listener = bindAsEventListener(listener, this);
            this.div.addEventListener(type, listener, true);
        }
    }
});

//画布平移控制类
var Pan = Class.extend({
    init: function (drawArea) {//构造函数
        this.drawArea = drawArea;
        this.div = drawArea.div;
        this.Events = [["mousedown", Pan.prototype.startPan],
            ["mousemove", Pan.prototype.pan],
            ["mouseup", Pan.prototype.endPan]];
        this.dragging = false;
        this.bind();
        this.drawing = false;
        this.drawingArc = false;
        this.startArc = 0;
        //用于区别鼠标第几次按下
        this.mat = 1;
        this.startPoint = null;
        this.endPoint = null;
        this.endPoint1 = null;//画圆弧需要采集3个点
        this.selecting = false;
        this.jiaodian = false;

    },
    startPan: function (e) {
        //第一次按下鼠标
        if (e.button == 1) {
            //按下鼠标中键时设置拖动开关
            this.dragging = true;
            //设置鼠标样式。
            this.drawArea.div.style.cursor = "move";
        }
        if (e.button == 0 && this.mat == 1) {
            if (!this.selecting)
                this.drawing = true;
            if (this.drawArea.tool == "Arc") {
                this.drawingArc = true;
                this.startArc = 1;
                //alert("1");
            }
            //在一开始保存点击的位置,不变。
            this.startX = (e.offsetX || e.layerX);
            this.startY = (e.offsetY || e.layerY);

            if (!this.jiaodian) {
                this.startPoint = this.drawArea.getPositionFromPx(new Point(this.startX, this.startY));
            }
            else {
                this.startPoint = this.drawArea.intersectionPoint;
            }

            if (this.selecting) {
                for (var i = 0; i < this.drawArea.graphicList.length; i )//判断哪个图元被选中
                {
                    var selectedGraphic = this.drawArea.graphicList[i];
                    if (selectedGraphic.hitTest(this.startPoint)) {
                        selectedGraphic.selected = true;
                        this.drawArea.selectedGraphicList.push(selectedGraphic);
                    }
                }
                this.drawArea.refresh();
            }
        }

        //在一开始保存点击的位置，改变。
        this.lastX = (e.offsetX || e.layerX);
        this.lastY = (e.offsetY || e.layerY);
        //第二次按下鼠标  非绘制圆弧时
        if (this.mat == 2) {
            if (!this.drawingArc) {
                this.drawing = false;
                var graphic = this.drawArea.graphic;
                if (graphic.graphicType != "Rec") {
                    this.drawArea.addGraphic(graphic);
                }
                else {
                    var lt = new Point(graphic.startPoint.x, graphic.startPoint.y);
                    var rt = new Point(graphic.endPoint.x, graphic.startPoint.y);
                    var lb = new Point(graphic.startPoint.x, graphic.endPoint.y);
                    var rb = new Point(graphic.endPoint.x, graphic.endPoint.y);
                    var line1 = new Line(lt, rt, graphic.drawArea);
                    var line2 = new Line(rt, rb, graphic.drawArea);
                    var line3 = new Line(rb, lb, graphic.drawArea);
                    var line4 = new Line(lb, lt, graphic.drawArea);
                    this.drawArea.addGraphic(line1);
                    this.drawArea.addGraphic(line2);
                    this.drawArea.addGraphic(line3);
                    this.drawArea.addGraphic(line4);
                }
                this.mat = 1;//将鼠标控制交还给第一次按鼠标动作

                if (graphic.graphicType == "Line") {
                    this.drawArea.pointList.push(graphic.startPoint);
                    this.drawArea.pointList.push(graphic.endPoint);
                }
                if (graphic.graphicType == "Circle") {
                    this.drawArea.pointList.push(graphic.startPoint);
                }
                if (graphic.graphicType == "Rec") {
                    this.drawArea.pointList.push(graphic.startPoint);
                    this.drawArea.pointList.push(graphic.endPoint);
                    var point1 = new Point(graphic.startPoint.x, graphic.endPoint.y);
                    var point2 = new Point(graphic.endPoint.x, graphic.startPoint.y);
                    this.drawArea.pointList.push(point1);
                    this.drawArea.pointList.push(point2);
                }


                if (this.drawArea.graphicList.length >= 1) {
                    for (var i = 0; i < this.drawArea.graphicList.length - 1; i ) {
                        var g = this.drawArea.graphicList[i];
                        if (graphic.graphicType == "Line" && g.graphicType == "Line") {
                            var point = LinesIntresectPoint(graphic, g);
                            if (point != null)
                                this.drawArea.pointList.push(point);
                        }
                        if (graphic.graphicType == "Line" && g.graphicType != "Line") {
                            //debugger;
                            var pointList1 = LineArcIntresectPoint(graphic, g);
                            if (pointList1 != null) {
                                for (var j = 0; j < pointList1.length; j ) {
                                    this.drawArea.pointList.push(pointList1[j]);
                                }
                            }
                        }
                        if (graphic.graphicType == "Circle" && g.graphicType == "Line") {
                            var pointList1 = LineArcIntresectPoint(g, graphic);
                            if (pointList1 != null) {
                                for (var j = 0; j < pointList1.length; j ) {
                                    this.drawArea.pointList.push(pointList1[j]);
                                }
                            }
                        }
                        if (graphic.graphicType == "Circle" && g.graphicType != "Line") {
                            var pointList1 = arcAndArcIntersection(g, graphic);
                            if (pointList1 != null) {
                                for (var j = 0; j < pointList1.length; j ) {
                                    this.drawArea.pointList.push(pointList1[j]);
                                }
                            }
                        }
                        if (graphic.graphicType == "Rec" && g.graphicType == "Line") {
                            var lt = new Point(graphic.startPoint.x, graphic.startPoint.y);
                            var rt = new Point(graphic.endPoint.x, graphic.startPoint.y);
                            var lb = new Point(graphic.startPoint.x, graphic.endPoint.y);
                            var rb = new Point(graphic.endPoint.x, graphic.endPoint.y);
                            var line1 = new Line(lt, rt, graphic.drawArea);
                            var line2 = new Line(rt, rb, graphic.drawArea);
                            var line3 = new Line(rb, lb, graphic.drawArea);
                            var line4 = new Line(lb, lt, graphic.drawArea);
                            var lineList = [line1, line2, line3, line4];
                            for (var m = 0; m < lineList.length; m ) {
                                var line = lineList[m];
                                var point = LinesIntresectPoint(line, g);
                                if (point != null)
                                    this.drawArea.pointList.push(point);
                            }
                        }
                        if (graphic.graphicType == "Rec" && g.graphicType != "Line") {
                            var lt = new Point(graphic.startPoint.x, graphic.startPoint.y);
                            var rt = new Point(graphic.endPoint.x, graphic.startPoint.y);
                            var lb = new Point(graphic.startPoint.x, graphic.endPoint.y);
                            var rb = new Point(graphic.endPoint.x, graphic.endPoint.y);
                            var line1 = new Line(lt, rt, graphic.drawArea);
                            var line2 = new Line(rt, rb, graphic.drawArea);
                            var line3 = new Line(rb, lb, graphic.drawArea);
                            var line4 = new Line(lb, lt, graphic.drawArea);
                            var lineList = [line1, line2, line3, line4];
                            for (var m = 0; m < lineList.length; m ) {
                                var line = lineList[m];
                                var pointList1 = LineArcIntresectPoint(line, g);
                                if (pointList1 != null) {
                                    for (var j = 0; j < pointList1.length; j ) {
                                        this.drawArea.pointList.push(pointList1[j]);
                                    }
                                }
                            }
                        }
                    }
                }
            }
            else {
                if (!this.jiaodian) {
                    this.endPoint = this.drawArea.getPositionFromPx(new Point(this.lastX, this.lastY));
                }
                else {
                    this.endPoint = this.drawArea.intersectionPoint;
                }
                this.startArc = 2;
                //alert("2");
            }
        }
        //第三次按下鼠标 绘制圆弧时
        if (this.mat == 3) {
            this.drawing = false;
            this.drawingArc = false;
            var graphic = this.drawArea.graphic;
            this.drawArea.addGraphic(graphic);
            if (graphic.graphicType == "Arc") {
                this.drawArea.pointList.push(graphic.origin);
                this.drawArea.pointList.push(graphic.startPoint);
                this.drawArea.pointList.push(graphic.endPoint);

                for (var i = 0; i < this.drawArea.graphicList.length - 1; i ) {
                    var g = this.drawArea.graphicList[i];
                    if (g.graphicType == "Line") {
                        var pointList1 = LineArcIntresectPoint(g, graphic);
                        if (pointList1 != null) {
                            for (var j = 0; j < pointList1.length; j ) {
                                this.drawArea.pointList.push(pointList1[j]);
                            }
                        }
                    }
                    else {
                        var pointList1 = arcAndArcIntersection(g, graphic);
                        if (pointList1 != null) {
                            for (var j = 0; j < pointList1.length; j ) {
                                this.drawArea.pointList.push(pointList1[j]);
                            }
                        }
                    }
                }
            }
            this.mat = 1;//将鼠标控制交还给第一次按鼠标动作
            this.startArc = 0;
            // alert("3");
            //debugger;
        }
        stopEventBubble(e);
    },
    pan: function (e) {
        var drawArea = this.drawArea;
        //计算改变的像素值
        var dx = (e.offsetX || e.layerX) - this.lastX;
        var dy = (e.offsetY || e.layerY) - this.lastY;
        this.lastX = (e.offsetX || e.layerX);
        this.lastY = (e.offsetY || e.layerY);

        this.jiaodian = false;

        var cursorPositon = this.drawArea.getPositionFromPx(new Point(this.lastX, this.lastY));

        for (var i = 0; i < drawArea.pointList.length; i ) {
            if (DistanceOfTwoPoint(cursorPositon, drawArea.pointList[i]) <= 5) {
                drawArea.div.style.cursor = "crosshair";
                this.jiaodian = true;
                drawArea.intersectionPoint = drawArea.pointList[i];
                break;
            }
        }
        if (!this.jiaodian) {
            drawArea.div.style.cursor = "default";
        }


        if (this.dragging) {
            drawArea.center.x -= dx * drawArea.res;
            drawArea.center.y = dy * drawArea.res;
            drawArea.moveTo(drawArea.zoom, drawArea.center);
        }
        //选择动作
        if (drawArea.tool == "Pointer") {
            this.selecting = true;

        }
        if (drawArea.tool != "Pointer") {
            this.selecting = false;
        }
        //前画布绘制非圆弧的动作
        if (this.drawing) {
            if (!this.drawingArc) {
                if (!this.jiaodian) {
                    this.endPoint = drawArea.getPositionFromPx(new Point(this.lastX, this.lastY));
                }
                else {
                    this.endPoint = drawArea.intersectionPoint;
                }
                if (drawArea.tool == "Line") {
                    drawArea.graphic = new Line(this.startPoint, this.endPoint, this.drawArea);
                }
                if (drawArea.tool == "Circle") {
                    drawArea.graphic = new Circle(this.startPoint, this.endPoint, this.drawArea);
                }
                if (drawArea.tool == "Rectangle") {
                    drawArea.graphic = new Rectangle(this.startPoint, this.endPoint, this.drawArea);
                }
                this.mat = 2;//将鼠标控制转移至第二次按鼠标动作
                drawArea.graphic.drawing();
            }
            else {
                if (mat = 1 && this.startArc == 1)
                    this.mat = 2;
                if (this.startArc == 2) {
                    this.endPoint1 = this.drawArea.getPositionFromPx(new Point(this.lastX, this.lastY));
                    drawArea.graphic = new Arc(this.startPoint, this.endPoint, this.endPoint1, drawArea);
                    this.mat = 3;
                    drawArea.graphic.drawing();
                }
            }
        }
        stopEventBubble(e);
    },
    endPan: function (e) {
        this.drawArea.div.style.cursor = "default";
        this.dragging = false;
        this.drawArea._context.clearRect(0, 0, 10000, 10000);
        this.drawArea.refresh();
        stopEventBubble(e);
        this.mat = 1;
    },
    bind: function () {
        for (var i = 0, len = this.Events.length; i < len; i ) {
            var type = this.Events[i][0];
            var listener = this.Events[i][1];
            listener = bindAsEventListener(listener, this);
            this.div.addEventListener(type, listener, true);
        }
    }
});

//下面是一些公用的方法

function bindAsEventListener(func, object) {
    return function (event) {
        return func.call(object, event || window.event);
    };
}

function stopEventBubble(e) {
    if (e.preventDefault) {
        e.preventDefault();
    } else {
        e.returnValue = false;
    }

    if (e && e.stopPropagation)
        e.stopPropagation();
    else
        window.event.cancelBubble = true;
}

//复制对象
function cloneObj(obj) {
    var reObj = {};
    for (var id in obj) {
        reObj[id] = obj[id];
    }
    return reObj;
}

//两点之间的距离
function DistanceOfTwoPoint(pt1, pt2) {
    var difY = pt2.y - pt1.y;
    var difX = pt2.x - pt1.x;
    return Math.pow((difX * difX difY * difY), 0.5);
}

//点到直线的距离
function DistanceToLine(pt, line) {
    var point1 = line.startPoint;
    var point2 = line.endPoint;
    var A = point2.y - point1.y;
    var B = point1.x - point2.x;
    var C = point1.y * (-B) - point1.x * A;
    var upElement = A * pt.x B * pt.y C;
    if (upElement < 0) {
        upElement = -upElement;
    }
    var downElement = Math.pow((A * A B * B), 0.5);
    return upElement / downElement;
}

//点到圆弧的距离
function DistanceToArc(pt, arc) {
    if (DistanceOfTwoPoint(pt, arc.origin) >= r - 5 && DistanceOfTwoPoint(pt, arc.origin) <= r 5) {
        return true;
    }
    return false;
}

//求point与origin所在x轴坐标的弧度大小
function GetRad(origin, point) {
    if (origin.x == point.x) {
        if (point.y < origin.y)
            return Math.PI / 2;
        else
            return Math.PI * 3 / 2;
    }
    var x = point.x - origin.x;
    var y = point.y - origin.y;
    if (x > 0) {
        if (y < 0)
            return Math.atan(-y / x);
        else
            return 2 * Math.PI - Math.atan(y / x);
    }
    else {
        if (y < 0)
            return Math.PI - Math.atan(y / x);
        else
            return Math.PI Math.atan(-y / x);
    }
}

//线段是否相交不求交点
function LinesIntresect(line1, line2) {
    var p1 = new Point(line1.startPoint);
    var p2 = new Point(line1.endPoint);
    var p3 = new Point(line2.startPoint);
    var p4 = new Point(line2.endPoint);
    var d1 = Direction(p3, p4, p1);
    var d2 = Direction(p3, p4, p2);
    var d3 = Direction(p1, p2, p3);
    var d4 = Direction(p1, p2, p4);
    if (d1 * d2 < 0 && d3 * d4 < 0) {
        return true;
    }
    else if (d1 == 0 && OnSegment(p3, p4, p1)) {
        return true;
    }
    else if (d2 == 0 && OnSegment(p3, p4, p2)) {
        return true;
    }
    else if (d3 == 0 && OnSegment(p1, p2, p3)) {
        return true;
    }
    else if (d4 == 0 && OnSegment(p1, p2, p4)) {
        return true;
    }
    else {
        return false;
    }
}

//线段是否相交并求交点
function LinesIntresectPoint(line1, line2) {
    var p1 = new Point(line1.startPoint.x, line1.startPoint.y);
    var p2 = new Point(line1.endPoint.x, line1.endPoint.y);
    var p3 = new Point(line2.startPoint.x, line2.startPoint.y);
    var p4 = new Point(line2.endPoint.x, line2.endPoint.y);
    var d1 = Direction(p3, p4, p1);
    var d2 = Direction(p3, p4, p2);
    var d3 = Direction(p1, p2, p3);
    var d4 = Direction(p1, p2, p4);
    if (d1 * d2 < 0 && d3 * d4 < 0) {
        var x = (d1 * p2.x - d2 * p1.x) / (d1 - d2);
        var y = (d1 * p2.y - d2 * p1.y) / (d1 - d2);
        return new Point(x, y);
    }
    else if (d1 == 0 && OnSegment(p3, p4, p1)) {
        return new Point(p1.x, p1.y);
    }
    else if (d2 == 0 && OnSegment(p3, p4, p2)) {
        return new Point(p2.x, p2.y);
    }
    else if (d3 == 0 && OnSegment(p1, p2, p3)) {
        return new Point(p3.x, p3.y);
    }
    else if (d4 == 0 && OnSegment(p1, p2, p4)) {
        return new Point(p4.x, p4.y);
    }
    else {
        return null;
    }
}

//向量的叉积
function CrossProduct(vector1, vector2) {
    return (vector1.x * vector2.y - vector2.x * vector1.y);
}

//三点构成的三角形的有效面积
function Direction(p1, p2, p3) {
    var v1 = new Vector((p3.x - p1.x), (p3.y - p1.y));
    var v2 = new Vector((p2.x - p1.x), (p2.y - p1.y));
    return CrossProduct(v1, v2);
}

//p3是否在p1p2这条线段内
function OnSegment(p1, p2, p3) {
    if (p3.x >= Math.min(p1.x, p2.x) && p3.x <= Math.max(p1.x, p2.x) && p3.y >= Math.min(p1.y, p2.y) && p3.y <= Math.max(p1.y, p2.y)) {
        return true;
    }
    else {
        return false;
    }
}

//线段是否穿过矩形边界
function SegmentCrossBound(line, bound) {
    var p3 = new Point(bound.x1, bound.y1);
    var p4 = new Point(bound.x2.bound.y2);
    var p5 = new Point(bound.x1.bound.y2);
    var p6 = new Point(bound.x2.bound.y1);
    var line1 = new Line(p3, p4, line.drawArea);
    var line2 = new Line(p5, p6, line.drawArea);
    if (LinesIntresect(line, line1) || LinesIntresect(line, line2)) {
        return true;
    }
    return false;
}


//点到线段的投影
function pointProjectionToLine(pt, line) {
    var p1 = new Point(line.startPoint.x, line.startPoint.y);
    var p2 = new Point(line.endPoint.x, line.endPoint.y);
    var p3 = new Point(pt.x, pt.y);
    var v1 = new Vector(p3.x - p1.x, p3.y - p1.y);
    var v2 = new Vector(p2.x - p1.x, p2.y - p1.y);
    var m = v1.x * v2.x v1.y * v2.y;

    var k = m / line.lineLength / line.lineLength;

    var p0 = new Point(0, 0);
    p0.x = k * (p2.x - p1.x) p1.x;
    p0.y = k * (p2.y - p1.y) p1.y;
    return p0;
}

//点到线段的投影在线段内部
function pointProjectionInSegment(pt, line) {
    var p1 = new Point(line.startPoint.x, line.startPoint.y);
    var p2 = new Point(line.endPoint.x, line.endPoint.y);
    var p3 = new Point(pt.x, pt.y);
    var v1 = new Vector(p3.x - p1.x, p3.y - p1.y);
    var v2 = new Vector(p2.x - p1.x, p2.y - p1.y);
    var m = v1.x * v2.x v1.y * v2.y;

    var k = m / line.lineLength / line.lineLength;

    if (k < 0) {
        k = -k;
    }
    if (k <= 1) {
        return true;
    }
    return false;
}


function LineArcIntresectPoint(line, arc)//求直线与圆弧的交点
{
    var lineStartP = new Point(line.startPoint.x, line.startPoint.y);
    var lineEndP = new Point(line.endPoint.x, line.endPoint.y);
    var origin = new Point(arc.origin.x, arc.origin.y);
    var r = arc.r;
    //var startAngel=arc.startAngel;
    // var endAngel=arc.endAngel;

    var d0 = DistanceToLine(origin, line);
    var d1 = DistanceOfTwoPoint(origin, lineStartP);
    var d2 = DistanceOfTwoPoint(origin, lineEndP);

    var flag = pointProjectionInSegment(origin, line);//圆点的投影是否在直线上
    var pointList = [];

    if (d0 > r)//圆心到线段的距离大于半径，肯定无交点
    {
        return null;
    }
    if (d0 == r)//等于半径，可能有一个切点
    {
        if (!flag) {
            return false;
        }
        else {
            var p0 = pointProjectionToLine(origin, line);
            pointList.push(p0);
        }
    }
    if (d0 < r)//下于半径，可能无交点，一个交点，或者两个交点
    {
        if (d1 < r && d2 < r)//线段在圆内部，无交点
        {
            return null;
        }
        if (d1 > r && d2 > r && !flag)//线段在圆外部且无交点
        {
            return null;
        }
        else {
            var intersectionPoints = [];
            var p0 = pointProjectionToLine(origin, line);
            var p0ToArc = Math.sqrt(r * r - d0 * d0);
            if (d1 >= r) {
                var k = (DistanceOfTwoPoint(p0, lineStartP) - p0ToArc) / DistanceOfTwoPoint(p0, lineStartP);
                var point1 = new Point(0, 0);
                point1.x = k * (p0.x - lineStartP.x) lineStartP.x;
                point1.y = k * (p0.y - lineStartP.y) lineStartP.y;
                pointList.push(point1);
            }
            if (d2 >= r) {
                var k = p0ToArc / DistanceOfTwoPoint(p0, lineEndP);
                var point2 = new Point(0, 0);
                point2.x = k * (lineEndP.x - p0.x) p0.x;
                point2.y = k * (lineEndP.y - p0.y) p0.y;
                var d1 = Direction(arc.startPoint, arc.endPoint, point2);
                var d2 = Direction(arc.startPoint, arc.endPoint, origin);
                pointList.push(point2);
            }
        }
    }

    return pointList;
}


function arcAndArcIntersection(arc1, arc2) {
    var o1 = arc1.origin;
    var o2 = arc2.origin;
    var r1 = arc1.r;
    var r2 = arc2.r;
    var d = DistanceOfTwoPoint(o1, o2);
    var pointList = [];
    var rdifference = r1 - r2;
    if (rdifference < 0)
        rdifference = -rdifference;
    if (d == (r1 r2)) {
        var x = r1 / d * (o2.x - o1.x) o1.x;
        var y = r1 / d * (o2.x - o1.x) o1.x;
        var point = new Point(x, y);
        pointList.push(point);
    }
    if (d < (r1 r2) && d > rdifference) {
        var a = (r1 * r1 d * d - r2 * r2) / (2 * d);
        var h = Math.sqrt(r1 * r1 - a * a);
        var x = a / d * (o2.x - o1.x) o1.x;
        var y = a / d * (o2.y - o1.y) o1.y;

        var x1 = x h * (o2.y - o1.y) / d;
        var y1 = y - h * (o2.x - o1.x) / d;
        var x2 = x - h * (o2.y - o1.y) / d;
        var y2 = y h * (o2.x - o1.x) / d;

        var point1 = new Point(x1, y1);
        var point2 = new Point(x2, y2);
        pointList.push(point1);
        pointList.push(point2);
    }
    // debugger;

    return pointList;
}