easyDesign

by enginustun

HTML

<div class="svg-icons">
    <ul>
        <li class="active" data-pen="pointer">pointer</li>
        <li data-pen="rect">rect</li>
        <li data-pen="circ">circ</li>
        <li data-pen="line">line</li>
    </ul>
<div class="clear"></div>
</div>
<div class="clear"></div>
<div class="svg-container">
    <svg id="svg">
        
    </svg>
</div>

CSS

body{
    font-family:'Segoe UI';
}

.svg-container{
    width:100%;
    height:400px;
    border:1px solid #ccc;
    background:#555;
}

.svg-icons{
    margin-bottom:5px;
    font-weight:500;
    color:#333;
}

.svg-icons ul{
    list-style: none;
    margin-left: 0;
    padding-left: 0;
}

.svg-icons ul li{
    float:left;
    padding:5px;
    border:1px solid #ccc;
    margin-right:5px;
    cursor:pointer;
}

.svg-icons ul li:hover,
.svg-icons ul li.active{
    background:#4B4D73;
    color: #fff;
}

.clear{
    clear:both;
}

[data-shape][data-selected='true']{
    stroke:#efefef;
    stroke-width:2px;
    stroke-dasharray:2px,4px;
}

JavaScript

var drawingSVG = function(){
	var dSVG,
        pw,
        ph,
        pc,
        shapes = [],
        drawFuncs = {},
        self = this;
    
    self.options={
        svgId:'svg',
        dWidth:480,
        dHeight:320,
        curPen:'pointer',
        xmlns:'http://www.w3.org/2000/svg',
        ctrl:false,
        shift:false
    }
    
    var o = self.options;
    
    var initialize = function(){
    	dSVG = document.getElementById(o.svgId);
        var dParent = $(dSVG).parent();
        dSVG.style.width = dParent.width();
        dSVG.style.height = dParent.height();
        //dSVG.oncontextmenu = function(){return false;};
    }
    initialize();
    
    self.appendLine = function(){}
    
    self.appendRect = function(x, y, width, height, stroke, strokeWidth, fill){
		var elem = document.createElementNS(o.xmlns, 'rect');
		elem.setAttribute('x',x);
		elem.setAttribute('y',y);
		elem.setAttribute('width',width);
		elem.setAttribute('height',height);
    	elem.setAttribute('stroke',stroke||'white');
    	elem.setAttribute('stroke-width',strokeWidth);
		elem.setAttribute('fill', fill||red);
        elem.setAttribute('data-shape','rect');
        elem.setAttribute('data-selected', false);
    	dSVG.appendChild(elem);
    }
    
    self.appendCircle = function(x, y, r, stroke, strokeWidth, fill){
        var elem = document.createElementNS(o.xmlns, 'circle');
		elem.setAttribute('cx',x);
		elem.setAttribute('cy',y);
        elem.setAttribute('r',r);
    	elem.setAttribute('stroke',stroke||'white');
    	elem.setAttribute('stroke-width',strokeWidth);
		elem.setAttribute('fill', fill||red);
        elem.setAttribute('data-shape','circ');
        elem.setAttribute('data-selected', false);
    	dSVG.appendChild(elem);
    }
    
    self.appendPolygon = function(){}
    
    self.deleteSelectedShapes = function(){
    	$('[data-selected="true"]').remove();
    }
    
    $(dSVG).on('click',function(e){
    	if(drawFuncs[o.curPen])
        {
       ...