JavaScript实战02

一时失言乱红尘 2022-06-03 20:46 229阅读 0赞

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