Construtor de curvas Raphael

Construtor de curvas.

by Klawztro

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/base/jquery-ui.css">
<div id='container' ></div>
<div id='controles' >
    <div id='horizontal' class='control_bar' ></div>
    <div id='vertical' class='control_bar' ></div>
    
    <div id='inicio_curva_x' class='control_bar' ></div>
    <div id='inicio_curva_y' class='control_bar' ></div>
    
    <div id='fim_curva_x' class='control_bar' ></div>
    <div id='fim_curva_y' class='control_bar' ></div>
    
    <div id='final_x' class='control_bar' ></div>
    <div id='final_y' class='control_bar' ></div>
</div>
<div id='coordenada'></div>

CSS

#container {
    border:1px solid #ccc;
    position:relative;
    clear:both;
    width:630px;
    height:300px;
}
#controles {
    position:relative;
    margin:auto;
    width:300px;
    border:1px solid #ccc;
    height:130px;
    padding:5px;
    top:10px;
        
}
.control_bar {
    position:relative;
    float:left;
    margin:10px 20px 0px 0px;
}

#coordenada{
    position:relative;
    clear:both;
    width:300px;
    height:30px;
    border:1px solid #ccc;
    top:20px;
    margin:0px auto 0px auto;
}

JavaScript

$(function() {
    
    var MYAPP = {};
    MYAPP.raphael_canvas = Raphael("container",630,300);    
    
    MYAPP.raphael_canvas.path("M120,200c-40,90,-3,40,0,120").attr({fill: "none", "stroke-width": 2});

    function replace_values(canvas) {
        var string_coord;
        var coords = {};
        coords.h =       $("#horizontal").slider( "option", "value");
        coords.v =       $("#vertical").slider( "option", "value");
        
        coords.ini_c_x = $("#inicio_curva_x").slider("option", "value");
        coords.ini_c_y = $("#inicio_curva_y").slider("option", "value");
        
        coords.fim_c_x = $("#fim_curva_x").slider("option", "value");
        coords.fim_c_y = $("#fim_curva_y").slider("option", "value");
        
        coords.fim_h   = $("#final_x").slider("option", "value");
        coords.fim_v   = $("#final_y").slider("option", "value");
        console.log(coords);
        string_coord  = "M " + coords.h + "," + coords.v + "c-";
        string_coord += coords.ini_c_x + "," + coords.ini_c_y + ",";
        string_coord += coords.fim_c_x + "," + coords.fim_c_y + ",";
        string_coord += coords.fim_h   + "," + coords.fim_v;
        canvas.clear();
        console.log(string_coord);
        canvas.path(string_coord ).attr({fill: "none", "stroke-width": 2}); 
    
        $("#coordenada").text(string_coord);    
    }
    
    var config_obj = {
        orientation: "vertical",
        range: "min",
        min: 0,
        max: 1000,
        value: 60,
        slide: function( event, ui ) {
        var canvas = MYAPP.raphael_canvas;
        replace_values(canvas);
        } 
    };
        
    $("#horizontal").slider(config_obj);
    $( "#vertical").slider(config_obj);
    $("#inicio_curva_x").slider(config_obj);
    $("#inicio_curva_y").slider(config_obj);
    $("#fim_curva_x").slider(config_obj);
    $("#fim_curva_y").slider(config_obj);
    $("#final_x").slider(config_obj); 
    $("#final_y").slider(config_obj);   
    
   ...