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

control group, fill, stroke opacity 

git-svn-id: http://svg-edit.googlecode.com/svn/trunk@29 eee81c28-f429-11dd-99c0-75d572ba1ddd
master
Pavol Rusnak 2009-06-04 13:43:58 +00:00
parent 25921700d5
commit 3debc78945
5 changed files with 101 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
CHANGES
View File

@ -1,8 +1,9 @@
2.0.1 - ???? ??, ???? 2.0.1 - ???? ??, ????
--------------------- ---------------------
* added tooltips (by codedread) * added tooltips (patch by codedread)
* fix flyout menus (by codedread) * fix flyout menus (patch by codedread)
* ask before clearing the drawing (by martin.vidner) * ask before clearing the drawing (suggested by martin.vidner)
* control group, fill and stroke opacity (suggested by coderead)
2.0 - June 03, 2009 2.0 - June 03, 2009
------------------ ------------------

5
svg-editor.css
View File

@ -16,6 +16,7 @@
width: 640px; width: 640px;
height: 480px; height: 480px;
border: 1px solid #808080; border: 1px solid #808080;
border-left: none;
} }
#svg_editor #svgcanvas { #svg_editor #svgcanvas {
@ -26,6 +27,7 @@
#svg_editor div#palette_holder { #svg_editor div#palette_holder {
border: 1px solid #808080; border: 1px solid #808080;
border-top: none; border-top: none;
border-left: none;
float: left; float: left;
width: 640px; width: 640px;
overflow-x: scroll; overflow-x: scroll;
@ -70,9 +72,8 @@
#tools { #tools {
background: #E8E8E8; background: #E8E8E8;
height: 504px; height: 534px;
border: 1px solid #808080; border: 1px solid #808080;
border-right: none;
padding: 4px; padding: 4px;
} }

41
svg-editor.html
View File

@ -52,6 +52,18 @@
<div>fill <div>fill
<div id="fill_color" title="Change fill color"></div> <div id="fill_color" title="Change fill color"></div>
<select id="fill_opacity" title="Change fill opacity">
<option selected="selected" value="1">100 %</option>
<option value="0.9">90 %</option>
<option value="0.8">80 %</option>
<option value="0.7">70 %</option>
<option value="0.6">60 %</option>
<option value="0.5">50 %</option>
<option value="0.4">40 %</option>
<option value="0.3">30 %</option>
<option value="0.2">20 %</option>
<option value="0.1">10 %</option>
</select>
</div> </div>
<hr/> <hr/>
@ -75,6 +87,35 @@
<option value="5,2,2,2,2,2">- ..</option> <option value="5,2,2,2,2,2">- ..</option>
</select> </select>
</div> </div>
<div>
<select id="stroke_opacity" title="Change stroke opacity">
<option selected="selected" value="1">100 %</option>
<option value="0.9">90 %</option>
<option value="0.8">80 %</option>
<option value="0.7">70 %</option>
<option value="0.6">60 %</option>
<option value="0.5">50 %</option>
<option value="0.4">40 %</option>
<option value="0.3">30 %</option>
<option value="0.2">20 %</option>
<option value="0.1">10 %</option>
</select>
</div>
<hr/>
<div>
<select id="group_opacity" title="Change group opacity">
<option selected="selected" value="1">100 %</option>
<option value="0.9">90 %</option>
<option value="0.8">80 %</option>
<option value="0.7">70 %</option>
<option value="0.6">60 %</option>
<option value="0.5">50 %</option>
<option value="0.4">40 %</option>
<option value="0.3">30 %</option>
<option value="0.2">20 %</option>
<option value="0.1">10 %</option>
</select>
</div>
</div> </div>
</div> </div>

12
svg-editor.js
View File

@ -21,6 +21,18 @@ $(document).ready(function(){
SvgCanvas.setStrokeStyle(this.options[this.selectedIndex].value); SvgCanvas.setStrokeStyle(this.options[this.selectedIndex].value);
}); });
$('#stroke_opacity').change(function(){
SvgCanvas.setStrokeOpacity(this.options[this.selectedIndex].value);
});
$('#fill_opacity').change(function(){
SvgCanvas.setFillOpacity(this.options[this.selectedIndex].value);
});
$('#group_opacity').change(function(){
SvgCanvas.setOpacity(this.options[this.selectedIndex].value);
});
$('.palette_item').click(function(){ $('.palette_item').click(function(){
color = $(this).css('background-color'); color = $(this).css('background-color');
if (color == 'transparent') { if (color == 'transparent') {

48
svgcanvas.js
View File

@ -25,6 +25,8 @@ function SvgCanvas(doc)
var current_stroke_width = 1; var current_stroke_width = 1;
var current_stroke_style = "none"; var current_stroke_style = "none";
var current_opacity = 1; var current_opacity = 1;
var current_stroke_opacity = 1;
var current_fill_opacity = 1;
var freehand_min_x = null; var freehand_min_x = null;
var freehand_max_x = null; var freehand_max_x = null;
var freehand_min_y = null; var freehand_min_y = null;
@ -147,7 +149,8 @@ function SvgCanvas(doc)
"stroke": current_stroke, "stroke": current_stroke,
"stroke-width": current_stroke_width, "stroke-width": current_stroke_width,
"stroke-dasharray": current_stroke_style, "stroke-dasharray": current_stroke_style,
"opacity": 0.5 "stroke-opacity": current_stroke_opacity,
"opacity": current_opacity / 2
} }
}); });
freehand_min_x = x; freehand_min_x = x;
@ -172,7 +175,9 @@ function SvgCanvas(doc)
"stroke": current_stroke, "stroke": current_stroke,
"stroke-width": current_stroke_width, "stroke-width": current_stroke_width,
"stroke-dasharray": current_stroke_style, "stroke-dasharray": current_stroke_style,
"opacity": 0.5 "stroke-opacity": current_stroke_opacity,
"fill-opacity": current_fill_opacity,
"opacity": current_opacity / 2
} }
}); });
break; break;
@ -189,7 +194,8 @@ function SvgCanvas(doc)
"stroke": current_stroke, "stroke": current_stroke,
"stroke-width": current_stroke_width, "stroke-width": current_stroke_width,
"stroke-dasharray": current_stroke_style, "stroke-dasharray": current_stroke_style,
"opacity": 0.5 "stroke-opacity": current_stroke_opacity,
"opacity": current_opacity / 2
} }
}); });
break; break;
@ -206,7 +212,9 @@ function SvgCanvas(doc)
"stroke": current_stroke, "stroke": current_stroke,
"stroke-width": current_stroke_width, "stroke-width": current_stroke_width,
"stroke-dasharray": current_stroke_style, "stroke-dasharray": current_stroke_style,
"opacity": 0.5 "stroke-opacity": current_stroke_opacity,
"fill-opacity": current_fill_opacity,
"opacity": current_opacity / 2
} }
}); });
break; break;
@ -224,7 +232,9 @@ function SvgCanvas(doc)
"stroke": current_stroke, "stroke": current_stroke,
"stroke-width": current_stroke_width, "stroke-width": current_stroke_width,
"stroke-dasharray": current_stroke_style, "stroke-dasharray": current_stroke_style,
"opacity": 0.5 "stroke-opacity": current_stroke_opacity,
"fill-opacity": current_fill_opacity,
"opacity": current_opacity / 2
} }
}); });
break; break;
@ -337,6 +347,7 @@ function SvgCanvas(doc)
d_attr = null; d_attr = null;
element = svgdoc.getElementById("path_" + obj_num); element = svgdoc.getElementById("path_" + obj_num);
element.setAttribute("opacity", current_opacity); element.setAttribute("opacity", current_opacity);
element.setAttribute("stroke-opacity", current_stroke_opacity);
obj_num++; obj_num++;
break; break;
case "line": case "line":
@ -347,6 +358,7 @@ function SvgCanvas(doc)
element = null; element = null;
} else { } else {
element.setAttribute("opacity", current_opacity); element.setAttribute("opacity", current_opacity);
element.setAttribute("stroke-opacity", current_stroke_opacity);
obj_num++; obj_num++;
} }
break; break;
@ -359,6 +371,8 @@ function SvgCanvas(doc)
element = null; element = null;
} else { } else {
element.setAttribute("opacity", current_opacity); element.setAttribute("opacity", current_opacity);
element.setAttribute("stroke-opacity", current_stroke_opacity);
element.setAttribute("fill-opacity", current_fill_opacity);
obj_num++; obj_num++;
} }
break; break;
@ -369,6 +383,8 @@ function SvgCanvas(doc)
element = null; element = null;
} else { } else {
element.setAttribute("opacity", current_opacity); element.setAttribute("opacity", current_opacity);
element.setAttribute("stroke-opacity", current_stroke_opacity);
element.setAttribute("fill-opacity", current_fill_opacity);
obj_num++; obj_num++;
} }
break; break;
@ -380,6 +396,8 @@ function SvgCanvas(doc)
element = null; element = null;
} else { } else {
element.setAttribute("opacity", current_opacity); element.setAttribute("opacity", current_opacity);
element.setAttribute("stroke-opacity", current_stroke_opacity);
element.setAttribute("fill-opacity", current_fill_opacity);
obj_num++; obj_num++;
} }
break; break;
@ -401,7 +419,9 @@ function SvgCanvas(doc)
"stroke": current_stroke, "stroke": current_stroke,
"stroke-width": current_stroke_width, "stroke-width": current_stroke_width,
"stroke-dasharray": current_stroke_style, "stroke-dasharray": current_stroke_style,
"opacity": current_opacity "opacity": current_opacity,
"stroke-opacity": current_stroke_opacity,
"fill-opacity": current_fill_opacity
} }
}); });
obj_num++; obj_num++;
@ -425,7 +445,9 @@ function SvgCanvas(doc)
"stroke": current_stroke, "stroke": current_stroke,
"stroke-width": current_stroke_width, "stroke-width": current_stroke_width,
"stroke-dasharray": current_stroke_style, "stroke-dasharray": current_stroke_style,
"opacity": current_opacity "opacity": current_opacity,
"stroke-opacity": current_stroke_opacity,
"fill-opacity": current_fill_opacity
} }
}); });
obj_num++; obj_num++;
@ -479,6 +501,18 @@ function SvgCanvas(doc)
current_stroke_style = val; current_stroke_style = val;
} }
this.setOpacity = function(val) {
current_opacity = val;
}
this.setFillOpacity = function(val) {
current_fill_opacity = val;
}
this.setStrokeOpacity = function(val) {
current_stroke_opacity = val;
}
this.setup = function(evt) { this.setup = function(evt) {
assignAttributes(svgroot, { assignAttributes(svgroot, {
"onmouseup": "svgcanvas.mouseUp(evt)", "onmouseup": "svgcanvas.mouseUp(evt)",