Curvinator

Simple tool for manipulating arcs in SVG.

by djwelsh

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-mousewheel/3.0.6/jquery.mousewheel.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/sylvester/0.1.3/sylvester.js"></script>
    <div id="cont">
        <div id="nums">
    		<table>
    			<tbody>
    				<tr>
    					<td data-title="Move the brush to these absolute coordinates (denoted by gridlines)" data-glow="graphpoint_xy0"><span class="td-header"> </span><span>M</span></td>
    					<td data-title="Move the brush to these absolute coordinates (denoted by gridlines)" data-glow="graphpoint_xy0">
    						<span class="td-header">x<sub>0</sub></span>
    						<input name="x0" type="text" class="coord graphpoint_xy0" data-rangemin="0" data-rangemax="500" value="290">
    					</td>
    					<td data-title="Move the brush to these absolute coordinates (denoted by gridlines)" data-glow="graphpoint_xy0">
    						<span class="td-header">y<sub>0</sub></span>
    						<input name="y0" type="text" class="coord graphpoint_xy0" data-rangemin="0" data-rangemax="500" value="290">
    					</td>
    					
    					<td data-title="Draw a straight line to these absolute coordinates (denoted by gridlines)" data-glow="graphpoint_xy1"><span class="td-header"> </span><span>L</span></td>
    					<td data-title="Draw a straight line to these absolute coordinates (denoted by gridlines)" data-glow="graphpoint_xy1">
    						<span class="td-header">x<sub>1</sub></span>
    						<input name="x1" type="text" class="coord graphpoint_xy1" data-rangemin="0" data-rangemax="500" value="290">
    					</td>
    					<td data-title="Draw a straight line to these absolute coordinates (denoted by gridlines)" data-glow="graphpoint_xy1">
    						<span class="td-header">y<sub>1</sub></span>
    						<input name="y1" type="text" class="coord graphpoint_xy1" data-rangemin="0" data-rangemax="500" value="90">
    					</td>
    					
   ...

CSS

#cont {
  position: relative;
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  border-radius: 20px;
  width: 582px;
  margin: 0px;
  font-family: arial, sans-serif;
  border: none;
}
#raphaelbox {
  position: relative;
  margin: 4px;
  padding: 6px;
  width: 560px;
  height: 560px;
  background-color: white;
  border-radius: 10px;
}
#nums, #angles {
  position: relative;
  margin: 4px 4px 0px 4px;
  width: 580px;
  text-align: center;
  background-color: #555;
  color: white;
  padding: 5px 0px;
  -webkit-border-top-left-radius: 20px;
	-webkit-border-top-right-radius: 20px;
	-moz-border-radius-topleft: 20px;
	-moz-border-radius-topright: 20px;
	border-top-left-radius: 20px;
	border-top-right-radius: 20px;
}
#nums table, #angles table {
	width: 560px;
	border-collapse: collapse;
	margin: 4px 4px 0px 4px;
}
#nums table .td-header, #angles table .td-header {
	display: block;
	font-size: 12px;
	height: 16px;
	text-align: center;
	vertical-align: top;
	font-style: italic;
}
.smalltext {
	font-size: 10px !important;
}
input {
	border: 1px solid black;
	text-align: center;
	padding: 2px 4px;
}
input.coord {
	width: 32px;
}
input.arc {
	width: 16px;
}
.motion-highlight {
	outline: 2px solid orange;
}
.glow-highlight {
	background-color: orange;
}
#help {
  position: relative;
  margin: 0px 4px;
  -webkit-border-bottom-right-radius: 20px;
	-webkit-border-bottom-left-radius: 20px;
	-moz-border-radius-bottomright: 20px;
	-moz-border-radius-bottomleft: 20px;
	border-bottom-right-radius: 20px;
	border-bottom-left-radius: 20px;
  width: 580px;
  height: 50px;
  line-height: 22px;
  text-align: center;
  background-color: #aaa;
  color: white;
  padding: 5px 0px;
}

JavaScript

$(function () {
    		
    		
    		var oO = {};
    		
  			oO.paper = Raphael("raphaelbox", 560, 560);
				oO.easing = '<>';
				oO.textXoffset = 6;
				oO.textYoffset = 16;
				oO.anitime = 200;
				
				oO.motion = false;
				
				oO.trackingOn = false;
				oO.trackWhich = null;
				oO.trackMovementStart = function (trackwhich) {
					
					oO.trackingOn = true;
					oO.trackWhich = trackwhich;
					
				};
				
				oO.trackMovementEnd = function () {
					
					oO.trackingOn = false;
					oO.trackWhich = null;
					
					$('.graphpoint_xy0, .graphpoint_xy1, .graphpoint_xy2').removeClass('motion-highlight');
					oO.graphpoint_xy0.attr('stroke', '#333');
					oO.graphpoint_xy1.attr('stroke', '#333');
					oO.graphpoint_xy2.attr('stroke', '#333');
					
				};
				
				oO.trackMovement = function (event) {
					event.preventDefault();
					
					if (oO.trackingOn) {
						oO.anitime = 0;
						
						var offset = $('#raphaelbox').offset();
						
						var dx = event.pageX - offset.left - 10;
						var dy = event.pageY - offset.top - 10;
						
						$('input[name="x'+oO.trackWhich+'"]').val(dx);
						$('input[name="y'+oO.trackWhich+'"]').val(dy).trigger('keyup');
						
						oO['graphpoint_xy'+oO.trackWhich].attr({cx : dx, cy : dy});
						
						$('.graphpoint_xy'+oO.trackWhich).addClass('motion-highlight');
						oO['graphpoint_xy'+oO.trackWhich].attr('stroke', 'orange');
						
					}
					
				}
				
				oO.recalc = function () {
					
					//origin
					oO.x0 = 1 * $('input[name="x0"]').val();
					oO.y0 = 1 * $('input[name="y0"]').val();
					//first lineto point
					oO.x1 = /*290 + 0*/ 1 * $('input[name="x1"]').val();
					oO.y1 = /*290 + -200*/ 1 * $('input[name="y1"]').val();
					
					//angle
					oO.ang = 30;
					
					//arc options
					oO.arc_xrotate = 1 * $('input[name="arc_xrotate"]').val();
					oO.arc_largeflag = 1 * $('input[name="arc_largeflag"]').val();
					oO.arc_sweep = 1 *...