svg.js - drawing

by rafalry

HTML

<script src="http://code.jquery.com/jquery.js"></script>
<script src="http://dr-det-yp.ydp.eu/rrybacki/vanilia/work/EPUB-66/svg.js"></script>
<script src="http://otm.github.io/svg.path.js/svg.path.js"></script>
width: <input type="range" id="width" min="1" max="10" />
color: <input type="input" id="color" value="#ff0000" />
smoothing <select id="smooth">
  <option value="raw" selected>raw line</option>
  <option value="bezierCurve">bezierCurve</option>
  <option value="lowPassFilter">lowPassFilter</option>
</select>
filter 
<select id="filter">
  <option value="allPoints" selected>allPoints</option>
  <option value="skipPointsCounter">skipPointsCounter</option>
  <option value="skipPointsDistance">skipPointsDistance</option>
</select>
<button onclick="clearSvg()">clear</button>
<div id="console"></div>
<div id="drawing"></div>

CSS

#drawing {
    height: 400px;
    border: 1px solid blue;
}

JavaScript

var draw = SVG('drawing');

draw.path().fill('none').stroke({ width: 2, color: "#ff00ff" }).M({ x:2, y:4}).L({x:40,y:20});
var line; 
var svgRect = $('#drawing svg').get(0).getBoundingClientRect();

window.clearSvg = function (){
    console.log($('#drawing svg'));
    $('#drawing svg path').remove();
}

function log(text) {
    var console = $('#console');
    console.html(text);
}

function raw(xy){
    line.L( xy );
}

function skipPointsCounter(xy){
    if (!window.counter){
        window.counter = 5;
        return true;
    }
    counter--;
    return false;
}

function skipPointsDistance(xy){
    if (window.lastXy){
        if (lineDistance(xy, window.lastXy) > 4) {;
            window.lastXy = xy;
            return true;
        }
    } else {
        window.lastXy = xy;
    }
    return false;
}

function bezierCurve(xy){
    if (window.quadraticBezierControl){
        line.Q(window.quadraticBezierControl, xy);
        window.quadraticBezierControl = undefined;
    } else {
        window.quadraticBezierControl = xy;
    }
}

function lowPassFilter(xy){
    var FILTER_LENGTH = 2;
    if (!window.xyHistory){
        window.xyHistory = [];
    } else if (window.xyHistory.length > FILTER_LENGTH) {
        var lastXy = window.xyHistory.shift();     
        var previousXy = window.xyHistory[0];     
        var x = (previousXy.x + lastXy.x + xy.x ) / 3;
        var y = (previousXy.y + lastXy.y + xy.y ) / 3;
        line.L( {x:x, y:y} );
    }
    window.xyHistory.push(xy);
}

var SMOOTH = {
    raw: raw,
    bezierCurve: bezierCurve,
    lowPassFilter: lowPassFilter,
    skipPointsCounter: skipPointsCounter,
    skipPointsDistance: skipPointsDistance
};

var FILTER = {
    allPoints: function () { return true },
    skipPointsCounter: skipPointsCounter,
    skipPointsDistance: skipPointsDistance
};

function drawMove (event) {
    var x = getCoord(event, 'X');
    var y = getCoord(event, 'Y');
    var xy = {x:x, y:y };
    
    var filter =...