control group, fill, stroke opacity
git-svn-id: http://svg-edit.googlecode.com/svn/trunk@29 eee81c28-f429-11dd-99c0-75d572ba1dddmaster
Pavol Rusnak
parent
25921700d5
commit
3debc78945
7
CHANGES
7
CHANGES
|
|
@ -1,8 +1,9 @@
|
|||
2.0.1 - ???? ??, ????
|
||||
---------------------
|
||||
* added tooltips (by codedread)
|
||||
* fix flyout menus (by codedread)
|
||||
* ask before clearing the drawing (by martin.vidner)
|
||||
* added tooltips (patch by codedread)
|
||||
* fix flyout menus (patch by codedread)
|
||||
* ask before clearing the drawing (suggested by martin.vidner)
|
||||
* control group, fill and stroke opacity (suggested by coderead)
|
||||
|
||||
2.0 - June 03, 2009
|
||||
------------------
|
||||
|
|
|
|||
|
|
@ -16,6 +16,7 @@
|
|||
width: 640px;
|
||||
height: 480px;
|
||||
border: 1px solid #808080;
|
||||
border-left: none;
|
||||
}
|
||||
|
||||
#svg_editor #svgcanvas {
|
||||
|
|
@ -26,6 +27,7 @@
|
|||
#svg_editor div#palette_holder {
|
||||
border: 1px solid #808080;
|
||||
border-top: none;
|
||||
border-left: none;
|
||||
float: left;
|
||||
width: 640px;
|
||||
overflow-x: scroll;
|
||||
|
|
@ -70,9 +72,8 @@
|
|||
|
||||
#tools {
|
||||
background: #E8E8E8;
|
||||
height: 504px;
|
||||
height: 534px;
|
||||
border: 1px solid #808080;
|
||||
border-right: none;
|
||||
padding: 4px;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -52,6 +52,18 @@
|
|||
|
||||
<div>fill
|
||||
<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>
|
||||
|
||||
<hr/>
|
||||
|
|
@ -75,6 +87,35 @@
|
|||
<option value="5,2,2,2,2,2">- ..</option>
|
||||
</select>
|
||||
</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>
|
||||
|
|
|
|||
|
|
@ -21,6 +21,18 @@ $(document).ready(function(){
|
|||
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(){
|
||||
color = $(this).css('background-color');
|
||||
if (color == 'transparent') {
|
||||
|
|
|
|||
48
svgcanvas.js
48
svgcanvas.js
|
|
@ -25,6 +25,8 @@ function SvgCanvas(doc)
|
|||
var current_stroke_width = 1;
|
||||
var current_stroke_style = "none";
|
||||
var current_opacity = 1;
|
||||
var current_stroke_opacity = 1;
|
||||
var current_fill_opacity = 1;
|
||||
var freehand_min_x = null;
|
||||
var freehand_max_x = null;
|
||||
var freehand_min_y = null;
|
||||
|
|
@ -147,7 +149,8 @@ function SvgCanvas(doc)
|
|||
"stroke": current_stroke,
|
||||
"stroke-width": current_stroke_width,
|
||||
"stroke-dasharray": current_stroke_style,
|
||||
"opacity": 0.5
|
||||
"stroke-opacity": current_stroke_opacity,
|
||||
"opacity": current_opacity / 2
|
||||
}
|
||||
});
|
||||
freehand_min_x = x;
|
||||
|
|
@ -172,7 +175,9 @@ function SvgCanvas(doc)
|
|||
"stroke": current_stroke,
|
||||
"stroke-width": current_stroke_width,
|
||||
"stroke-dasharray": current_stroke_style,
|
||||
"opacity": 0.5
|
||||
"stroke-opacity": current_stroke_opacity,
|
||||
"fill-opacity": current_fill_opacity,
|
||||
"opacity": current_opacity / 2
|
||||
}
|
||||
});
|
||||
break;
|
||||
|
|
@ -189,7 +194,8 @@ function SvgCanvas(doc)
|
|||
"stroke": current_stroke,
|
||||
"stroke-width": current_stroke_width,
|
||||
"stroke-dasharray": current_stroke_style,
|
||||
"opacity": 0.5
|
||||
"stroke-opacity": current_stroke_opacity,
|
||||
"opacity": current_opacity / 2
|
||||
}
|
||||
});
|
||||
break;
|
||||
|
|
@ -206,7 +212,9 @@ function SvgCanvas(doc)
|
|||
"stroke": current_stroke,
|
||||
"stroke-width": current_stroke_width,
|
||||
"stroke-dasharray": current_stroke_style,
|
||||
"opacity": 0.5
|
||||
"stroke-opacity": current_stroke_opacity,
|
||||
"fill-opacity": current_fill_opacity,
|
||||
"opacity": current_opacity / 2
|
||||
}
|
||||
});
|
||||
break;
|
||||
|
|
@ -224,7 +232,9 @@ function SvgCanvas(doc)
|
|||
"stroke": current_stroke,
|
||||
"stroke-width": current_stroke_width,
|
||||
"stroke-dasharray": current_stroke_style,
|
||||
"opacity": 0.5
|
||||
"stroke-opacity": current_stroke_opacity,
|
||||
"fill-opacity": current_fill_opacity,
|
||||
"opacity": current_opacity / 2
|
||||
}
|
||||
});
|
||||
break;
|
||||
|
|
@ -337,6 +347,7 @@ function SvgCanvas(doc)
|
|||
d_attr = null;
|
||||
element = svgdoc.getElementById("path_" + obj_num);
|
||||
element.setAttribute("opacity", current_opacity);
|
||||
element.setAttribute("stroke-opacity", current_stroke_opacity);
|
||||
obj_num++;
|
||||
break;
|
||||
case "line":
|
||||
|
|
@ -347,6 +358,7 @@ function SvgCanvas(doc)
|
|||
element = null;
|
||||
} else {
|
||||
element.setAttribute("opacity", current_opacity);
|
||||
element.setAttribute("stroke-opacity", current_stroke_opacity);
|
||||
obj_num++;
|
||||
}
|
||||
break;
|
||||
|
|
@ -359,6 +371,8 @@ function SvgCanvas(doc)
|
|||
element = null;
|
||||
} else {
|
||||
element.setAttribute("opacity", current_opacity);
|
||||
element.setAttribute("stroke-opacity", current_stroke_opacity);
|
||||
element.setAttribute("fill-opacity", current_fill_opacity);
|
||||
obj_num++;
|
||||
}
|
||||
break;
|
||||
|
|
@ -369,6 +383,8 @@ function SvgCanvas(doc)
|
|||
element = null;
|
||||
} else {
|
||||
element.setAttribute("opacity", current_opacity);
|
||||
element.setAttribute("stroke-opacity", current_stroke_opacity);
|
||||
element.setAttribute("fill-opacity", current_fill_opacity);
|
||||
obj_num++;
|
||||
}
|
||||
break;
|
||||
|
|
@ -380,6 +396,8 @@ function SvgCanvas(doc)
|
|||
element = null;
|
||||
} else {
|
||||
element.setAttribute("opacity", current_opacity);
|
||||
element.setAttribute("stroke-opacity", current_stroke_opacity);
|
||||
element.setAttribute("fill-opacity", current_fill_opacity);
|
||||
obj_num++;
|
||||
}
|
||||
break;
|
||||
|
|
@ -401,7 +419,9 @@ function SvgCanvas(doc)
|
|||
"stroke": current_stroke,
|
||||
"stroke-width": current_stroke_width,
|
||||
"stroke-dasharray": current_stroke_style,
|
||||
"opacity": current_opacity
|
||||
"opacity": current_opacity,
|
||||
"stroke-opacity": current_stroke_opacity,
|
||||
"fill-opacity": current_fill_opacity
|
||||
}
|
||||
});
|
||||
obj_num++;
|
||||
|
|
@ -425,7 +445,9 @@ function SvgCanvas(doc)
|
|||
"stroke": current_stroke,
|
||||
"stroke-width": current_stroke_width,
|
||||
"stroke-dasharray": current_stroke_style,
|
||||
"opacity": current_opacity
|
||||
"opacity": current_opacity,
|
||||
"stroke-opacity": current_stroke_opacity,
|
||||
"fill-opacity": current_fill_opacity
|
||||
}
|
||||
});
|
||||
obj_num++;
|
||||
|
|
@ -479,6 +501,18 @@ function SvgCanvas(doc)
|
|||
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) {
|
||||
assignAttributes(svgroot, {
|
||||
"onmouseup": "svgcanvas.mouseUp(evt)",
|
||||
|
|
|
|||
Loading…
Reference in New Issue