JAVASCRIPT SVG 画图

最新推荐文章于 2023-03-17 21:30:08 发布

weixin_33875839

最新推荐文章于 2023-03-17 21:30:08 发布

阅读量136

点赞数

文章标签： javascript php ViewUI

原文链接：https://my.oschina.net/haison/blog/842908

版权

为什么80%的码农都做不了架构师？>>>

(function(){
	function _each(obj,func){
		for(var i=0;i<obj.length;i++){
			func.call(this,obj[i]);
		}
	}
	function _create(name,attributes){
		var element = document.createElementNS('http://www.w3.org/2000/svg',name);
		var attr = attributes||{};
		for(p in attr){
			element.setAttribute(p,attr[p]);
		}
		return element;
	}
	function $(name){
		return document.getElementById(name)||document.getElementsByTagName(name);
	}
	
	var Rect= function(text,attributes){
		this.text=text;
		if(attributes){
			this.target=_create('rect');
			for(name in attributes){
				this[name]=attributes[name];
				this.target.setAttribute(name,attributes[name]);
			}
		}
	}
	Rect.prototype.points=function(width){
		var w=width||4;
		var data=new Array();
		data.push({x:this.x-2,y:this.y-2},{x:this.x-2,y:this.y-2+this.height/2},{x:this.x-2,y:this.y-2+this.height});
		data.push({x:this.x-2+this.width/2,y:this.y-2},{x:this.x-2+this.width/2,y:this.y-2+this.height});
		data.push({x:this.x-2+this.width,y:this.y-2},{x:this.x-2+this.width,y:this.y-2+this.height/2},{x:this.x-2+this.width,y:this.y-2+this.height});
		var group=_create('g');
		_each(data, function(d){
			d['width']=w;
			d['height']=w;
			console.log(d);
			var point = new Rect('',d);
			group.appendChild(point.draw());
		});
		return group;
	}
	Rect.prototype.draw=function(style){
		if(!this.target){
			this.target=_create('rect',{x:10,y:10,width:100,height:30});
		}
		if(style){
			var t=new Array();
			for(name in style){
				t.push(name+':'+style[name]);
			}
			this.target.setAttribute('style',t.join(';'));
		}
		return this.target;
	}
	var rect = new Rect('this is a test',{x:10,y:10,width:100,height:50});
	var obj = rect.draw({fill:'#efefef','stroke-width':1,'stroke':'gray'});
	$("canvos").appendChild(obj);
	$("btn").onclick=function(){
		$("canvos").appendChild(rect.points());
	}
})();

参考url

http://blog.csdn.net/happyduoduo1/article/details/51789552

http://www.zhangxinxu.com/wordpress/2015/10/understand-svg-transform/

转载于:https://my.oschina.net/haison/blog/842908