画布二次曲线改变中点

Question

我想在拖动中间点的同时改变画布二次曲线的中点，它远离线条。在拖动时我想坚持使用链接，因为它现在增加了中间点的距离。http://jsfiddle.net/ashishbhatt/yqgak7eq/1/

http://s25.postimg.org/hegxhlgrj/123123.jpg

请查看上面的参考图片。

Code :

(function() {

    var canvas, ctx, code, point, style, drag = null, dPoint;

    // define initial points
    function Init(quadratic) {

        point = {
            p1: { x:0, y:100 },
            p2: { x:200, y:100 }
        };

        if (quadratic) {
            point.cp1 = { x: 100, y: 50 };
        }
        else {
            point.cp1 = { x: 100, y: 100 };
            point.cp2 = { x: 100, y: 100 };
        }

        // default styles
        style = {
            curve:  { width: 2, color: "#333" },
            cpline: { width: 1, color: "#C00" },
            point: { radius: 6, width: 1, color: "#900", fill: "rgba(200,200,200,0.5)", arc1: 0, arc2: 2 * Math.PI }
        }

        // line style defaults
        ctx.lineCap = "round";
        ctx.lineJoin = "round";

        // event handlers
        canvas.onmousedown = DragStart;
        canvas.onmousemove = Dragging;
        canvas.onmouseup = canvas.onmouseout = DragEnd;

        DrawCanvas();
    }


    // draw canvas
    function DrawCanvas() {
        ctx.clearRect(0, 0, canvas.width, canvas.height);

        // control lines
        ctx.lineWidth = style.cpline.width;
        ctx.strokeStyle = style.cpline.color;
        ctx.beginPath();
        //ctx.moveTo(point.p1.x, point.p1.y);
        //ctx.lineTo(point.cp1.x, point.cp1.y);
        if (point.cp2) {
            //ctx.moveTo(point.p2.x, point.p2.y);
            //ctx.lineTo(point.cp2.x, point.cp2.y);
        }
        else {
            //ctx.lineTo(point.p2.x, point.p2.y);
        }
        ctx.stroke();

        // curve
        ctx.lineWidth = style.curve.width;
        ctx.strokeStyle = style.curve.color;
        ctx.beginPath();
        ctx.moveTo(point.p1.x, point.p1.y);
        if (point.cp2) {
            //ctx.bezierCurveTo(point.cp1.x, point.cp1.y, point.cp2.x, point.cp2.y, point.p2.x, point.p2.y);
        }
        else {
            ctx.quadraticCurveTo(point.cp1.x, point.cp1.y, point.p2.x, point.p2.y);
        }
        ctx.stroke();

        // control points
        for (var p in point) {
            ctx.lineWidth = style.point.width;
            ctx.strokeStyle = style.point.color;
            ctx.fillStyle = style.point.fill;
            ctx.beginPath();
            ctx.arc(point[p].x, point[p].y, style.point.radius, style.point.arc1, style.point.arc2, true);
            ctx.fill();
            ctx.stroke();
        }

        ShowCode();
    }


    // show canvas code
    function ShowCode() {
        var myCounter = 0;
        if(point.cp1.y < 100){
            myCounter =  point.cp1.y-100;
        }else if(point.cp1.y > 100){
            myCounter = point.cp1.y-100;
        }

        if (code) {
            code.firstChild.nodeValue = myCounter

        }
    }


    // start dragging
    function DragStart(e) {

        e = MousePos(e);
        var dx, dy;
        for (var p in point) {
            //console.log(p)
            //dx = point[p].x - e.x;

            if(p == 'cp1'){
                dy = point[p].y - e.y;
                if ((dy * dy) < style.point.radius * style.point.radius) {
                    drag = p;
                    dPoint = e;
                    canvas.style.cursor = "move";
                    return;
                }
            }
        }
    }


    // dragging
    function Dragging(e) {
        if (drag) {
            e = MousePos(e);
            //point[drag].x += e.x - dPoint.x;
            point[drag].y += e.y - dPoint.y;
            dPoint = e;
            DrawCanvas();
        }
    }


    // end dragging
    function DragEnd(e) {
        drag = null;
        canvas.style.cursor = "default";
        DrawCanvas();
    }


    // event parser
    function MousePos(event) {
        event = (event ? event : window.event);
        return {
            //x: event.pageX - canvas.offsetLeft,
            y: event.pageY - canvas.offsetTop
        }
    }


    // start
    canvas = document.getElementById("canvasSettings");
    code = document.getElementById("code");
    if (canvas.getContext) {
        ctx = canvas.getContext("2d");
        Init(canvas.className == "quadratic");
    }

})();