From 23badac757a2bee23d48006557553e084e1d31ef Mon Sep 17 00:00:00 2001 From: Pavol Rusnak Date: Wed, 3 Jun 2009 15:00:48 +0000 Subject: [PATCH] make square/circle selecting more cooler :-) git-svn-id: http://svg-edit.googlecode.com/svn/trunk@21 eee81c28-f429-11dd-99c0-75d572ba1ddd --- images/ellipse.png | Bin 0 -> 811 bytes images/rect.png | Bin 422 -> 404 bytes images/square.png | Bin 0 -> 422 bytes svg-editor.css | 30 +++++++++++++++++++++++++++--- svg-editor.html | 18 +++++++++--------- svg-editor.js | 24 ++++++++++++------------ svgcanvas.js | 32 ++++++++++++++++++++++++++++---- 7 files changed, 76 insertions(+), 28 deletions(-) create mode 100644 images/ellipse.png create mode 100644 images/square.png diff --git a/images/ellipse.png b/images/ellipse.png new file mode 100644 index 0000000000000000000000000000000000000000..1402a2d8d39d8998fd569aa9681f97c77366e44d GIT binary patch literal 811 zcmV+`1JwM9P)Px%7+cvCL6PNW+mBWf z75)RYX%j@WX&FI_b`fMu(gn%x*rH+zbR2u95p`zX>$yEGX4E2zBHH~-s;Wz7K?1%MC$Oixd5*b$Gnb?!;j z!gfLsf)EIR3xM-Q2?V~g2OQvnFk8gF?K@ZO-MOn7M9uRhssVr?2z0qrlD^}p<;&}U zAOMsGlv>nMetTBBl7&)$k^lhdI?{C<6Tremg#f@XjF0Jb`a?Q>pAZgf3Iqe^REaQ{ zk8&~cplYvVK@@O?S`)V)KlJZBdXNP$`Aw6H#p0NdV#BArm56WNTv)q0R!6oMV&BzX z%{P2ONC?JElO|^hQ-fEp)W6AOZUQ(DKrc7|0N?kA#c5jKle-h)b@dIZCE8?$Yt68BU6Cskcy4ZnJsNwhF5S59On%P41#kgC`gd2!!Rn)N p0A&DfRc8SV130#{ZI|%(@dXqN&!vsi4dDO)002ovPDHLkV1i?{d=vlx literal 0 HcmV?d00001 diff --git a/images/rect.png b/images/rect.png index 0ca71a67fc87ce95185844bb174c72c493e5361d..4fd15f837c216c6d5c542d3601a2136a8d41374d 100644 GIT binary patch delta 377 zcmV-<0fzpj1C#@hB!2;OQb$4nuFf3k0003_Nklx=#=E2M{7v_$c$bYVa+kCctth4iQKT-Aa z7(U+LhOOvD*HNtV9-+I)<|TI;V=`j$;2m3C0oKVjq}CxfFD}~Cw<0EDHc~bu9Ty0t z&apOJI|7?B9mlpzF&TAs)aM|kBG5zJ_M<&W%tkWDPdWgslt|K1l9OVk2R#k~Rvbv$ zC+LgfIh^z&Ef0zJ9S*<@+TtJO72x@qh6H X^1c%CqTF6d00000NkvXXu0mjfdk?Xe delta 396 zcmV;70dxM81EvFzB!2{RLP=Bz2nYy#2xN!=000SaNLh0L01ejw01ejxLMWSf0000P zbVXQnQ*UN;cVTj60C#tHE@^ISb7Ns}WiD@WXPfRk8UO$RBS}O-R7i=vR=rNfFc5PP z0}=ybp$j7eJMaH4-`Z#RayCPoulZ>&sYHoXS*lX|;)1+zUhet*6f z1=a$HCPX8Q8+wE_vI@X#ICo9tNP^=8GsMaC1vZKLbU^HfY-T&;6YAPILTg2`(yWp0xx z4JG9;uDukIST`r)*7u`SC1Urgp!!MKzu-!ajzz}_$s3wP>xt_M#Hjh_>tosmNIOs{ q!HRd~o@gwG*1wI+tJdXz6~C>_wY{*Li?ILz002ovP6b4+LSTZ?zo_g0 diff --git a/images/square.png b/images/square.png new file mode 100644 index 0000000000000000000000000000000000000000..0ca71a67fc87ce95185844bb174c72c493e5361d GIT binary patch literal 422 zcmeAS@N?(olHy`uVBq!ia0vp^5+KaM1|%Pp+x`GjEX7WqAsj$Z!;#Vf2?p zUk71ECym(^Ktah8*NBqf{Irtt#G+J&^73-M%)IR4eSNOS zIZsN@a(UhPn(N4lpU+<>-(vHy4$wH*RsM8dhEDsn{k>;aUwc|Fx_|ANt$R1j?%oIt OQwC30KbLh*2~7Y62&)|c literal 0 HcmV?d00001 diff --git a/svg-editor.css b/svg-editor.css index 3feb1e1b..8cd3f3d6 100644 --- a/svg-editor.css +++ b/svg-editor.css @@ -116,7 +116,7 @@ border-bottom: 1px solid #808080; } -#tools_rect, #tools_circle { +#tools_rect, #tools_ellipse { position: absolute; display: none; height: 28px; @@ -126,9 +126,33 @@ 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; - background: #E8E8E8; + background-color: #E8E8E8; border-left: 1px solid #FFFFFF; border-top: 1px solid #FFFFFF; border-right: 1px solid #808080; diff --git a/svg-editor.html b/svg-editor.html index 2473c932..6c170df1 100644 --- a/svg-editor.html +++ b/svg-editor.html @@ -19,15 +19,15 @@
-
square
-
rectangle
-
freehand
+
+
+
-
-
circle
-
ellipse
-
freehand
+
+
+
+
@@ -38,8 +38,8 @@ -->

-
-
+
+


diff --git a/svg-editor.js b/svg-editor.js index e4e070ea..fcba2ddd 100644 --- a/svg-editor.js +++ b/svg-editor.js @@ -10,8 +10,8 @@ $(document).ready(function(){ var pos = $('#tools_rect_show').position(); $('#tools_rect').css({'left': pos.left+2, 'top': pos.top+2}); - pos = $('#tools_circle_show').position(); - $('#tools_circle').css({'left': pos.left+2, 'top': pos.top+2}); + pos = $('#tools_ellipse_show').position(); + $('#tools_ellipse').css({'left': pos.left+2, 'top': pos.top+2}); $('#stroke_width').change(function(){ SvgCanvas.setStrokeWidth(this.options[this.selectedIndex].value); @@ -84,23 +84,23 @@ $(document).ready(function(){ $('#tool_circle').click(function(){ SvgCanvas.setMode('circle'); - $('#tools_circle').hide(); + $('#tools_ellipse').hide(); $('.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(){ SvgCanvas.setMode('ellipse'); - $('#tools_circle').hide(); + $('#tools_ellipse').hide(); $('.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(){ SvgCanvas.setMode('fhellipse'); - $('#tools_circle').hide(); + $('#tools_ellipse').hide(); $('.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(){ @@ -163,12 +163,12 @@ $(document).ready(function(){ $('#tools_rect').hide(); }); */ - $('#tools_circle_show').click(function(){ - $('#tools_circle').show(); + $('#tools_ellipse_show').click(function(){ + $('#tools_ellipse').show(); }); /* - $('#tools_circle').mouseout(function(){ - $('#tools_circle').hide(); + $('#tools_ellipse').mouseout(function(){ + $('#tools_ellipse').hide(); }); */ }) diff --git a/svgcanvas.js b/svgcanvas.js index ff239385..696d5e13 100644 --- a/svgcanvas.js +++ b/svgcanvas.js @@ -194,6 +194,22 @@ function SvgCanvas(doc) }); break; 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": started = true; addSvgElementFromJson({ @@ -211,7 +227,7 @@ function SvgCanvas(doc) "opacity": 0.5 } }); - break; + break; case "delete": var t = evt.target; if (t == svgroot) return; @@ -268,12 +284,11 @@ function SvgCanvas(doc) } break; case "circle": - var shape = svgdoc.getElementById("ellipse_" + obj_num); + var shape = svgdoc.getElementById("circle_" + obj_num); var cx = shape.getAttributeNS(null, "cx"); var cy = shape.getAttributeNS(null, "cy"); var rad = Math.sqrt( (x-cx)*(x-cx) + (y-cy)*(y-cy) ); - shape.setAttributeNS(null, "rx", rad); - shape.setAttributeNS(null, "ry", rad); + shape.setAttributeNS(null, "r", rad); break; case "ellipse": var shape = svgdoc.getElementById("ellipse_" + obj_num); @@ -348,6 +363,15 @@ function SvgCanvas(doc) } break; 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": element = svgdoc.getElementById("ellipse_" + obj_num); if (element.getAttribute('rx') == 0 &&