From 686e9cb12978d559130f816e5c2d2854a13c2f48 Mon Sep 17 00:00:00 2001
From: wente <329538422@qq.com>
Date: 星期三, 22 五月 2024 08:43:31 +0800
Subject: [PATCH] svgEditor
---
web/public/SVGOrigin/Method-Draw-master/editor/src/method-draw.js | 10
web/public/SVGOrigin/Method-Draw-master/editor/lib/jgraduate/jquery.jgraduate.js | 344 ++++++++++++++--------------
web/src/views/modules/sysPictureBase/SysPictureBase-AddOrUpdate.vue | 6
web/public/SVGOrigin/Method-Draw-master/editor/index.html | 200 ++++++++--------
web/public/SVGOrigin/Method-Draw-master/editor/extensions/ext-shapes.js | 136 +++++-----
web/public/SVGOrigin/Method-Draw-master/editor/extensions/ext-eyedropper.js | 14
6 files changed, 359 insertions(+), 351 deletions(-)
diff --git a/web/public/SVGOrigin/Method-Draw-master/editor/extensions/ext-eyedropper.js b/web/public/SVGOrigin/Method-Draw-master/editor/extensions/ext-eyedropper.js
index 9ab7433..8c960c4 100644
--- a/web/public/SVGOrigin/Method-Draw-master/editor/extensions/ext-eyedropper.js
+++ b/web/public/SVGOrigin/Method-Draw-master/editor/extensions/ext-eyedropper.js
@@ -21,7 +21,7 @@
ChangeElementCommand = svgedit.history.ChangeElementCommand,
addToHistory = function(cmd) { svgCanvas.undoMgr.addCommandToHistory(cmd); },
currentStyle = {fillPaint: "red", fillOpacity: 1.0,
- strokePaint: "black", strokeOpacity: 1.0,
+ strokePaint: "black", strokeOpacity: 1.0,
strokeWidth: 5, strokeDashArray: null,
opacity: 1.0,
strokeLinecap: 'butt',
@@ -34,7 +34,7 @@
var tool = $('#tool_eyedropper');
}
-
+
var getPaint = function(color, opac, type) {
// update the editor's fill paint
var opts = null;
@@ -48,7 +48,7 @@
opts = { alpha: opac };
opts[refElem.tagName] = refElem;
- }
+ }
else if (color.indexOf("#") === 0) {
opts = {
alpha: opac,
@@ -63,14 +63,14 @@
}
return new $.jGraduate.Paint(opts);
};
-
+
return {
name: "eyedropper",
svgicons: "extensions/eyedropper-icon.xml",
buttons: [{
id: "tool_eyedropper",
type: "mode",
- title: "Eye Dropper Tool",
+ title: "鍚哥宸ュ叿",
position: 8,
key: "I",
icon: "extensions/eyedropper.png",
@@ -80,7 +80,7 @@
}
}
}],
-
+
mouseDown: function(opts) {
var mode = svgCanvas.getMode();
var e = opts.event;
@@ -132,4 +132,4 @@
}
}
};
-});
\ No newline at end of file
+});
diff --git a/web/public/SVGOrigin/Method-Draw-master/editor/extensions/ext-shapes.js b/web/public/SVGOrigin/Method-Draw-master/editor/extensions/ext-shapes.js
index c01f3ef..1d114a0 100644
--- a/web/public/SVGOrigin/Method-Draw-master/editor/extensions/ext-shapes.js
+++ b/web/public/SVGOrigin/Method-Draw-master/editor/extensions/ext-shapes.js
@@ -9,7 +9,7 @@
*/
methodDraw.addExtension("shapes", function() {
-
+
var current_d, cur_shape_id;
var canv = methodDraw.canvas;
@@ -17,23 +17,23 @@
var start_x, start_y;
var svgroot = canv.getRootElem();
var lastBBox = {};
-
+
// This populates the category list
var categories = {
- basic: 'Basic',
- object: 'Objects',
- symbol: 'Symbols',
- arrow: 'Arrows',
- flowchart: 'Flowchart',
- nature: 'Nature',
- game: 'Cards & Chess',
- dialog_balloon: 'Dialog balloons',
- music: 'Music',
- weather: 'Weather & Time',
- ui: 'User Interface',
- social: 'Social Web'
+ basic: '鍩烘湰',
+ object: '鐗╀綋',
+ symbol: '绗﹀彿',
+ arrow: '绠ご',
+ flowchart: '娴佺▼鍥�',
+ nature: '鑷劧',
+ game: '绾哥墝涓庤薄妫�',
+ dialog_balloon: '瀵硅瘽妗�',
+ music: '闊充箰',
+ weather: '澶╂皵涓庢椂闂�',
+ ui: '鐢ㄦ埛鎺ュ彛',
+ social: '绀句氦缃戠粶'
};
-
+
var library = {
'basic': {
data: {
@@ -61,28 +61,28 @@
"divide": "m150,0.99785l0,0c25.17819,0 45.58916,20.41097 45.58916,45.58916c0,25.17821 -20.41096,45.58916 -45.58916,45.58916c-25.17822,0 -45.58916,-20.41093 -45.58916,-45.58916c0,-25.1782 20.41093,-45.58916 45.58916,-45.58916zm0,296.25203c-25.17822,0 -45.58916,-20.41095 -45.58916,-45.58917c0,-25.17819 20.41093,-45.58916 45.58916,-45.58916c25.17819,0 45.58916,20.41096 45.58916,45.58916c0,25.17822 -20.41096,45.58917 -45.58916,45.58917zm-134.06754,-193.71518l268.13507,0l0,91.17833l-268.13507,0z",
"minus": "m0.99887,102.39503l297.49445,0l0,95.2112l-297.49445,0z",
"times": "m1.00089,73.36786l72.36697,-72.36697l76.87431,76.87368l76.87431,-76.87368l72.36765,72.36697l-76.87433,76.87431l76.87433,76.87431l-72.36765,72.36765l-76.87431,-76.87433l-76.87431,76.87433l-72.36697,-72.36765l76.87368,-76.87431l-76.87368,-76.87431z"
-
+
},
buttons: []
}
};
-
+
var cur_lib = library.basic;
-
+
var mode_id = 'shapelib';
-
+
function loadIcons() {
$('#shape_buttons').empty();
-
+
// Show lib ones
$('#shape_buttons').append(cur_lib.buttons);
}
-
+
function loadLibrary(cat_id) {
-
+
var lib = library[cat_id];
-
+
if(!lib) {
$('#shape_buttons').html('Loading...');
$.getJSON('extensions/shapelib/' + cat_id + '.json', function(result, textStatus) {
@@ -96,19 +96,19 @@
});
return;
}
-
+
cur_lib = lib;
if(!lib.buttons.length) makeButtons(cat_id, lib);
loadIcons();
}
-
+
function makeButtons(cat, shapes) {
var size = cur_lib.size || 300;
var fill = cur_lib.fill || false;
var off = size * .05;
var vb = [-off, -off, size + off*2, size + off*2].join(' ');
var stroke = fill ? 0: (size/30);
-
+
var shape_icon = new DOMParser().parseFromString(
'<svg xmlns="http://www.w3.org/2000/svg"><svg viewBox="' + vb + '"><path fill="#333" stroke="transparent" stroke-width="' + stroke + '" /><\/svg><\/svg>',
'text/xml');
@@ -118,36 +118,36 @@
shape_icon.documentElement.setAttribute('width', width);
shape_icon.documentElement.setAttribute('height', height);
var svg_elem = $(document.importNode(shape_icon.documentElement,true));
-
+
var data = shapes.data;
-
+
cur_lib.buttons = [];
-
+
for(var id in data) {
var path_d = data[id];
var icon = svg_elem.clone();
icon.find('path').attr('d', path_d);
-
+
var icon_btn = icon.wrap('<div class="tool_button">').parent().attr({
id: mode_id + '_' + id,
title: id
});
-
-
+
+
// Store for later use
cur_lib.buttons.push(icon_btn[0]);
}
-
+
}
-
+
return {
svgicons: "extensions/ext-shapes.xml",
buttons: [{
id: "tool_shapelib",
type: "mode_flyout", // _flyout
position: 6,
- title: "Shape library",
+ title: "褰㈢姸搴�",
icon: "extensions/ext-shapes.png",
events: {
"click": function() {
@@ -157,21 +157,21 @@
}],
callback: function() {
-
+
var btn_div = $('<div id="shape_buttons">');
$('#tools_shapelib > *').wrapAll(btn_div);
-
+
var shower = $('#tools_shapelib_show');
-
+
loadLibrary('basic');
-
+
// Do mouseup on parent element rather than each button
$('#shape_buttons').mouseup(function(evt) {
var btn = $(evt.target).closest('div.tool_button');
-
+
if(!btn.length) return;
-
+
var copy = btn.children().clone().attr({width: 24, height: 24});
shower.children(':not(.flyout_arrow_horiz)').remove();
shower
@@ -179,56 +179,56 @@
.attr('data-curopt', '#' + btn[0].id) // This sets the current mode
.mouseup();
canv.setMode(mode_id);
-
+
cur_shape_id = btn[0].id.substr((mode_id+'_').length);
current_d = cur_lib.data[cur_shape_id];
-
+
$('.tools_flyout').fadeOut();
});
-//
+//
var shape_cats = $('<div id="shape_cats">');
var cat_str = '';
-
+
$.each(categories, function(id, label) {
cat_str += '<div data-cat=' + id + '>' + label + '</div>';
});
-
+
shape_cats.html(cat_str).children().bind('mouseup', function() {
var catlink = $(this);
catlink.siblings().removeClass('current');
catlink.addClass('current');
-
+
loadLibrary(catlink.attr('data-cat'));
// Get stuff
-
+
return false;
});
-
+
shape_cats.children().eq(0).addClass('current');
-
+
$('#tools_shapelib').prepend(shape_cats);
shower.mouseup(function() {
canv.setMode(current_d ? mode_id : 'select');
});
-
+
$('#tool_shapelib').remove();
-
+
var h = $('#tools_shapelib').height();
$('#tools_shapelib').css({
'margin-top': -(h/2),
'margin-left': 3
});
-
+
},
mouseDown: function(opts) {
var mode = canv.getMode();
if(mode !== mode_id) return;
-
+
var e = opts.event;
var x = start_x = opts.start_x;
var y = start_y = opts.start_y;
@@ -250,8 +250,8 @@
cur_shape.setAttribute('d', current_d);
canv.pathActions.fixEnd(cur_shape);
}
-
- cur_shape.setAttribute('transform', "translate(" + x + "," + y + ") scale(0.005) translate(" + -x + "," + -y + ")");
+
+ cur_shape.setAttribute('transform', "translate(" + x + "," + y + ") scale(0.005) translate(" + -x + "," + -y + ")");
// console.time('b');
canv.recalculateDimensions(cur_shape);
var tlist = canv.getTransformList(cur_shape);
@@ -268,15 +268,15 @@
mouseMove: function(opts) {
var mode = canv.getMode();
if(mode !== mode_id) return;
-
+
var zoom = canv.getZoom();
var evt = opts.event
-
+
var x = opts.mouse_x/zoom;
var y = opts.mouse_y/zoom;
-
+
var tlist = canv.getTransformList(cur_shape),
- box = cur_shape.getBBox(),
+ box = cur_shape.getBBox(),
left = box.x, top = box.y, width = box.width,
height = box.height;
var dx = (x-start_x), dy = (y-start_y);
@@ -290,27 +290,27 @@
var ts = null,
tx = 0, ty = 0,
- sy = height ? (height+dy)/height : 1,
+ sy = height ? (height+dy)/height : 1,
sx = width ? (width+dx)/width : 1;
var sx = newbox.width / lastBBox.width;
var sy = newbox.height / lastBBox.height;
-
+
sx = sx || 1;
sy = sy || 1;
-
+
// Not perfect, but mostly works...
-
+
if(x < start_x) {
tx = lastBBox.width;
}
if(y < start_y) ty = lastBBox.height;
-
+
// update the transform list with translate,scale,translate
var translateOrigin = svgroot.createSVGTransform(),
scale = svgroot.createSVGTransform(),
translateBack = svgroot.createSVGTransform();
-
+
translateOrigin.setTranslate(-(left+tx), -(top+ty));
if(evt.shiftKey) {
replaced = true
@@ -339,7 +339,7 @@
mouseUp: function(opts) {
var mode = canv.getMode();
if(mode !== mode_id) return;
-
+
if(opts.mouse_x == start_x && opts.mouse_y == start_y) {
return {
keep: false,
@@ -353,6 +353,6 @@
element: cur_shape,
started: false
}
- }
+ }
}
});
diff --git a/web/public/SVGOrigin/Method-Draw-master/editor/index.html b/web/public/SVGOrigin/Method-Draw-master/editor/index.html
index fe78a47..4fdcf48 100644
--- a/web/public/SVGOrigin/Method-Draw-master/editor/index.html
+++ b/web/public/SVGOrigin/Method-Draw-master/editor/index.html
@@ -93,7 +93,7 @@
</div>
</a>
- <div class="menu">
+ <div style="opacity: 0" class="menu">
<div class="menu_title">File</div>
<div class="menu_list" id="file_menu">
<div id="tool_clear" class="menu_item">New Document</div>
@@ -104,7 +104,7 @@
</div>
</div>
- <div class="menu">
+ <div style="opacity: 0" class="menu">
<div class="menu_title">Edit</div>
<div class="menu_list" id="edit_menu">
<div class="menu_item" id="tool_undo">Undo <span class="shortcut">鈱榋</span></div>
@@ -118,7 +118,7 @@
</div>
</div>
- <div class="menu">
+ <div style="opacity: 0" class="menu">
<div class="menu_title">Object</div>
<div class="menu_list" id="object_menu">
<div class="menu_item action_selected disabled" id="tool_move_top">Bring to Front <span class="shortcut">鈱樷嚙鈫�</span></div>
@@ -134,16 +134,18 @@
</div>
</div>
- <div class="menu">
+ <div style="opacity: 0" class="menu">
<div class="menu_title">View</div>
<div class="menu_list" id="view_menu">
- <div class="menu_item push_button_pressed" id="tool_rulers">View Rulers</div>
- <div class="menu_item" id="tool_wireframe">View Wireframe</div>
- <div class="menu_item" id="tool_snap">Snap to Grid</div>
- <div class="separator"></div>
- <div class="menu_item" id="tool_source">Source... <span class="shortcut">鈱楿</span></div>
+ <div class="menu_item push_button_pressed" id="tool_rulers">View Rulers</div>
+ <div class="menu_item" id="tool_wireframe">View Wireframe</div>
+ <div class="menu_item" id="tool_snap">Snap to Grid</div>
+ <div class="separator"></div>
+ <div class="menu_item" id="tool_source">Source... <span class="shortcut">鈱楿</span></div>
</div>
</div>
+
+
@@ -153,20 +155,20 @@
<div id="canvas_panel" class="context_panel">
- <h4 class="clearfix">Canvas</h4>
+ <h4 class="clearfix">鐢诲竷</h4>
<label data-title="Change canvas width">
<input size="3" id="canvas_width" type="text" pattern="[0-9]*" />
- <span class="icon_label">Width</span>
+ <span class="icon_label">瀹藉害</span>
</label>
<label data-title="Change canvas height">
<input id="canvas_height" size="3" type="text" pattern="[0-9]*" />
- <span class="icon_label">Height</span>
+ <span class="icon_label">楂樺害</span>
</label>
<label data-title="Change canvas color" class="draginput">
- <span>Color</span>
+ <span>棰滆壊</span>
<div id="color_canvas_tools">
<div class="color_tool active" id="tool_canvas">
<div class="color_block">
@@ -178,24 +180,24 @@
</label>
<div class="draginput">
- <span>Sizes</span>
+ <span>鐢诲竷澶у皬</span>
<select id="resolution">
- <option id="selectedPredefined" selected="selected">Custom</option>
+ <option id="selectedPredefined" selected="selected">榛樿</option>
<option>640x480</option>
<option>800x600</option>
<option>1024x768</option>
<option>1280x960</option>
<option>1600x1200</option>
- <option id="fitToContent" value="content">Fit to Content</option>
+ <option id="fitToContent" value="content">閫傚簲鍐呭</option>
</select>
<div class="caret"></div>
- <label id="resolution_label">Custom</label>
+ <label id="resolution_label">榛樿</label>
</div>
</div>
<div id="rect_panel" class="context_panel">
- <h4 class="clearfix">Rectangle</h4>
+ <h4 class="clearfix">鐭╁舰</h4>
<label>
<input id="rect_x" class="attr_changer" data-title="Change X coordinate" size="3" data-attr="x" pattern="[0-9]*" />
<span>X</span>
@@ -206,16 +208,16 @@
</label>
<label id="rect_width_tool attr_changer" data-title="Change rectangle width">
<input id="rect_width" class="attr_changer" size="3" data-attr="width" type="text" pattern="[0-9]*" />
- <span class="icon_label">Width</span>
+ <span class="icon_label">瀹藉害</span>
</label>
<label id="rect_height_tool" data-title="Change rectangle height">
<input id="rect_height" class="attr_changer" size="3" data-attr="height" type="text" pattern="[0-9]*" />
- <span class="icon_label">銆�</span>
+ <span class="icon_label">楂樺害</span>
</label>
</div>
<div id="path_panel" class="context_panel clearfix">
- <h4 class="clearfix">Path</h4>
+ <h4 class="clearfix">璺緞</h4>
<label>
<input id="path_x" class="attr_changer" data-title="Change ellipse's cx coordinate" size="3" data-attr="x" pattern="[0-9]*" />
<span>X</span>
@@ -227,7 +229,7 @@
</div>
<div id="image_panel" class="context_panel clearfix">
- <h4>Image</h4>
+ <h4>鍥剧墖</h4>
<label>
<input id="image_x" class="attr_changer" data-title="Change X coordinate" size="3" data-attr="x" pattern="[0-9]*"/>
<span>X</span>
@@ -238,32 +240,32 @@
</label>
<label>
<input id="image_width" class="attr_changer" data-title="Change image width" size="3" data-attr="width" pattern="[0-9]*" />
- <span class="icon_label">Width</span>
+ <span class="icon_label">瀹藉害</span>
</label>
<label>
<input id="image_height" class="attr_changer" data-title="Change image height" size="3" data-attr="height" pattern="[0-9]*" />
- <span class="icon_label">Height</span>
+ <span class="icon_label">楂樺害</span>
</label>
</div>
<div id="circle_panel" class="context_panel">
- <h4>Circle</h4>
+ <h4>鍦�</h4>
<label id="tool_circle_cx">
- <span>Center X</span>
+ <span>涓績X杞�</span>
<input id="circle_cx" class="attr_changer" title="Change circle's cx coordinate" size="3" data-attr="cx"/>
</label>
<label id="tool_circle_cy">
- <span>Center Y</span>
+ <span>涓績Y杞�</span>
<input id="circle_cy" class="attr_changer" title="Change circle's cy coordinate" size="3" data-attr="cy"/>
</label>
<label id="tool_circle_r">
- <span>Radius</span>
+ <span>鍗婂緞</span>
<input id="circle_r" class="attr_changer" title="Change circle's radius" size="3" data-attr="r"/>
</label>
</div>
<div id="ellipse_panel" class="context_panel clearfix">
- <h4>Ellipse</h4>
+ <h4>妞渾</h4>
<label id="tool_ellipse_cx">
<input id="ellipse_cx" class="attr_changer" data-title="Change ellipse's cx coordinate" size="3" data-attr="cx" pattern="[0-9]*" />
<span>X</span>
@@ -274,36 +276,36 @@
</label>
<label id="tool_ellipse_rx">
<input id="ellipse_rx" class="attr_changer" data-title="Change ellipse's x radius" size="3" data-attr="rx" pattern="[0-9]*" />
- <span>Radius X</span>
+ <span>鍗婂緞X</span>
</label>
<label id="tool_ellipse_ry">
<input id="ellipse_ry" class="attr_changer" data-title="Change ellipse's y radius" size="3" data-attr="ry" pattern="[0-9]*" />
- <span>Radius Y</span>
+ <span>鍗婂緞Y</span>
</label>
</div>
<div id="line_panel" class="context_panel clearfix">
- <h4>Line</h4>
+ <h4>绾挎潯</h4>
<label id="tool_line_x1">
<input id="line_x1" class="attr_changer" data-title="Change line's starting x coordinate" size="3" data-attr="x1" pattern="[0-9]*" />
- <span>Start X</span>
+ <span>宸︿笂X杞�</span>
</label>
<label id="tool_line_y1">
<input id="line_y1" class="attr_changer" data-title="Change line's starting y coordinate" size="3" data-attr="y1" pattern="[0-9]*" />
- <span>Start Y</span>
+ <span>宸︿笂Y杞�</span>
</label>
<label id="tool_line_x2">
<input id="line_x2" class="attr_changer" data-title="Change line's ending x coordinate" size="3" data-attr="x2" pattern="[0-9]*" />
- <span>End X</span>
+ <span>鍙充笅X杞�</span>
</label>
<label id="tool_line_y2">
<input id="line_y2" class="attr_changer" data-title="Change line's ending y coordinate" size="3" data-attr="y2" pattern="[0-9]*" />
- <span>End Y</span>
+ <span>鍙充笅Y杞�</span>
</label>
</div>
<div id="text_panel" class="context_panel">
- <h4>Text</h4>
+ <h4>鏂囨湰</h4>
<label>
<input id="text_x" class="attr_changer" data-title="Change text x coordinate" size="3" data-attr="x" pattern="[0-9]*" />
<span>X</span>
@@ -315,7 +317,7 @@
<div class="toolset draginput select twocol" id="tool_font_family">
<!-- Font family -->
- <span>Font</span>
+ <span>瀛椾綋</span>
<div id="preview_font" style="font-family: Helvetica, Arial, sans-serif;">Helvetica</div>
<div class="caret"></div>
<input id="font_family" data-title="Change Font Family" size="12" type="hidden" />
@@ -340,7 +342,7 @@
<label id="tool_font_size" data-title="Change Font Size">
<input id="font_size" size="3" value="0" />
- <span id="font_sizeLabel" class="icon_label">Font Size</span>
+ <span id="font_sizeLabel" class="icon_label">瀛椾綋澶у皬</span>
</label>
<!-- Not visible, but still used -->
<input id="text" type="text" size="35"/>
@@ -355,7 +357,7 @@
</div>
<div id="g_panel" class="context_panel clearfix">
- <h4>Group</h4>
+ <h4>缁勫悎</h4>
<label>
<input id="g_x" class="attr_changer" data-title="Change groups's x coordinate" size="3" data-attr="x" pattern="[0-9]*" />
<span>X</span>
@@ -367,7 +369,7 @@
</div>
<div id="path_node_panel" class="context_panel clearfix">
- <h4>Edit Path</h4>
+ <h4>缂栬緫璺緞</h4>
<label id="tool_node_x">
<input id="path_node_x" class="attr_changer" data-title="Change node's x coordinate" size="3" data-attr="x" />
@@ -379,13 +381,13 @@
</label>
<div id="segment_type" class="draginput label">
- <span>Segment Type</span>
+ <span>鍒嗘绫诲瀷</span>
<select id="seg_type" data-title="Change Segment type">
- <option id="straight_segments" selected="selected" value="4">Straight</option>
- <option id="curve_segments" value="6">Curve</option>
+ <option id="straight_segments" selected="selected" value="4">鐩寸嚎</option>
+ <option id="curve_segments" value="6">鏇茬嚎</option>
</select>
<div class="caret"></div>
- <label id="seg_type_label">Straight</label>
+ <label id="seg_type_label">鐩寸嚎</label>
</div>
<!--
@@ -396,9 +398,9 @@
-->
<div class="clearfix"></div>
- <div class="tool_button" id="tool_node_clone" title="Adds a node">Add Node</div>
- <div class="tool_button" id="tool_node_delete" title="Delete Node">Delete Node</div>
- <div class="tool_button" id="tool_openclose_path" title="Open/close sub-path">Open Path</div>
+ <div class="tool_button" id="tool_node_clone" title="Adds a node">娣诲姞鑺傜偣</div>
+ <div class="tool_button" id="tool_node_delete" title="Delete Node">鍒犻櫎鑺傜偣</div>
+ <div class="tool_button" id="tool_openclose_path" title="Open/close sub-path">鎵撳紑璺緞</div>
<!--<div class="tool_button" id="tool_add_subpath" title="Add sub-path"></div>-->
</div>
@@ -407,7 +409,7 @@
<label id="tool_angle" data-title="Change rotation angle" class="draginput">
<input id="angle" class="attr_changer" size="2" value="0" data-attr="transform" data-min="-180" data-max="180" type="text"/>
- <span class="icon_label">Rotation</span>
+ <span class="icon_label">鏃嬭浆</span>
<div id="tool_angle_indicator">
<div id="tool_angle_indicator_cursor"></div>
</div>
@@ -415,33 +417,33 @@
<label class="toolset" id="tool_opacity" data-title="Change selected item opacity">
<input id="group_opacity" class="attr_changer" data-attr="opacity" data-multiplier="0.01" size="3" value="100" step="5" min="0" max="100" />
- <span id="group_opacityLabel" class="icon_label">Opacity</span>
+ <span id="group_opacityLabel" class="icon_label">閫忔槑搴�</span>
</label>
<div class="toolset" id="tool_blur" data-title="Change gaussian blur value">
<label>
<input id="blur" size="2" value="0" step=".1" min="0" max="10" />
- <span class="icon_label">Blur</span>
+ <span class="icon_label">妯＄硦搴�</span>
</label>
</div>
<label id="cornerRadiusLabel" data-title="Change Rectangle Corner Radius">
<input id="rect_rx" size="3" value="0" data-attr="rx" class="attr_changer" type="text" pattern="[0-9]*" />
- <span class="icon_label">Roundness</span>
+ <span class="icon_label">鍦嗗害</span>
</label>
<div class="clearfix"></div>
<div id="align_tools">
- <h4>Align</h4>
+ <h4>瀵归綈鏂瑰紡</h4>
<div class="toolset align_buttons" id="tool_position">
<label>
<div class="col last clear" id="position_opts">
- <div class="draginput_cell" id="tool_posleft" title="Align Left"></div>
- <div class="draginput_cell" id="tool_poscenter" title="Align Center"></div>
- <div class="draginput_cell" id="tool_posright" title="Align Right"></div>
- <div class="draginput_cell" id="tool_postop" title="Align Top"></div>
- <div class="draginput_cell" id="tool_posmiddle" title="Align Middle"></div>
- <div class="draginput_cell" id="tool_posbottom" title="Align Bottom"></div>
+ <div class="draginput_cell" id="tool_posleft" title="宸﹀榻�"></div>
+ <div class="draginput_cell" id="tool_poscenter" title="姘村钩灞呬腑"></div>
+ <div class="draginput_cell" id="tool_posright" title="鍙冲榻�"></div>
+ <div class="draginput_cell" id="tool_postop" title="涓婂榻�"></div>
+ <div class="draginput_cell" id="tool_posmiddle" title="鍨傜洿灞呬腑"></div>
+ <div class="draginput_cell" id="tool_posbottom" title="涓嬪榻�"></div>
</div>
</label>
</div>
@@ -450,23 +452,23 @@
<!-- Buttons when multiple elements are selected -->
<div id="multiselected_panel" class="context_panel clearfix">
- <h4 class="hidable">Multiple Elements</h4>
+ <h4 class="hidable">瀵归綈鏂瑰紡</h4>
<div class="toolset align_buttons" style="position: relative">
<label id="tool_align_relative" style="margin-top: 10px;">
<select id="align_relative_to" title="Align relative to ...">
- <option id="selected_objects" value="selected">Align to objects</option>
- <option id="page" value="page">Align to page</option>
+ <option id="selected_objects" value="selected">涓庡璞″榻�</option>
+ <option id="page" value="page">涓庨〉闈㈠榻�</option>
</select>
</label>
<h4>.</h4>
<div class="col last clear">
- <div class="draginput_cell" id="tool_alignleft" title="Align Left"></div>
- <div class="draginput_cell" id="tool_aligncenter" title="Align Center"></div>
- <div class="draginput_cell" id="tool_alignright" title="Align Right"></div>
- <div class="draginput_cell" id="tool_aligntop" title="Align Top"></div>
- <div class="draginput_cell" id="tool_alignmiddle" title="Align Middle"></div>
- <div class="draginput_cell" id="tool_alignbottom" title="Align Bottom"></div>
+ <div class="draginput_cell" id="tool_alignleft" title="宸﹀榻�"></div>
+ <div class="draginput_cell" id="tool_aligncenter" title="姘村钩灞呬腑"></div>
+ <div class="draginput_cell" id="tool_alignright" title="鍙冲榻�"></div>
+ <div class="draginput_cell" id="tool_aligntop" title="涓婂榻�"></div>
+ <div class="draginput_cell" id="tool_alignmiddle" title="鍨傜洿灞呬腑"></div>
+ <div class="draginput_cell" id="tool_alignbottom" title="涓嬪榻�"></div>
</div>
</div>
<div class="clearfix"></div>
@@ -475,15 +477,15 @@
<div id="stroke_panel" class="context_panel clearfix">
<div class="clearfix"></div>
- <h4>Stroke</h4>
+ <h4>杈规</h4>
<div class="toolset" data-title="Change stroke">
<label>
<input id="stroke_width" size="2" value="5" data-attr="stroke-width" min="0" max="99" step="1" />
- <span class="icon_label">Stroke Width</span>
+ <span class="icon_label">杈瑰</span>
</label>
</div>
<div class="stroke_tool draginput">
- <span>Stroke Dash</span>
+ <span>绾挎潯鏍峰紡</span>
<select id="stroke_style" data-title="Change stroke dash style">
<option selected="selected" value="none">鈥�</option>
<option value="2,2">路路路</option>
@@ -511,14 +513,14 @@
<div id="tools_left" class="tools_panel">
- <div class="tool_button" id="tool_select" title="Select Tool [V]"></div>
- <div class="tool_button" id="tool_fhpath" title="Pencil Tool [P]"></div>
- <div class="tool_button" id="tool_line" title="Line Tool [L]"></div>
- <div class="tool_button" id="tool_rect" title="Square/Rect Tool [R]"></div>
- <div class="tool_button" id="tool_ellipse" title="Ellipse/Circle Tool [C]"></div>
- <div class="tool_button" id="tool_path" title="Path Tool [P]"></div>
- <div class="tool_button" id="tool_text" title="Text Tool [T]"></div>
- <div class="tool_button" id="tool_zoom" title="Zoom Tool [Z]"></div>
+ <div class="tool_button" id="tool_select" title="閫夋嫨宸ュ叿[V]"></div>
+ <div class="tool_button" id="tool_fhpath" title="閾呯瑪宸ュ叿[P]"></div>
+ <div class="tool_button" id="tool_line" title="杩炵嚎宸ュ叿[L]"></div>
+ <div class="tool_button" id="tool_rect" title="鏂瑰舰/鐭╁舰 [R]"></div>
+ <div class="tool_button" id="tool_ellipse" title="妞渾/鍦� [C]"></div>
+ <div class="tool_button" id="tool_path" title="璺緞宸ュ叿 [P]"></div>
+ <div class="tool_button" id="tool_text" title="鏂囨湰宸ュ叿 [T]"></div>
+ <div class="tool_button" id="tool_zoom" title="缂╂斁宸ュ叿 [Z]"></div>
<div id="color_tools">
<div id="tool_switch" title="Switch stroke and fill colors [X]"></div>
@@ -581,27 +583,27 @@
<div id="svg_source_overlay"></div>
<div id="svg_source_container">
<div id="save_output_btns">
- <p id="copy_save_note">Copy the contents of this box into a text editor, then save the file with a .svg extension.</p>
- <button id="copy_save_done">Done</button>
+ <p id="copy_save_note">灏嗘妗嗙殑鍐呭澶嶅埗鍒版枃鏈紪杈戝櫒涓紝鐒跺悗浣跨敤.svg鎵╁睍鍚嶄繚瀛樻枃浠躲��</p>
+ <button id="copy_save_done">濂�</button>
</div>
<form>
<textarea id="svg_source_textarea" spellcheck="false"></textarea>
</form>
<div id="tool_source_back" class="toolbar_button">
- <button id="tool_source_cancel" class="cancel">Cancel</button>
- <button id="tool_source_save" class="ok">Apply Changes</button>
+ <button id="tool_source_cancel" class="cancel">鍙栨秷</button>
+ <button id="tool_source_save" class="ok">搴旂敤鏇存敼</button>
</div>
</div>
</div>
<div id="base_unit_container">
<select id="base_unit">
- <option value="px">Pixels</option>
- <option value="cm">Centimeters</option>
- <option value="mm">Millimeters</option>
- <option value="in">Inches</option>
- <option value="pt">Points</option>
- <option value="pc">Picas</option>
+ <option value="px">鍍忕礌</option>
+ <option value="cm">鍘樼背</option>
+ <option value="mm">姣背</option>
+ <option value="in">鑻卞</option>
+ <option value="pt">鍍忕礌鐐�</option>
+ <option value="pc">娲惧崱</option>
<option value="em">Ems</option>
<option value="ex">Exs</option>
</select>
@@ -616,16 +618,16 @@
</div>
<ul id="cmenu_canvas" class="contextMenu">
- <li><a href="#cut">Cut <span class="shortcut">鈱榅;</span></a></li>
- <li><a href="#copy">Copy<span class="shortcut">鈱楥</span></a></li>
- <li><a href="#paste">Paste<span class="shortcut">鈱榁</span></a></li>
- <li class="separator"><a href="#delete">Delete<span class="shortcut">鈱�</span></a></li>
- <li class="separator"><a href="#group">Group<span class="shortcut">鈱楪</span></a></li>
- <li><a href="#ungroup">Ungroup<span class="shortcut">鈱樷嚙G</span></a></li>
- <li class="separator"><a href="#move_front">Bring to Front<span class="shortcut">鈱樷嚙鈫�</span></a></li>
- <li><a href="#move_up">Bring Forward<span class="shortcut">鈱樷啈</span></a></li>
- <li><a href="#move_down">Send Backward<span class="shortcut">鈱樷啌</span></a></li>
- <li><a href="#move_back">Send to Back<span class="shortcut">鈱樷嚙鈫�</span></a></li>
+ <li><a href="#cut">鍓垏 <span class="shortcut">鈱榅;</span></a></li>
+ <li><a href="#copy">澶嶅埗<span class="shortcut">鈱楥</span></a></li>
+ <li><a href="#paste">绮樿创<span class="shortcut">鈱榁</span></a></li>
+ <li class="separator"><a href="#delete">鍒犻櫎<span class="shortcut">鈱�</span></a></li>
+ <li class="separator"><a href="#group">鍒嗙粍<span class="shortcut">鈱楪</span></a></li>
+ <li><a href="#ungroup">鍙栨秷鍒嗙粍<span class="shortcut">鈱樷嚙G</span></a></li>
+ <li class="separator"><a href="#move_front">缃簬鏈�涓婃柟<span class="shortcut">鈱樷嚙鈫�</span></a></li>
+ <li><a href="#move_up">缃墠涓�灞�<span class="shortcut">鈱樷啈</span></a></li>
+ <li><a href="#move_down">缃悗涓�灞�<span class="shortcut">鈱樷啌</span></a></li>
+ <li><a href="#move_back">缃簬鏈�涓嬫柟<span class="shortcut">鈱樷嚙鈫�</span></a></li>
</ul>
</body>
diff --git a/web/public/SVGOrigin/Method-Draw-master/editor/lib/jgraduate/jquery.jgraduate.js b/web/public/SVGOrigin/Method-Draw-master/editor/lib/jgraduate/jquery.jgraduate.js
index 1aa6dfa..ab6890a 100644
--- a/web/public/SVGOrigin/Method-Draw-master/editor/lib/jgraduate/jquery.jgraduate.js
+++ b/web/public/SVGOrigin/Method-Draw-master/editor/lib/jgraduate/jquery.jgraduate.js
@@ -17,10 +17,10 @@
window: { title: "Pick the start color and opacity for the gradient" },
images: { clientPath: "images/" },
paint: a Paint object,
- newstop: String of value "same", "inverse", "black" or "white"
+ newstop: String of value "same", "inverse", "black" or "white"
OR object with one or both values {color: #Hex color, opac: number 0-1}
}
-
+
- the Paint object is:
Paint {
type: String, // one of "none", "solidColor", "linearGradient", "radialGradient"
@@ -48,9 +48,9 @@
*
*/
-
+
(function() {
-
+
var ns = { svg: 'http://www.w3.org/2000/svg', xlink: 'http://www.w3.org/1999/xlink' };
if(!window.console) {
window.console = new function() {
@@ -59,7 +59,7 @@
};
}
-$.jGraduate = {
+$.jGraduate = {
Paint:
function(opt) {
var options = opt || {};
@@ -157,13 +157,13 @@
var $this = $(this), $settings = $.extend(true, {}, jQuery.fn.jGraduateDefaults, options),
id = $this.attr('id'),
idref = '#'+$this.attr('id')+' ';
-
+
if (!idref)
{
alert('Container element must have an id attribute to maintain unique id strings for sub-elements.');
return;
}
-
+
var okClicked = function() {
switch ( $this.paint.type ) {
case "radialGradient":
@@ -199,146 +199,146 @@
if ($this.paint.type == "none") {
$this.paint = $.jGraduate.Paint({solidColor: 'ffffff'});
}
-
+
$this.addClass('jGraduate_Picker');
$this.html('<ul class="jGraduate_tabs">' +
- '<li class="jGraduate_tab_color jGraduate_tab_current" data-type="col">Solid Color</li>' +
- '<li class="jGraduate_tab_lingrad" data-type="lg">Linear Gradient</li>' +
- '<li class="jGraduate_tab_radgrad" data-type="rg">Radial Gradient</li>' +
+ '<li class="jGraduate_tab_color jGraduate_tab_current" data-type="col">棰滆壊</li>' +
+ '<li class="jGraduate_tab_lingrad" data-type="lg">绾挎�ф笎鍙�</li>' +
+ '<li class="jGraduate_tab_radgrad" data-type="rg">寰勫悜娓愬彉</li>' +
'</ul>' +
'<div class="jGraduate_colPick"></div>' +
'<div class="jGraduate_gradPick"></div>' +
'<div class="jGraduate_LightBox"></div>' +
'<div id="' + id + '_jGraduate_stopPicker" class="jGraduate_stopPicker"></div>'
-
-
+
+
);
var colPicker = $(idref + '> .jGraduate_colPick');
var gradPicker = $(idref + '> .jGraduate_gradPick');
-
+
gradPicker.html(
'<div id="' + id + '_jGraduate_Swatch" class="jGraduate_Swatch">' +
'<h2 class="jGraduate_Title">' + $settings.window.pickerTitle + '</h2>' +
'<div id="' + id + '_jGraduate_GradContainer" class="jGraduate_GradContainer"></div>' +
'<div id="' + id + '_jGraduate_StopSlider" class="jGraduate_StopSlider"></div>' +
- '</div>' +
+ '</div>' +
'<div class="jGraduate_Form jGraduate_Points jGraduate_lg_field">' +
'<div class="jGraduate_StopSection">' +
- '<label class="jGraduate_Form_Heading">Begin Point</label>' +
+ '<label class="jGraduate_Form_Heading">璧风偣</label>' +
'<div class="jGraduate_Form_Section">' +
'<label>x:</label>' +
- '<input type="text" id="' + id + '_jGraduate_x1" size="3" title="Enter starting x value between 0.0 and 1.0"/>' +
+ '<input type="text" id="' + id + '_jGraduate_x1" size="3" title="杈撳叆浠嬩簬0.0鍜�1.0涔嬮棿鐨勮捣濮媥鍊�"/>' +
'<label> y:</label>' +
- '<input type="text" id="' + id + '_jGraduate_y1" size="3" title="Enter starting y value between 0.0 and 1.0"/>' +
+ '<input type="text" id="' + id + '_jGraduate_y1" size="3" title="杈撳叆浠嬩簬0.0鍜�1.0涔嬮棿鐨勮捣濮媦鍊�"/>' +
'</div>' +
'</div>' +
'<div class="jGraduate_StopSection">' +
- '<label class="jGraduate_Form_Heading">End Point</label>' +
+ '<label class="jGraduate_Form_Heading">缁堢偣</label>' +
'<div class="jGraduate_Form_Section">' +
'<label>x:</label>' +
- '<input type="text" id="' + id + '_jGraduate_x2" size="3" title="Enter ending x value between 0.0 and 1.0"/>' +
+ '<input type="text" id="' + id + '_jGraduate_x2" size="3" title="杈撳叆浠嬩簬0.0鍜�1.0涔嬮棿鐨勮捣濮媥鍊�"/>' +
'<label> y:</label>' +
- '<input type="text" id="' + id + '_jGraduate_y2" size="3" title="Enter ending y value between 0.0 and 1.0"/>' +
+ '<input type="text" id="' + id + '_jGraduate_y2" size="3" title="杈撳叆浠嬩簬0.0鍜�1.0涔嬮棿鐨勮捣濮媦鍊�"/>' +
'</div>' +
'</div>' +
'</div>' +
'<div class="jGraduate_Form jGraduate_Points jGraduate_rg_field">' +
'<div class="jGraduate_StopSection">' +
- '<label class="jGraduate_Form_Heading">Center Point</label>' +
+ '<label class="jGraduate_Form_Heading">涓績鐐�</label>' +
'<div class="jGraduate_Form_Section">' +
'<label>x:</label>' +
- '<input type="text" id="' + id + '_jGraduate_cx" size="3" title="Enter x value between 0.0 and 1.0"/>' +
+ '<input type="text" id="' + id + '_jGraduate_cx" size="3" title="杈撳叆浠嬩簬0.0鍜�1.0涔嬮棿鐨勮捣濮媥鍊�"/>' +
'<label> y:</label>' +
- '<input type="text" id="' + id + '_jGraduate_cy" size="3" title="Enter y value between 0.0 and 1.0"/>' +
+ '<input type="text" id="' + id + '_jGraduate_cy" size="3" title="杈撳叆浠嬩簬0.0鍜�1.0涔嬮棿鐨勮捣濮媦鍊�"/>' +
'</div>' +
'</div>' +
'<div class="jGraduate_StopSection">' +
- '<label class="jGraduate_Form_Heading">Focal Point</label>' +
+ '<label class="jGraduate_Form_Heading">鐒︾偣</label>' +
'<div class="jGraduate_Form_Section">' +
'<label>Match center: <input type="checkbox" checked="checked" id="' + id + '_jGraduate_match_ctr"/></label><br/>' +
'<label>x:</label>' +
- '<input type="text" id="' + id + '_jGraduate_fx" size="3" title="Enter x value between 0.0 and 1.0"/>' +
+ '<input type="text" id="' + id + '_jGraduate_fx" size="3" title="杈撳叆浠嬩簬0.0鍜�1.0涔嬮棿鐨勮捣濮媥鍊�"/>' +
'<label> y:</label>' +
- '<input type="text" id="' + id + '_jGraduate_fy" size="3" title="Enter y value between 0.0 and 1.0"/>' +
+ '<input type="text" id="' + id + '_jGraduate_fy" size="3" title="杈撳叆浠嬩簬0.0鍜�1.0涔嬮棿鐨勮捣濮媦鍊�"/>' +
'</div>' +
'</div>' +
'</div>' +
'<div class="jGraduate_StopSection jGraduate_SpreadMethod">' +
- '<label class="jGraduate_Form_Heading">Spread method</label>' +
+ '<label class="jGraduate_Form_Heading">鎵╂暎鏂瑰紡</label>' +
'<div class="jGraduate_Form_Section">' +
'<select class="jGraduate_spreadMethod">' +
- '<option value=pad selected>Pad</option>' +
- '<option value=reflect>Reflect</option>' +
- '<option value=repeat>Repeat</option>' +
- '</select>' +
+ '<option value=pad selected>寤堕暱</option>' +
+ '<option value=reflect>鏄犲皠</option>' +
+ '<option value=repeat>閲嶅</option>' +
+ '</select>' +
'</div>' +
'</div>' +
'<div class="jGraduate_Form">' +
'<div class="jGraduate_Slider jGraduate_RadiusField jGraduate_rg_field">' +
- '<label class="prelabel">Radius:</label>' +
+ '<label class="prelabel">鍗婂緞:</label>' +
'<div id="' + id + '_jGraduate_Radius" class="jGraduate_SliderBar jGraduate_Radius" title="Click to set radius">' +
'<img id="' + id + '_jGraduate_RadiusArrows" class="jGraduate_RadiusArrows" src="' + $settings.images.clientPath + 'rangearrows2.gif">' +
'</div>' +
- '<label><input type="text" id="' + id + '_jGraduate_RadiusInput" size="3" value="100"/>%</label>' +
+ '<label><input type="text" id="' + id + '_jGraduate_RadiusInput" size="3" value="100"/>%</label>' +
'</div>' +
'<div class="jGraduate_Slider jGraduate_EllipField jGraduate_rg_field">' +
- '<label class="prelabel">Ellip:</label>' +
+ '<label class="prelabel">妞渾:</label>' +
'<div id="' + id + '_jGraduate_Ellip" class="jGraduate_SliderBar jGraduate_Ellip" title="Click to set Ellip">' +
'<img id="' + id + '_jGraduate_EllipArrows" class="jGraduate_EllipArrows" src="' + $settings.images.clientPath + 'rangearrows2.gif">' +
'</div>' +
- '<label><input type="text" id="' + id + '_jGraduate_EllipInput" size="3" value="0"/>%</label>' +
+ '<label><input type="text" id="' + id + '_jGraduate_EllipInput" size="3" value="0"/>%</label>' +
'</div>' +
'<div class="jGraduate_Slider jGraduate_AngleField jGraduate_rg_field">' +
- '<label class="prelabel">Angle:</label>' +
+ '<label class="prelabel">瑙掑害:</label>' +
'<div id="' + id + '_jGraduate_Angle" class="jGraduate_SliderBar jGraduate_Angle" title="Click to set Angle">' +
'<img id="' + id + '_jGraduate_AngleArrows" class="jGraduate_AngleArrows" src="' + $settings.images.clientPath + 'rangearrows2.gif">' +
'</div>' +
- '<label><input type="text" id="' + id + '_jGraduate_AngleInput" size="3" value="0"/>潞 </label>' +
+ '<label><input type="text" id="' + id + '_jGraduate_AngleInput" size="3" value="0"/>潞 </label>' +
'</div>' +
'<div class="jGraduate_Slider jGraduate_OpacField">' +
- '<label class="prelabel">Opac:</label>' +
+ '<label class="prelabel">閫忔槑搴�:</label>' +
'<div id="' + id + '_jGraduate_Opac" class="jGraduate_SliderBar jGraduate_Opac" title="Click to set Opac">' +
'<img id="' + id + '_jGraduate_OpacArrows" class="jGraduate_OpacArrows" src="' + $settings.images.clientPath + 'rangearrows2.gif">' +
'</div>' +
- '<label><input type="text" id="' + id + '_jGraduate_OpacInput" size="3" value="100"/>%</label>' +
+ '<label><input type="text" id="' + id + '_jGraduate_OpacInput" size="3" value="100"/>%</label>' +
'</div>' +
'</div>' +
'<div class="jGraduate_OkCancel">' +
'<input type="button" id="' + id + '_jGraduate_Ok" class="jGraduate_Ok" value="OK"/>' +
'<input type="button" id="' + id + '_jGraduate_Cancel" class="jGraduate_Cancel" value="Cancel"/>' +
'</div>');
-
+
// --------------
// Set up all the SVG elements (the gradient, stops and rectangle)
var MAX = 256, MARGINX = 0, MARGINY = 0, STOP_RADIUS = 15/2,
SIZEX = MAX - 2*MARGINX, SIZEY = MAX - 2*MARGINY;
-
- var curType, curGradient, previewRect;
-
+
+ var curType, curGradient, previewRect;
+
var attr_input = {};
-
+
var SLIDERW = 145;
$('.jGraduate_SliderBar').width(SLIDERW);
-
+
var container = $('#' + id+'_jGraduate_GradContainer')[0];
-
+
var svg = mkElem('svg', {
id: id + '_jgraduate_svg',
width: MAX,
height: MAX,
xmlns: ns.svg
}, container);
-
- // if we are sent a gradient, import it
-
+
+ // if we are sent a gradient, import it
+
curType = curType || $this.paint.type;
-
+
var grad = curGradient = $this.paint[curType];
-
+
var gradalpha = $this.paint.alpha;
-
+
var isSolid = curType === 'solidColor';
-
+
// Make any missing gradients
switch ( curType ) {
case "solidColor":
@@ -365,18 +365,18 @@
y2: 0
}, svg);
}
-
+
if(isSolid) {
grad = curGradient = $('#' + id + '_lg_jgraduate_grad')[0];
var color = $this.paint[curType];
mkStop(0, '#' + color, 1);
-
+
var type = typeof $settings.newstop;
-
+
if(type === 'string') {
switch ( $settings.newstop ) {
case 'same':
- mkStop(1, '#' + color, 1);
+ mkStop(1, '#' + color, 1);
break;
case 'inverse':
@@ -393,11 +393,11 @@
}
mkStop(1, '#' + inverted, 1);
break;
-
+
case 'white':
mkStop(1, '#ffffff', 1);
break;
-
+
case 'black':
mkStop(1, '#000000', 1);
break;
@@ -408,18 +408,18 @@
}
}
-
+
var x1 = parseFloat(grad.getAttribute('x1')||0.0),
y1 = parseFloat(grad.getAttribute('y1')||0.0),
x2 = parseFloat(grad.getAttribute('x2')||1.0),
y2 = parseFloat(grad.getAttribute('y2')||0.0);
-
+
var cx = parseFloat(grad.getAttribute('cx')||0.5),
cy = parseFloat(grad.getAttribute('cy')||0.5),
fx = parseFloat(grad.getAttribute('fx')|| cx),
fy = parseFloat(grad.getAttribute('fy')|| cy);
-
+
var previewRect = mkElem('rect', {
id: id + '_jgraduate_rect',
x: MARGINX,
@@ -429,7 +429,7 @@
fill: 'url(#'+id+'_jgraduate_grad)',
'fill-opacity': gradalpha/100
}, svg);
-
+
// stop visuals created here
var beginCoord = $('<div/>').attr({
'class': 'grad_coord jGraduate_lg_field',
@@ -438,12 +438,12 @@
top: y1 * MAX,
left: x1 * MAX
}).data('coord', 'start').appendTo(container);
-
+
var endCoord = beginCoord.clone().text(2).css({
top: y2 * MAX,
left: x2 * MAX
}).attr('title', 'End stop').data('coord', 'end').appendTo(container);
-
+
var centerCoord = $('<div/>').attr({
'class': 'grad_coord jGraduate_rg_field',
title: 'Center stop'
@@ -451,22 +451,22 @@
top: cy * MAX,
left: cx * MAX
}).data('coord', 'center').appendTo(container);
-
+
var focusCoord = centerCoord.clone().text('F').css({
top: fy * MAX,
left: fx * MAX,
display: 'none'
}).attr('title', 'Focus point').data('coord', 'focus').appendTo(container);
-
+
focusCoord[0].id = id + '_jGraduate_focusCoord';
-
+
var coords = $(idref + ' .grad_coord');
-
+
$.each(['x1', 'y1', 'x2', 'y2', 'cx', 'cy', 'fx', 'fy'], function(i, attr) {
var attrval = curGradient.getAttribute(attr);
-
+
var isRadial = isNaN(attr[1]);
-
+
if(!attrval) {
// Set defaults
if(isRadial) {
@@ -483,25 +483,25 @@
.change(function() {
// TODO: Support values < 0 and > 1 (zoomable preview?)
if (isNaN(parseFloat(this.value)) || this.value < 0) {
- this.value = 0.0;
+ this.value = 0.0;
} else if(this.value > 1) {
this.value = 1.0;
}
-
+
if(!(attr[0] === 'f' && !showFocus)) {
if(isRadial && curType === 'radialGradient' || !isRadial && curType === 'linearGradient') {
curGradient.setAttribute(attr, this.value);
}
}
-
+
if(isRadial) {
var $elem = attr[0] === "c" ? centerCoord : focusCoord;
} else {
- var $elem = attr[1] === "1" ? beginCoord : endCoord;
+ var $elem = attr[1] === "1" ? beginCoord : endCoord;
}
-
+
var cssName = attr.indexOf('x') >= 0 ? 'left' : 'top';
-
+
$elem.css(cssName, this.value * MAX);
}).change();
});
@@ -516,15 +516,15 @@
curGradient.appendChild(stop);
}
if(opac === null) opac = 1;
-
+
var picker_d = 'M-6.2,0.9c3.6-4,6.7-4.3,6.7-12.4c-0.2,7.9,3.1,8.8,6.5,12.4c3.5,3.8,2.9,9.6,0,12.3c-3.1,2.8-10.4,2.7-13.2,0C-9.6,9.9-9.4,4.4-6.2,0.9z';
-
+
var pathbg = mkElem('path',{
d: picker_d,
fill: 'url(#jGraduate_trans)',
transform: 'translate(' + (10 + n * MAX) + ', 26)'
}, stopGroup);
-
+
var path = mkElem('path',{
d: picker_d,
fill: color,
@@ -542,7 +542,7 @@
e.preventDefault();
return false;
}).data('stop', stop).data('bg', pathbg).dblclick(function() {
- $('div.jGraduate_LightBox').show();
+ $('div.jGraduate_LightBox').show();
var colorhandle = this;
var stopOpacity = +stop.getAttribute('stop-opacity') || 1;
var stopColor = stop.getAttribute('stop-color') || 1;
@@ -567,7 +567,7 @@
$('#'+id+'_jGraduate_stopPicker').hide();
});
});
-
+
$(curGradient).find('stop').each(function() {
var cur_s = $(this);
if(+this.getAttribute('offset') > n) {
@@ -586,7 +586,7 @@
if(sel) selectStop(path);
return stop;
}
-
+
function remStop() {
delStop.setAttribute('display', 'none');
var path = $(cur_stop);
@@ -594,14 +594,14 @@
var bg = path.data('bg');
$([cur_stop, stop, bg]).remove();
}
-
-
+
+
var stops, stopGroup;
-
+
var stopMakerDiv = $('#' + id + '_jGraduate_StopSlider');
var cur_stop, stopGroup, stopMakerSVG, drag;
-
+
var delStop = mkElem('path',{
d:'m9.75,-6l-19.5,19.5m0,-19.5l19.5,19.5',
fill:'none',
@@ -610,7 +610,7 @@
display:'none'
}, stopMakerSVG);
-
+
function selectStop(item) {
if(cur_stop) cur_stop.setAttribute('stroke', '#000');
item.setAttribute('stroke', 'blue');
@@ -620,9 +620,9 @@
// opac_select.val(cur_stop.attr('fill-opacity') || 1);
// root.append(delStop);
}
-
+
var stop_offset;
-
+
function remDrags() {
$win.unbind('mousemove', dragColor);
if(delStop.getAttribute('display') !== 'none') {
@@ -630,11 +630,11 @@
}
drag = null;
}
-
+
var scale_x = 1, scale_y = 1, angle = 0;
var c_x = cx;
var c_y = cy;
-
+
function xform() {
var rot = angle?'rotate(' + angle + ',' + c_x + ',' + c_y + ') ':'';
if(scale_x === 1 && scale_y === 1) {
@@ -647,7 +647,7 @@
// $('#ang').removeClass('dis');
}
}
-
+
function dragColor(evt) {
var x = evt.pageX - stop_offset.left;
@@ -661,15 +661,15 @@
} else {
delStop.setAttribute('display', 'none');
}
-
+
drag.setAttribute('transform', xf_str);
$.data(drag, 'bg').setAttribute('transform', xf_str);
var stop = $.data(drag, 'stop');
var s_x = (x - 10) / MAX;
-
+
stop.setAttribute('offset', s_x);
var last = 0;
-
+
$(curGradient).find('stop').each(function(i) {
var cur = this.getAttribute('offset');
var t = $(this);
@@ -679,30 +679,30 @@
}
last = cur;
});
-
+
}
-
+
stopMakerSVG = mkElem('svg', {
width: '100%',
height: 45
}, stopMakerDiv[0]);
-
+
var trans_pattern = mkElem('pattern', {
width: 16,
height: 16,
patternUnits: 'userSpaceOnUse',
id: 'jGraduate_trans'
}, stopMakerSVG);
-
+
var trans_img = mkElem('image', {
width: 16,
height: 16
}, trans_pattern);
-
+
var bg_image = $settings.images.clientPath + 'map-opacity.png';
trans_img.setAttributeNS(ns.xlink, 'xlink:href', bg_image);
-
+
$(stopMakerSVG).on("click touchstart", function(evt) {
stop_offset = stopMakerDiv.offset();
var target = evt.target;
@@ -712,13 +712,13 @@
mkStop(x / MAX, 0, 0, true);
evt.stopPropagation();
});
-
+
$(stopMakerSVG).mouseover(function() {
stopMakerSVG.appendChild(delStop);
});
-
+
stopGroup = mkElem('g', {}, stopMakerSVG);
-
+
mkElem('line', {
x1: 10,
y1: 15,
@@ -727,16 +727,16 @@
'stroke-width': 2,
stroke: '#000'
}, stopMakerSVG);
-
-
+
+
var spreadMethodOpt = gradPicker.find('.jGraduate_spreadMethod').change(function() {
curGradient.setAttribute('spreadMethod', $(this).val());
});
-
-
+
+
// handle dragging the stop around the swatch
var draggingCoord = null;
-
+
var onCoordDrag = function(evt) {
var x = evt.pageX - offset.left;
var y = evt.pageY - offset.top;
@@ -744,16 +744,16 @@
// clamp stop to the swatch
x = x < 0 ? 0 : x > MAX ? MAX : x;
y = y < 0 ? 0 : y > MAX ? MAX : y;
-
+
draggingCoord.css('left', x).css('top', y);
- // calculate stop offset
+ // calculate stop offset
var fracx = x / SIZEX;
var fracy = y / SIZEY;
-
+
var type = draggingCoord.data('coord');
var grad = curGradient;
-
+
switch ( type ) {
case 'start':
attr_input.x1.val(fracx);
@@ -783,22 +783,22 @@
grad.setAttribute('fy', fracy);
xform();
}
-
+
evt.preventDefault();
}
-
+
var onCoordUp = function() {
draggingCoord = null;
$win.unbind('mousemove', onCoordDrag).unbind('mouseup', onCoordUp);
}
-
+
// Linear gradient
// (function() {
-
+
stops = curGradient.getElementsByTagNameNS(ns.svg, 'stop');
- // if there are not at least two stops, then
+ // if there are not at least two stops, then
if (numstops < 2) {
while (numstops < 2) {
curGradient.appendChild( document.createElementNS(ns.svg, 'stop') );
@@ -806,22 +806,22 @@
}
stops = curGradient.getElementsByTagNameNS(ns.svg, 'stop');
}
-
- var numstops = stops.length;
+
+ var numstops = stops.length;
for(var i = 0; i < numstops; i++) {
mkStop(0, 0, 0, 0, stops[i]);
}
-
+
spreadMethodOpt.val(curGradient.getAttribute('spreadMethod') || 'pad');
var offset;
-
+
// No match, so show focus point
- var showFocus = false;
-
+ var showFocus = false;
+
previewRect.setAttribute('fill-opacity', gradalpha/100);
-
+
$('#' + id + ' div.grad_coord').mousedown(function(evt) {
evt.preventDefault();
draggingCoord = $(this);
@@ -829,7 +829,7 @@
offset = draggingCoord.parent().offset();
$win.mousemove(onCoordDrag).mouseup(onCoordUp);
});
-
+
// bind GUI elements
$('#'+id+'_jGraduate_Ok').bind('click touchstart', function() {
$this.paint.type = curType;
@@ -843,7 +843,7 @@
if(curType === 'radialGradient') {
if(showFocus) {
- focusCoord.show();
+ focusCoord.show();
} else {
focusCoord.hide();
attr_input.fx.val("");
@@ -852,9 +852,9 @@
}
$("#" + id + "_jGraduate_match_ctr")[0].checked = !showFocus;
-
+
var lastfx, lastfy;
-
+
$("#" + id + "_jGraduate_match_ctr").change(function() {
showFocus = !this.checked;
focusCoord.toggle(showFocus);
@@ -875,10 +875,10 @@
attr_input.fy.val(fy);
}
});
-
+
var stops = curGradient.getElementsByTagNameNS(ns.svg, 'stop');
var numstops = stops.length;
- // if there are not at least two stops, then
+ // if there are not at least two stops, then
if (numstops < 2) {
while (numstops < 2) {
curGradient.appendChild( document.createElementNS(ns.svg, 'stop') );
@@ -886,9 +886,9 @@
}
stops = curGradient.getElementsByTagNameNS(ns.svg, 'stop');
}
-
+
var slider;
-
+
var setSlider = function(e) {
var offset = slider.offset;
var div = slider.parent;
@@ -897,7 +897,7 @@
if (x <= 0) x = 0;
var posx = x - 5;
x /= SLIDERW;
-
+
switch ( slider.type ) {
case 'radius':
x = Math.pow(x * 2, 2.5);
@@ -918,7 +918,7 @@
x /= .5; // 2
x = 2 - x;
scale_y = x <= 0 ? .01 : x;
- }
+ }
xform();
x -= 1;
if(scale_y === x + 1) {
@@ -936,9 +936,9 @@
x = Math.round(x*100);
slider.input.val(x);
};
-
+
var ellip_val = 0, angle_val = 0;
-
+
if(curType === 'radialGradient') {
var tlist = curGradient.gradientTransform.baseVal;
if(tlist.numberOfItems === 2) {
@@ -947,33 +947,33 @@
if(t.type === 2 && s.type === 3) {
var m = s.matrix;
if(m.a !== 1) {
- ellip_val = Math.round(-(1 - m.a) * 100);
+ ellip_val = Math.round(-(1 - m.a) * 100);
} else if(m.d !== 1) {
ellip_val = Math.round((1 - m.d) * 100);
- }
+ }
}
} else if(tlist.numberOfItems === 3) {
// Assume [R][T][S]
var r = tlist.getItem(0);
var t = tlist.getItem(1);
var s = tlist.getItem(2);
-
- if(r.type === 4
- && t.type === 2
+
+ if(r.type === 4
+ && t.type === 2
&& s.type === 3) {
angle_val = Math.round(r.angle);
var m = s.matrix;
if(m.a !== 1) {
- ellip_val = Math.round(-(1 - m.a) * 100);
+ ellip_val = Math.round(-(1 - m.a) * 100);
} else if(m.d !== 1) {
ellip_val = Math.round((1 - m.d) * 100);
- }
-
+ }
+
}
}
}
-
+
var sliders = {
radius: {
handle: '#' + id + '_jGraduate_RadiusArrows',
@@ -996,7 +996,7 @@
val: angle_val
}
}
-
+
$.each(sliders, function(type, data) {
var handle = $(data.handle);
handle.mousedown(function(evt) {
@@ -1011,7 +1011,7 @@
$win.mousemove(dragSlider).mouseup(stopSlider);
evt.preventDefault();
});
-
+
$(data.input).val(data.val).change(function() {
var val = +this.value;
var xpos = 0;
@@ -1021,13 +1021,13 @@
if(isRad) curGradient.setAttribute('r', val / 100);
xpos = (Math.pow(val / 100, 1 / 2.5) / 2) * SLIDERW;
break;
-
+
case 'opacity':
$this.paint.alpha = val;
previewRect.setAttribute('fill-opacity', val / 100);
xpos = val * (SLIDERW / 100);
break;
-
+
case 'ellip':
scale_x = scale_y = 1;
if(val === 0) {
@@ -1044,7 +1044,7 @@
xpos = SLIDERW * ((val + 100) / 2) / 100;
if(isRad) xform();
break;
-
+
case 'angle':
angle = val;
xpos = angle / 180;
@@ -1060,33 +1060,33 @@
handle.css({'margin-left': xpos - 5});
}).change();
});
-
+
var dragSlider = function(evt) {
setSlider(evt);
evt.preventDefault();
};
-
+
var stopSlider = function(evt) {
$win.unbind('mousemove', dragSlider).unbind('mouseup', stopSlider);
slider = null;
};
-
-
+
+
// --------------
var thisAlpha = ($this.paint.alpha*255/100).toString(16);
while (thisAlpha.length < 2) { thisAlpha = "0" + thisAlpha; }
thisAlpha = thisAlpha.split(".")[0];
color = $this.paint.solidColor == "none" ? "" : $this.paint.solidColor + thisAlpha;
-
+
if(!isSolid) {
color = stops[0].getAttribute('stop-color');
}
-
+
// This should be done somewhere else, probably
$.extend($.fn.jPicker.defaults.window, {
alphaSupport: true, effects: {type: 'show',speed: 0}
});
-
+
colPicker.jPicker(
{
window: { title: $settings.window.pickerTitle },
@@ -1098,13 +1098,13 @@
$this.paint.alpha = color.val('ahex') ? Math.round((color.val('a') / 255) * 100) : 100;
$this.paint.solidColor = color.val('hex') ? color.val('hex') : "none";
$this.paint.radialGradient = null;
- okClicked();
+ okClicked();
},
null,
function(){ cancelClicked(); }
);
-
+
var tabs = $(idref + ' .jGraduate_tabs li');
tabs.on("click touchstart", function() {
tabs.removeClass('jGraduate_tab_current');
@@ -1116,19 +1116,19 @@
// Show/hide appropriate fields
$('.jGraduate_' + type + '_field').show();
$('.jGraduate_' + (type === 'lg' ? 'rg' : 'lg') + '_field').hide();
-
+
$('#' + id + '_jgraduate_rect')[0].setAttribute('fill', 'url(#' + id + '_' + type + '_jgraduate_grad)');
-
+
// Copy stops
-
+
curType = type === 'lg' ? 'linearGradient' : 'radialGradient';
-
+
$('#' + id + '_jGraduate_OpacInput').val($this.paint.alpha).change();
-
+
var newGrad = $('#' + id + '_' + type + '_jgraduate_grad')[0];
-
+
if(curGradient !== newGrad) {
- var cur_stops = $(curGradient).find('stop');
+ var cur_stops = $(curGradient).find('stop');
$(newGrad).empty().append(cur_stops);
curGradient = newGrad;
var sm = spreadMethodOpt.val();
@@ -1159,11 +1159,11 @@
break;
}
$this.show();
-
+
// jPicker will try to show after a 0ms timeout, so need to fire this after that
setTimeout(function() {
- tab.addClass('jGraduate_tab_current').click();
+ tab.addClass('jGraduate_tab_current').click();
}, 10);
});
};
-})();
\ No newline at end of file
+})();
diff --git a/web/public/SVGOrigin/Method-Draw-master/editor/src/method-draw.js b/web/public/SVGOrigin/Method-Draw-master/editor/src/method-draw.js
index fb74c2d..2516a67 100644
--- a/web/public/SVGOrigin/Method-Draw-master/editor/src/method-draw.js
+++ b/web/public/SVGOrigin/Method-Draw-master/editor/src/method-draw.js
@@ -29,7 +29,7 @@
var is_ready = false;
curConfig = {
canvas_expansion: 1,
- dimensions: [580,400],
+ dimensions: [200,200],
initFill: {color: 'fff', opacity: 1},
initStroke: {width: 1.5, color: '000', opacity: 1},
initOpacity: 1,
@@ -83,7 +83,7 @@
"noteTheseIssues": "Also note the following issues: ",
"unsavedChanges": "There are unsaved changes.",
"enterNewLinkURL": "Enter the new hyperlink URL",
- "errorLoadingSVG": "Error: Unable to load SVG data",
+ "errorLoadingSVG": "閿欒: 鏃犳硶璇诲彇SVG鏁版嵁",
"URLloadFail": "Unable to load from URL",
"retrieving": 'Retrieving "%s" ...'
}
@@ -4046,8 +4046,10 @@
is_ready = true;
var data = window.parent.document.getElementById("svgContentId").value
svgCanvas.clear()
- window.methodDraw.loadSvgString(data)
- window.methodDraw.updateCanvas()
+ if(data){
+ window.methodDraw.loadSvgString(data)
+ window.methodDraw.updateCanvas()
+ }
// alert(data+'inputValue')
};
diff --git a/web/src/views/modules/sysPictureBase/SysPictureBase-AddOrUpdate.vue b/web/src/views/modules/sysPictureBase/SysPictureBase-AddOrUpdate.vue
index 412fe0c..6a2a3dd 100644
--- a/web/src/views/modules/sysPictureBase/SysPictureBase-AddOrUpdate.vue
+++ b/web/src/views/modules/sysPictureBase/SysPictureBase-AddOrUpdate.vue
@@ -114,8 +114,9 @@
async uploadSvgContent(event) {
const iframeWindow = this.$refs.myIframe.contentWindow
const file = event.target.files[0];
+ console.log(file,'file file')
// 鍙互鍦ㄨ繖閲岃繘琛岃繘涓�姝ョ殑鏂囦欢澶勭悊锛屾瘮濡傝鍙栨枃浠跺唴瀹圭瓑鎿嶄綔
- if (file) {
+ if (file && file.type==='image/svg+xml') {
const reader = new FileReader();
reader.onload = (e) => {
const fileContent = e.target.result;
@@ -123,6 +124,9 @@
iframeWindow.setSvgContent(fileContent)
}
reader.readAsText(file); // 浠ユ枃鏈舰寮忚鍙栨枃浠跺唴瀹�
+ }else {
+ this.$message({message: '璇烽�夋嫨SVG鍥剧墖', type: 'warning'})
+ return false; // 鍙栨秷鎿嶄綔
}
// iframeWindow.setSvgContent(data)
// 浣跨敤form琛ㄥ崟鐨勬暟鎹牸寮�
--
Gitblit v1.9.1