github/svgedit
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

make square/circle selecting more cooler :-)

Browse Source 
git-svn-id: http://svg-edit.googlecode.com/svn/trunk@21 eee81c28-f429-11dd-99c0-75d572ba1ddd
This commit is contained in:
Pavol Rusnak
2009-06-03 15:00:48 +00:00
parent d01e3497b5
commit 23badac757
7 changed files with 76 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
images/ellipse.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 811 B

BIN
images/rect.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 422 B

After

Width:  |  Height:  |  Size: 404 B

BIN
images/square.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 422 B

30
svg-editor.css
View File

@@ -116,7 +116,7 @@
border-bottom: 1px solid #808080; border-bottom: 1px solid #808080;
} }
#tools_rect, #tools_circle { #tools_rect, #tools_ellipse {
position: absolute; position: absolute;
display: none; display: none;
height: 28px; height: 28px;
@@ -126,9 +126,33 @@
float: left; float: left;
} }
#tools_rect div, #tools_circle div { #tool_square {
background: 2px 2px url('images/square.png') no-repeat;
}
#tool_rect {
background: 2px 2px url('images/rect.png') no-repeat;
}
#tool_fhrect {
background: 2px 2px url('images/path.png') no-repeat;
}
#tool_circle {
background: 2px 2px url('images/circle.png') no-repeat;
}
#tool_ellipse {
background: 2px 2px url('images/ellipse.png') no-repeat;
}
#tool_fhellipse {
background: 2px 2px url('images/path.png') no-repeat;
}
#tools_rect div, #tools_ellipse div {
float: left; float: left;
background: #E8E8E8; background-color: #E8E8E8;
border-left: 1px solid #FFFFFF; border-left: 1px solid #FFFFFF;
border-top: 1px solid #FFFFFF; border-top: 1px solid #FFFFFF;
border-right: 1px solid #808080; border-right: 1px solid #808080;

18
svg-editor.html
View File

@@ -19,15 +19,15 @@
</div> </div>
<div id="tools_rect"> <div id="tools_rect">
<div id="tool_square">square</div> <div id="tool_square"></div>
<div id="tool_rect">rectangle</div> <div id="tool_rect"></div>
<div id="tool_fhrect">freehand</div> <div id="tool_fhrect"></div>
</div> </div>
<div id="tools_circle"> <div id="tools_ellipse">
<div id="tool_circle">circle</div> <div id="tool_circle"></div>
<div id="tool_ellipse">ellipse</div> <div id="tool_ellipse"></div>
<div id="tool_fhellipse">freehand</div> <div id="tool_fhellipse"></div>
</div> </div>
<div id="tools"> <div id="tools">
@@ -38,8 +38,8 @@
--> -->
<img class="tool_button_current" id="tool_path" src="images/path.png" /><br/> <img class="tool_button_current" id="tool_path" src="images/path.png" /><br/>
<img class="tool_button" id="tool_line" src="images/line.png" /><br/> <img class="tool_button" id="tool_line" src="images/line.png" /><br/>
<img class="tool_button" id="tools_rect_show" src="images/rect.png" /><br/> <img class="tool_button" id="tools_rect_show" src="images/square.png" /><br/>
<img class="tool_button" id="tools_circle_show" src="images/circle.png" /><br/> <img class="tool_button" id="tools_ellipse_show" src="images/circle.png" /><br/>
<img class="tool_button" id="tool_delete" src="images/delete.png" /><hr/> <img class="tool_button" id="tool_delete" src="images/delete.png" /><hr/>
<img class="tool_button" id="tool_clear" src="images/clear.png" /><br/> <img class="tool_button" id="tool_clear" src="images/clear.png" /><br/>
<img class="tool_button" id="tool_submit" src="images/submit.png" /><br/> <img class="tool_button" id="tool_submit" src="images/submit.png" /><br/>

24
svg-editor.js
View File

@@ -10,8 +10,8 @@ $(document).ready(function(){
var pos = $('#tools_rect_show').position(); var pos = $('#tools_rect_show').position();
$('#tools_rect').css({'left': pos.left+2, 'top': pos.top+2}); $('#tools_rect').css({'left': pos.left+2, 'top': pos.top+2});
pos = $('#tools_circle_show').position(); pos = $('#tools_ellipse_show').position();
$('#tools_circle').css({'left': pos.left+2, 'top': pos.top+2}); $('#tools_ellipse').css({'left': pos.left+2, 'top': pos.top+2});
$('#stroke_width').change(function(){ $('#stroke_width').change(function(){
SvgCanvas.setStrokeWidth(this.options[this.selectedIndex].value); SvgCanvas.setStrokeWidth(this.options[this.selectedIndex].value);
@@ -84,23 +84,23 @@ $(document).ready(function(){
$('#tool_circle').click(function(){ $('#tool_circle').click(function(){
SvgCanvas.setMode('circle'); SvgCanvas.setMode('circle');
$('#tools_circle').hide(); $('#tools_ellipse').hide();
$('.tool_button_current').removeClass('tool_button_current').addClass('tool_button'); $('.tool_button_current').removeClass('tool_button_current').addClass('tool_button');
$('#tools_circle_show').addClass('tool_button_current'); $('#tools_ellipse_show').addClass('tool_button_current');
}); });
$('#tool_ellipse').click(function(){ $('#tool_ellipse').click(function(){
SvgCanvas.setMode('ellipse'); SvgCanvas.setMode('ellipse');
$('#tools_circle').hide(); $('#tools_ellipse').hide();
$('.tool_button_current').removeClass('tool_button_current').addClass('tool_button'); $('.tool_button_current').removeClass('tool_button_current').addClass('tool_button');
$('#tools_circle_show').addClass('tool_button_current'); $('#tools_ellipse_show').addClass('tool_button_current');
}); });
$('#tool_fhellipse').click(function(){ $('#tool_fhellipse').click(function(){
SvgCanvas.setMode('fhellipse'); SvgCanvas.setMode('fhellipse');
$('#tools_circle').hide(); $('#tools_ellipse').hide();
$('.tool_button_current').removeClass('tool_button_current').addClass('tool_button'); $('.tool_button_current').removeClass('tool_button_current').addClass('tool_button');
$('#tools_circle_show').addClass('tool_button_current'); $('#tools_ellipse_show').addClass('tool_button_current');
}); });
$('#tool_delete').click(function(){ $('#tool_delete').click(function(){
@@ -163,12 +163,12 @@ $(document).ready(function(){
$('#tools_rect').hide(); $('#tools_rect').hide();
}); });
*/ */
$('#tools_circle_show').click(function(){ $('#tools_ellipse_show').click(function(){
$('#tools_circle').show(); $('#tools_ellipse').show();
}); });
/* /*
$('#tools_circle').mouseout(function(){ $('#tools_ellipse').mouseout(function(){
$('#tools_circle').hide(); $('#tools_ellipse').hide();
}); });
*/ */
}) })

32
svgcanvas.js
View File

@@ -194,6 +194,22 @@ function SvgCanvas(doc)
}); });
break; break;
case "circle": case "circle":
started = true;
addSvgElementFromJson({
"element": "circle",
"attr": {
"cx": x,
"cy": y,
"r": 0,
"id": "circle_" + obj_num,
"fill": current_fill,
"stroke": current_stroke,
"stroke-width": current_stroke_width,
"stroke-dasharray": current_stroke_style,
"opacity": 0.5
}
});
break;
case "ellipse": case "ellipse":
started = true; started = true;
addSvgElementFromJson({ addSvgElementFromJson({
@@ -211,7 +227,7 @@ function SvgCanvas(doc)
"opacity": 0.5 "opacity": 0.5
} }
}); });
break; break;
case "delete": case "delete":
var t = evt.target; var t = evt.target;
if (t == svgroot) return; if (t == svgroot) return;
@@ -268,12 +284,11 @@ function SvgCanvas(doc)
} }
break; break;
case "circle": case "circle":
var shape = svgdoc.getElementById("ellipse_" + obj_num); var shape = svgdoc.getElementById("circle_" + obj_num);
var cx = shape.getAttributeNS(null, "cx"); var cx = shape.getAttributeNS(null, "cx");
var cy = shape.getAttributeNS(null, "cy"); var cy = shape.getAttributeNS(null, "cy");
var rad = Math.sqrt( (x-cx)*(x-cx) + (y-cy)*(y-cy) ); var rad = Math.sqrt( (x-cx)*(x-cx) + (y-cy)*(y-cy) );
shape.setAttributeNS(null, "rx", rad); shape.setAttributeNS(null, "r", rad);
shape.setAttributeNS(null, "ry", rad);
break; break;
case "ellipse": case "ellipse":
var shape = svgdoc.getElementById("ellipse_" + obj_num); var shape = svgdoc.getElementById("ellipse_" + obj_num);
@@ -348,6 +363,15 @@ function SvgCanvas(doc)
} }
break; break;
case "circle": case "circle":
element = svgdoc.getElementById("circle_" + obj_num);
if (element.getAttribute('r') == 0) {
element.parentNode.removeChild(element);
element = null;
} else {
element.setAttribute("opacity", current_opacity);
obj_num++;
}
break;
case "ellipse": case "ellipse":
element = svgdoc.getElementById("ellipse_" + obj_num); element = svgdoc.getElementById("ellipse_" + obj_num);
if (element.getAttribute('rx') == 0 && if (element.getAttribute('rx') == 0 &&