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

Image drawing support 

git-svn-id: http://svg-edit.googlecode.com/svn/trunk@578 eee81c28-f429-11dd-99c0-75d572ba1ddd
master
Kevin Kwok 2009-09-04 22:22:40 +00:00
parent 3be9c72c68
commit ccef6a0f49
4 changed files with 103 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
editor/svg-editor.css
View File

@ -137,6 +137,10 @@ div.color_block {
display: none;
}
#svg_editor #image_panel {
display: none;
}
#svg_editor #text_panel {
display: none;
}
@ -157,6 +161,10 @@ div.color_block {
vertical-align: 12px;
}
#svg_editor #image_panel .image_tool {
vertical-align: 12px;
}
#svg_editor #circle_panel .circle_tool {
vertical-align:12px;
}

16
editor/svg-editor.html
View File

@ -117,6 +117,21 @@
<input id="rect_rx" size="3" value="0" class="rect_tool" type="text" title="Change Rectangle Corner Radius" alt="Corner Radius"/>
</div>
<div id="image_panel">
<img class="tool_sep" src="images/sep.png" alt="|"/>
<label class="image_tool">x:</label>
<input id="image_x" class="image_tool attr_changer" title="Change image X coordinate" alt="x" size="3"/>
<label class="image_tool">y:</label>
<input id="image_y" class="image_tool attr_changer" title="Change image Y coordinate" alt="y" size="3"/>
<label class="image_tool">width:</label>
<input id="image_width" class="image_tool attr_changer" title="Change image width" alt="width" size="3"/>
<label class="image_tool">height:</label>
<input id="image_height" class="image_tool attr_changer" title="Change image height" alt="height" size="3"/>
<label class="image_tool">url:</label>
<input id="image_url" class="image_tool" type="text" title="Change URL" size="35"/>
</div>
<div id="circle_panel">
<img class="tool_sep" src="images/sep.png" alt="|"/>
<label class="circle_tool">cx:</label>
@ -195,6 +210,7 @@
<img class="flyout_arrow_horiz" src="images/flyouth.png"/>
<img class="tool_button" id="tools_ellipse_show" src="images/circle.png" title="Ellipse/Circle Tool [5/Shift+5]" alt="Circle"/><br/>
<img class="flyout_arrow_horiz" src="images/flyouth.png"/>
<img class="tool_button" id="tool_image" src="images/image.png" title="Image Tool" alt="Image"/>
<img class="tool_button" id="tool_text" src="images/text.png" title="Text Tool [6]" alt="Text"/>
<img class="tool_button" id="tool_poly" src="images/polygon.png" title="Poly Tool [7]" alt="Poly"/>
</div> <!-- tools_left -->

23
editor/svg-editor.js
View File

@ -81,7 +81,7 @@ function svg_edit_setup() {
// updates the toolbar (colors, opacity, etc) based on the selected element
var updateToolbar = function() {
if (selectedElement != null) {
if (selectedElement != null) { //the image thing might be a hack.
// get opacity values
var fillOpacity = parseFloat(selectedElement.getAttribute("fill-opacity"));
if (isNaN(fillOpacity)) {
@ -168,7 +168,7 @@ function svg_edit_setup() {
}
$('#selected_panel, #multiselected_panel, #rect_panel, #circle_panel,\
#ellipse_panel, #line_panel, #text_panel').hide();
#ellipse_panel, #line_panel, #text_panel, #image_panel').hide();
if (elem != null) {
$('#angle').val(svgCanvas.getRotationAngle(elem));
$('#selected_panel').show();
@ -176,6 +176,7 @@ function svg_edit_setup() {
// update contextual tools here
var panels = {
rect: ['radius','x','y','width','height'],
image: ['x','y','width','height'],
circle: ['cx','cy','r'],
ellipse: ['cx','cy','rx','ry'],
line: ['x1','y1','x2','y2'],
@ -215,7 +216,13 @@ function svg_edit_setup() {
if (svgCanvas.addedNew) {
$('#text').focus().select();
}
}
}else if(el_name == 'image') {
var xlinkNS="http://www.w3.org/1999/xlink";
$('#image_url').val(elem.getAttributeNS(xlinkNS, "href"));
}
}
} // if (elem != null)
else if (multiselected) {
@ -242,6 +249,8 @@ function svg_edit_setup() {
$('#text').focus( function(){ textBeingEntered = true; } );
$('#text').blur( function(){ textBeingEntered = false; } );
$('#image_url').blur(function(){ svgCanvas.setImageURL(this.value); });
// bind the selected event to our function that handles updates to the UI
svgCanvas.bind("selected", selectedChanged);
svgCanvas.bind("changed", elementChanged);
@ -296,6 +305,7 @@ function svg_edit_setup() {
$('#text').keyup(function(){
svgCanvas.setTextContent(this.value);
});
$('.attr_changer').change(function() {
var attr = this.getAttribute("alt");
@ -423,6 +433,12 @@ function svg_edit_setup() {
$('#tools_rect_show').attr('src', 'images/rect.png');
};
var clickImage = function(){
if (toolButtonClick('#tool_image')) {
svgCanvas.setMode('image');
}
};
var clickFHRect = function(){
if (toolButtonClick('#tools_rect_show')) {
svgCanvas.setMode('fhrect');
@ -623,6 +639,7 @@ function svg_edit_setup() {
$('#tool_circle').mouseup(clickCircle);
$('#tool_ellipse').mouseup(clickEllipse);
$('#tool_fhellipse').mouseup(clickFHEllipse);
$('#tool_image').mouseup(clickImage);
$('#tool_text').click(clickText);
$('#tool_poly').click(clickPoly);
$('#tool_clear').click(clickClear);

60
editor/svgcanvas.js
View File

@ -22,6 +22,7 @@ var svgWhiteList = {
"rect": ["fill", "fill-opacity", "height", "id", "opacity", "rx", "ry", "stroke", "stroke-dasharray", "stroke-linecap", "stroke-linejoin", "stroke-opacity", "stroke-width", "transform", "width", "x", "y"],
"stop": ["id", "offset", "stop-color", "stop-opacity"],
"svg": ["id", "height", "transform", "width", "xmlns"],
"image": ["id","width","height","opacity","x","y"],
"text": ["fill", "fill-opacity", "font-family", "font-size", "font-style", "font-weight", "id", "opacity", "stroke", "stroke-dasharray", "stroke-linecap", "stroke-linejoin", "stroke-opacity", "stroke-width", "transform", "text-anchor", "x", "y"],
};
@ -1116,6 +1117,20 @@ function BatchCommand(text) {
'y': pt.y
}, 1000);
break;
case "image":
changes["x"] = selected.getAttribute("x");
changes["y"] = selected.getAttribute("y");
changes["width"] = selected.getAttribute("width");
changes["height"] = selected.getAttribute("height");
var pt = remap(changes["x"], changes["y"]);
assignAttributes(selected, {
'x': pt.x,
'y': pt.y,
'width': scalew(changes["width"]),
'height': scaleh(changes["height"])
}, 1000);
break;
case "rect":
changes["x"] = selected.getAttribute("x");
changes["y"] = selected.getAttribute("y");
@ -1220,6 +1235,8 @@ function BatchCommand(text) {
var x = evt.pageX - container.parentNode.offsetLeft + container.parentNode.scrollLeft;
var y = evt.pageY - container.parentNode.offsetTop + container.parentNode.scrollTop;
evt.preventDefault()
if($.inArray(current_mode, ['select', 'resize']) == -1) {
addGradient();
}
@ -1290,6 +1307,24 @@ function BatchCommand(text) {
freehand_min_y = y;
freehand_max_y = y;
break;
case "image":
started = true;
start_x = x;
start_y = y;
var newImage = addSvgElementFromJson({
"element": "image",
"attr": {
"x": x,
"y": y,
"width": 0,
"height": 0,
"id": getNextId(),
"opacity": cur_shape.opacity / 2
}
});
var xlinkNS="http://www.w3.org/1999/xlink";
newImage.setAttributeNS(xlinkNS, "href", "images/logo.png")
break;
case "square":
// FIXME: once we create the rect, we lose information that this was a square
// (for resizing purposes this could be important)
@ -1447,6 +1482,10 @@ function BatchCommand(text) {
var x = evt.pageX - container.parentNode.offsetLeft + container.parentNode.scrollLeft;
var y = evt.pageY - container.parentNode.offsetTop + container.parentNode.scrollTop;
var shape = svgdoc.getElementById(getId());
evt.preventDefault()
switch (current_mode)
{
case "select":
@ -1649,6 +1688,14 @@ function BatchCommand(text) {
'y': Math.min(start_y,y)
},1000);
break;
case "image":
assignAttributes(shape,{
'width': Math.abs(x-start_x),
'height': Math.abs(y-start_y),
'x': Math.min(start_x,x),
'y': Math.min(start_y,y)
},1000);
break;
case "circle":
var cx = shape.getAttributeNS(null, "cx");
var cy = shape.getAttributeNS(null, "cy");
@ -1929,6 +1976,10 @@ function BatchCommand(text) {
keep = (element.getAttribute('width') != 0 ||
element.getAttribute('height') != 0);
break;
case "image":
keep = (element.getAttribute('width') != 0 ||
element.getAttribute('height') != 0);
break;
case "circle":
keep = (element.getAttribute('r') != 0);
break;
@ -2714,6 +2765,10 @@ function BatchCommand(text) {
this.changeSelectedAttribute("#text", val);
};
this.setImageURL = function(val) {
this.changeSelectedAttribute("#href", val);
};
this.setRectRadius = function(val) {
var selected = selectedElements[0];
if (selected != null && selected.tagName == "rect") {
@ -2780,7 +2835,10 @@ function BatchCommand(text) {
if (attr == "#text") {
elem.textContent = newValue;
elem = canvas.quickClone(elem);
}
} else if (attr == "#href") {
var xlinkNS="http://www.w3.org/1999/xlink";
elem.setAttributeNS(xlinkNS, "href", val);
}
else elem.setAttribute(attr, newValue);
selectedBBoxes[i] = this.getBBox(elem);
// Use the Firefox quickClone hack for text elements with gradients or