Source: control/Svg.js

/**
 * Created by seeker910 on 14-1-6.
 */
Rsd.define('Rsd.control.Svg', {
    extend: 'Rsd.control.Component',
    xtype: 'svg',
    title: '',
    ctrlTagName: 'svg',
    ns: "http://www.w3.org/2000/svg",
    
    /*
    * svg
    * 大小*/
    size:'20 20',
    /*
    * svg 资源名称
    * */
    dsTagName:null,
    /**
     * {viewBox:'',paths:[],fill:''}
     */
    dataSource:null,
    /*
     * @param {object} config
     */
    constructor: function Svg(config) {

        config = config || {};
        this.apply(config);
        
    },
   
    /**
     * 
     */
    onAfterInit:function onAfterInit()
    {
        this.callParent();

        //console.log(this.id,this.ctrl.element);
        if(!Rsd.isEmpty(this.dsTagName) )
        {
            var _rs_svg = Rsd.create('Rsd.data.SvgLoader',{});
            var _data =  _rs_svg.get.apply(_rs_svg,this.dsTagName.split('.'));
            if(Rsd.isEmpty(_data))
            {
                console.error('svg(id:' + this.id + ') given the datasource tag (dsTagName:' + this.dsTagName + ')  is null or not exists.',this);
            }
            else
            {
                this.loadData(_data);
            }
        }

        if(this.dataSource)
        {
            this.loadData(this.dataSource);
        }

        var _desc = this.text||this.dsTagName;
        if (_desc) {
            this.setAttributeNS("desc",_desc);
        }
        this.ctrl.element.style.verticalAlign = "middle";
        this.ctrl.element.style.fill = 'currentColor';
        this.ctrl.element.style.cursor = 'inherit';

        var _list = Rsd.isString(this.size)?this.size.split(' '):this.size;
        if(_list.length == 1)
        {
            this.setAttributeNS("width", _list[0]+ 'px');
            this.setAttributeNS("height", _list[0] +  'px');
        }
        if(_list.length > 1) {
            this.setAttributeNS("width", _list[0]+ 'px');
            this.setAttributeNS("height", _list[1] + 'px');
        } 

        //<svg> title 属性不支持,所以将title放dom上
        if(this.tip)
        {
            this.dom.setAttribute("title", this.tip);
        }
    },
    /*
    *
    * */
    loadData:function loadData(data) {

       var _data = data || this.dataSource ||[];

       if (_data && !Rsd.isEmpty(_data.viewBox)) {

           this.setAttributeNS("viewBox", _data.viewBox);

           if (Rsd.isString(_data.path)) {
               this.addPath(_data.path, _data.fill || 'currentColor');
           }

           if(Rsd.isArray(_data.paths))
           {
               for(var i in _data.paths)
               {
                 if (Rsd.isString(_data.paths[i])) {
                    this.addPath(_data.paths[i], _data.fill || 'currentColor');
                   }
               }
           }
           
       } else {
           console.error('svg(id:'+this.id+') data is error.');
           console.error('data is:',_data);
       }
    },
    /*
     * */
    setAttributeNS: function setAttributeNS(name, value) {

        this.ctrl.element.setAttribute(name,value);

    },
    /*文字
    * */
    addText:function addText(text,params)
    {
        var _txt = document.createElementNS(this.ns, "text");
        _txt.appendChild(document.createTextNode(text));
        for(var p in params)
        {
            _txt.setAttributeNS(null, p, params[p]);
        }

        this.ctrl.element.appendChild(_txt);
        return _txt;
    },
    /*曲线
     * */
    addCurve: function addCurve() {
        console.error('未实现');
    },
    /*
      矩形
     * */
    addRect: function addRect(x, y, width, height, fill, stroke) {
        var _rect = document.createElementNS(this.ns, "rect");
        _rect.setAttributeNS(null, "x", x);
        _rect.setAttributeNS(null, "y", y);
        _rect.setAttributeNS(null, "width", width<0?0:width);
        _rect.setAttributeNS(null, "height", height<0?0:height);
        _rect.setAttributeNS(null, "fill", fill || 'black');
        //_rect.setAttributeNS(null, "style","opacity:0.8" );
        _rect.setAttributeNS(null, "stroke", stroke || 'red');
        this.ctrl.element.appendChild(_rect);
        return _rect;
    },
    /*圆形
     * */
    addCircle: function addCircle(cx, cy, r, fill, stroke) {
        var _circle = document.createElementNS(this.ns, "circle");
        _circle.setAttributeNS(null, "cx", cx);
        _circle.setAttributeNS(null, "cy", cy);
        _circle.setAttributeNS(null, "r", r);
        _circle.setAttributeNS(null, "fill", fill || 'black');
        //_circle.setAttributeNS(null, "style","opacity:0.8" );
        _circle.setAttributeNS(null, "stroke", stroke || 'red');
        this.ctrl.element.appendChild(_circle);
        return _circle;
    },
    /*直线
    * */
    addLine: function addLine(x1, y1, x2, y2, stroke) {
        var _line = document.createElementNS(this.ns, "line");
        _line.setAttributeNS(null, "x1", x1);
        _line.setAttributeNS(null, "y1", y1);
        _line.setAttributeNS(null, "x2", x2);
        _line.setAttributeNS(null, "y2", y2);
        //    _line.setAttributeNS(null, "stroke-width", width|| 1);
        //    _line.setAttributeNS(null, "style","opacity:0.8" );
        _line.setAttributeNS(null, "stroke", stroke || 'red');
        this.ctrl.element.appendChild(_line);
        return _line;
    },
    /*
     * */
    addPath: function addPath(path, fill, stroke) {
       
        var _pathNode = document.createElementNS(this.ns, "path");
        var __pathStr = "";

        if (Rsd.getType(path) == '[object Array]') {
            var _node;
            for (var p in path) 
            {
                _node = path[p];
                __pathStr += ' ' + _node['tag'];
                if (_node['value'] != null) {

                    for (var v in _node['value']) {
                        __pathStr += ' ' + _node['value'][v];
                    }
                }
            }
        } 
        else
         {
            __pathStr = path;
        }
        _pathNode.setAttributeNS(null, "d", __pathStr);
        _pathNode.setAttributeNS(null, "fill", fill || 'black');
        //_path.setAttributeNS(null, "style","opacity:0.8" );
        _pathNode.setAttributeNS(null, "stroke", stroke || 'red'); 
    
        this.ctrl.element.appendChild(_pathNode);

        return _pathNode;
    }

},function(type){

   

});