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