JavaScript实战02

// jQuery不支持直接创建svg图形，定义一个函数来创建svg图像对应的jQuery对象。
var ns = 'http://www.w3.org/2000/svg';
var $s = function (str) {
  return $(document.createElementNS(ns, str));
}

// 使用方法形如 $s('rect').a().b()...;

appendComponent（）方法：

jQuery.prototype.appendComponent = function (componentName) {
  let createObj = function (objAttr) {
    let obj = $s(objAttr.mark);
    for (let attrId in objAttr.attr) {
      obj.attr(attrId, objAttr.attr[attrId]);
    }
    obj.attr('stroke', '#A00000').attr('stroke-width', '2');
    return obj;
  }

  svgGroup = $s('g');
  for (let i = 0; i < schComponents[componentName].length; ++i) {
    svgGroup.append(createObj(schComponents[componentName][i]));
  }
  return this.append(svgGroup);
}

createComponent（）方法：

function createComponent(componentName, componentX, componentY) {
  let component = $s('g').appendComponent(componentName);
  //创建一个svg元素，在这个svg块里添加名为componentName的元器件，返回值是添加的元器件元素。
  let props = component.getProps('pose');
  //获取这个元器件的位置
  [props.index, props.name] = [schSchematic.length, componentName];
  //给props添加index和name属性 属性值分别为当前元器件数组的长度（对应的下标）和当前元器件元素的名字
  [props.x, props.y] = [componentX, componentY];、
  //设置坐标
  props.degree = 0;
  //旋转角度默认为0
  return component.updateTransform();
  //刷新位置
}

drawComponent（）方法：

//在 #svgSch 画出对应的元器件并返回创建的jQuery对象
function drawComponent(componentName, componentX, componentY) {
  let component = createComponent(componentName, componentX, componentY);
  //创建元器件元素
  $('#svgSch').append(component);
  //在对应位置添加元器件
  schSchematic.push(component);
  //再将其加入当前的存储元器件的数组当中
  return component;
  //返回该元器件对象
}

drawButton（）方法：

let schButtonIndex = 0;

//在 #svgButton 画出对应的元器件并返回创建的jQuery对象
function drawButton(componentName) {
  let component = createComponent(
    componentName,
    ((schButtonIndex % schConfig.svg.button.col) + 0.5) * schConfig.svg.button.size,
    (parseInt(schButtonIndex / schConfig.svg.button.col) + 0.5) * schConfig.svg.button.size
  );
  ++schButtonIndex;

  $('#svgButton').append(component);
  return component;
}