svgEditor

wente

2024-05-22 686e9cb12978d559130f816e5c2d2854a13c2f48

svgEditor

 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 @@
        }
      }
    };
});
});

 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
      }
    }   
    }
  }
});

 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">⌘Z</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">⌘U</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">⌘U</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">⌘X;</span></a></li>
  <li><a href="#copy">Copy<span class="shortcut">⌘C</span></a></li>
  <li><a href="#paste">Paste<span class="shortcut">⌘V</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">⌘G</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">⌘X;</span></a></li>
  <li><a href="#copy">复制<span class="shortcut">⌘C</span></a></li>
  <li><a href="#paste">粘贴<span class="shortcut">⌘V</span></a></li>
  <li class="separator"><a href="#delete">删除<span class="shortcut">⌫</span></a></li>
  <li class="separator"><a href="#group">分组<span class="shortcut">⌘G</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>

 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之间的起始x值"/>' +
                    '<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之间的起始y值"/>' +
                  '</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之间的起始x值"/>' +
                    '<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之间的起始y值"/>' +
                  '</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之间的起始x值"/>' +
              '<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之间的起始y值"/>' +
            '</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之间的起始x值"/>' +
              '<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之间的起始y值"/>' +
            '</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"/>º&nbsp;</label>' + 
            '<label><input type="text" id="' + id + '_jGraduate_AngleInput" size="3" value="0"/>º&nbsp;</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);
    });
  };
})();
})();

 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')
    };


 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表单的数据格式