paint.js

TurboCWCShop v1.6.7 is make in the Utility-LAYer Framework.

//Paint对象
function ETSOOPaint(objPaintArea){
	objPaintArea.attachEvent("onmousedown",ETSOOPaint_OnMouseDown);
	objPaintArea.attachEvent("onmousemove",ETSOOPaint_OnMouseMove);
	objPaintArea.attachEvent("onmouseup",ETSOOPaint_OnMouseUp);
	objPaintArea.onselectstart=function(){return false;};
	document.attachEvent("onkeydown",ETSOOPaint.QuickKey);
	this.History=new ETSOOPaint.History(objPaintArea);
	this.History.Data[0]=objPaintArea.innerHTML;
	var numX=0,numY=0,numW,numH;
	if(objPaintArea.style.position=="absolute"){
		with(objPaintArea.style){
			numX=pixelLeft;
			numY=pixelTop;
			numW=pixelWidth;
			numH=pixelHeight;
		}
	}else{
		var arrPos=ETSOOGetPos(objPaintArea);
		numX=arrPos[0],numY=arrPos[1];
		numW=objPaintArea.clientWidth;
		numH=objPaintArea.clientHeight;
	}
	this.PaintArea=objPaintArea;
	this.Pos=[numX,numY,numW,numH];
}
//鼠标按下
ETSOOPaint_OnMouseDown=function(objEvent){
	var objPaint=ETSOOPaint.ActivePaint;
	var objArea=objPaint.PaintArea;
	var objActive=objPaint.ActiveTarget;
	var strType=objPaint.Type;
	var arrPos=objPaint.Pos;
	strType=strType.toLowerCase();
	var objTarget=objEvent.srcElement;
	if(objArea.contains(objTarget)){
		var arrNewPos=ETSOOPaint.GetPos(objEvent);
		var numX=arrNewPos[0], numY=arrNewPos[1];
		var arrBasePos=objPaint.BasePos;
		if(strType=="move"){
			var objNewTarget=objEvent.srcElement;
			if(objArea.contains(objNewTarget)&&objNewTarget!=objArea){
				objActive=objNewTarget;
				objPaint.ActiveTarget=objActive;
				if(objEvent.altKey){
					arrBasePos[0]=objActive.style.pixelLeft;
					arrBasePos[1]=objActive.style.pixelTop;
				}else{
					arrBasePos[0]=objEvent.offsetX;
					arrBasePos[1]=objEvent.offsetY;
				}
				objPaint.BasePos=arrBasePos;
				ETSOOPaint.SetProperty(objActive);
			}
		}else{
			var numBaseX,numBaseY;
			if(arrBasePos.length==0){
				numBaseX=numX,numBaseY=numY;
				arrBasePos[0]=numX,arrBasePos[1]=numY;
				objPaint.BasePos=arrBasePos;
			}else{
				numBaseX=arrBasePos[0],numBaseY=arrBasePos[1];
			}
			if(objActive==null){
				var strId="ETSOOActiveDraw_"+strType;
				var strActive='<v:'+strType+' id="'+strId+'" style="position:absolute;'
				switch(strType)
				{
					case "oval":
						strActive+='left:'+numBaseX+';top:'+numBaseY+';width:0;height:0"';
						break;
					case "rect":
						strActive+='left:'+numBaseX+';top:'+numBaseY+';width:0;height:0"';
						break;
					case "roundrect":
						strActive+='left:'+numBaseX+';top:'+numBaseY+';width:0;height:0"';
						break;
					case "line":
						strActive+='left:'+numBaseX+';top:'+numBaseY+'" from="0,0" to="1px,1px"';
						break;
					case "polyline":
						strActive+='left:0;top:0;" points="'+arrBasePos.join()+'"';
						break;
					case "arc":
						strActive+='left:'+numBaseX+';top:'+numBaseY+';width:0;height:0"';
						break;
					default:
						return false;
				}
				var strDrawColor=objPaint.DrawColor;
				var numDrawSize=objPaint.DrawSize;
				var strFillColor=objPaint.FillColor;
				var numOpacity=objPaint.Opacity;
				if(strDrawColor!="")strActive+=' strokecolor="'+strDrawColor+'"'
				if(numDrawSize>0)strActive+=' strokeweight="'+numDrawSize+'pt"';
				if(strFillColor!="")strActive+=' fillcolor="'+strFillColor+'"';
				strActive+='>';
				if(numOpacity>0&&numOpacity<1)strActive+='<v:fill opacity = "'+numOpacity+'"></v:fill>';
				strActive+='</v:'+strType+'>';
				objArea.insertAdjacentHTML("beforeEnd",strActive);
				objActive=document.all(strId);
				var numLen=objActive.length;
				if(numLen)objActive=objActive(numLen-1);
				objPaint.ActiveTarget=objActive;
			}else{
				var blnCtrlPolyLine=false;
				if(objEvent.altKey)
				{
					if(objPaint.Flag==1)
					{
						objPaint.Flag=0;
						objPaint.Type="move";
					}
					else
					{
						objPaint.BasePos[0]=numX;
						objPaint.BasePos[1]=numY;
					}
				}
				else if(objEvent.ctrlKey)
				{
				}
				else objPaint.BasePos=[];
				
				var strTagName=objActive.tagName.toLowerCase();
				if(strTagName=="line")
				{
					var numFromX=objActive.from.x;
					var numFromY=objActive.from.y;
					var numToX=objActive.to.x;
					var numToY=objActive.to.y;
					var numWidth=Math.abs(numToX-numFromX);
					var numHeight=Math.abs(numToY-numFromY);
					
					if(numWidth<2&&numHeight<2)
					{
						objActive.removeNode(true);
						ETSOOPaint.DrawClear();
						return false;
					}
					var numNewX=numFromX;
					if(numToX<numNewX)numNewX=numToX;
					var numNewY=numFromY;
					if(numToY<numNewY)numNewY=numToY;
					
					numFromX=(numFromX-numNewX)+'pt';
					numFromY=(numFromY-numNewY)+'pt';
					numToX=(numToX-numNewX)+'pt';
					numToY=(numToY-numNewY)+'pt';
					objActive.from=new Array(numFromX,numFromY).join();
					objActive.to=new Array(numToX,numToY).join();
					
					if(objPaint.IEVersion<105.5)
					{
						var strIn=objArea.innerHTML;
						objArea.innerHTML=strIn;
					}
					else
					{
						objActive.style.left=numNewX+'pt';
						objActive.style.top=numNewY+'pt';
					}
				}
				else if(strTagName=="polyline")
				{
					if(objEvent.ctrlKey||objPaint.Polygon==1)blnCtrlPolyLine=true;
					else ETSOOPaint.SetPolyLine();
				}
				else
				{
					var numWidth=objActive.style.pixelWidth;
					var numHeight=objActive.style.pixelHeight;
					if(numWidth<2&&numHeight<2)
					{
						objActive.removeNode(true);
						ETSOOPaint.DrawClear();
					}
				}
				if(blnCtrlPolyLine)
				{
					var numDX=Math.abs(numX-numBaseX);
					var numDY=Math.abs(numY-numBaseY);
					var blnSet=false;
					if(numDX<5&&numDY<5)
					{
						blnSet=true;
						numX=numBaseX;
						numY=numBaseY;
					}
					if(objEvent.shiftKey)
					{
						var arrSavedPos=objPaint.SavedPos;
						var numX=arrSavedPos[0];
						var numY=arrSavedPos[1];
					}
					arrBasePos=arrBasePos.concat(numX+'px',numY+'px');
					objPaint.BasePos=arrBasePos;
					if(blnSet)
					{
						objActive.points.value=arrBasePos.join();
						ETSOOPaint.SetPolyLine();
						ETSOOPaint.DrawClear();
					}
				}else{
					objPaint.ActiveTarget=null;
				}
				objPaint.History.Add();
			}
		}
		ETSOOPaint.SelfMouseDown();
	}
}
//自定义鼠标处理函数
ETSOOPaint.SelfMouseDown=function(){
}
//设置属性
ETSOOPaint.SetProperty=function(objActive){
}
//清除设置
ETSOOPaint.DrawClear=function(){
	var objPaint=ETSOOPaint.ActivePaint;
	if(objPaint){
		objPaint.SavedPos=[];
		objPaint.BasePos=[];
		objPaint.ActiveTarget=null;
	}
}
//绘制Polyline
ETSOOPaint.SetPolyLine=function(){
	var objPaint=ETSOOPaint.ActivePaint;
	var objArea=objPaint.PaintArea;
	var objActive=objPaint.ActiveTarget;
	var strType=objPaint.Type;
	var arrPos=objPaint.Pos;
	var numLen=objActive.points.length;
	if(numLen==2)
	{
		var arrFrom=objActive.points(0);
		var arrTo=objActive.points(1);
		var numWidth=Math.abs(arrTo.x-arrFrom.x);
		var numHeight=Math.abs(arrTo.y-arrFrom.y);
		if(numWidth==0&&numHeight==0)
		{
			objActive.removeNode(true);
			ETSOOPaint.DrawClear();
			return false;
		}
	}
	var numNewX;
	var numNewY;
	for(var numI=0;numI<numLen;numI++)
	{
		var arrPos=objActive.points(numI);
		var numX=arrPos.x;
		var numY=arrPos.y;
		if(numNewX==null)
		{
			numNewX=numX;
			numNewY=numY;
		}
		else
		{
			if(numX<numNewX)numNewX=numX;
			if(numY<numNewY)numNewY=numY;
		}
	
	}
	var arrNewPos=new Array();
	for(var numI=0;numI<numLen;numI++)
	{
		var arrPos=objActive.points(numI);
		var numX=(arrPos.x-numNewX)+'pt';
		var numY=(arrPos.y-numNewY)+'pt';
		arrNewPos=arrNewPos.concat(numX,numY);
	}
	objActive.style.left=numNewX+'pt';
	objActive.style.top=numNewY+'pt';
	objActive.points.value=arrNewPos.join();
}
//按下放开
ETSOOPaint_OnMouseUp=function(objEvent){
	var objPaint=ETSOOPaint.ActivePaint;
	if(objPaint==null)return false;
	var objArea=objPaint.PaintArea;
	var objActive=objPaint.ActiveTarget;
	var strType=objPaint.Type;
	strType=strType.toLowerCase();
	if(objActive){
		if(strType=="move"){
			if(objEvent.ctrlKey){
				var arrNewPos=ETSOOPaint.GetPos();
				var numX=arrNewPos[0];
				var numY=arrNewPos[1];
				var numBaseX=objPaint.BasePos[0];
				var numBaseY=objPaint.BasePos[1];
				var numLeft=numX-numBaseX;
				var numTop=numY-numBaseY;
				
				objArea.innerHTML+=objActive.outerHTML;
				
				var strId=objActive.id;
				var objNew=objArea.all(strId);
				if(objNew){
					var numLen=objNew.length;
					if(numLen)objNew=objNew(numLen-1);
					objNew.style.pixelLeft=numLeft;
					objNew.style.pixelTop=numTop;
					objPaint.ActiveTarget=objNew;
				}
			}
			objPaint.History.Add();
		}else{
			ETSOOPaint_OnMouseDown(objEvent);
		}
	}
}
//鼠标移动
ETSOOPaint_OnMouseMove=function(objEvent){
	var objPaint=ETSOOPaint.ActivePaint;
	if(objPaint==null)return false;
	var objArea=objPaint.PaintArea;
	var objActive=objPaint.ActiveTarget;
	var strType=objPaint.Type;
	strType=strType.toLowerCase();
	var arrBasePos=objPaint.BasePos;
	if(strType&&objActive&&arrBasePos.length>0){
		var arrNewPos=ETSOOPaint.GetPos(objEvent);
		var numX=arrNewPos[0], numY=arrNewPos[1];
		var numBaseX=arrBasePos[0], numBaseY=arrBasePos[1];
		if(strType=="move"&&objEvent.altKey){
			var strType=objActive.tagName.toLowerCase();
			if(strType=='polyline')
			{
				objPaint.Type="move";
				return false;
			}
			objPaint.Flag=1;
		}
		var arrNewPos=[numX,numY];
		switch(strType)
		{
			case "move":
				if(objEvent.button==1)
				{
					if(!objEvent.ctrlKey)
					{
						var numLeft=numX-numBaseX;
						var numTop=numY-numBaseY;
						if(numLeft<0)numLeft=0;
						if(numTop<0)numTop=0;
						objActive.style.pixelLeft=numLeft;
						objActive.style.pixelTop=numTop;
					}
				}
				break;
			case "oval":
				var numWidth=Math.abs(numX-numBaseX);
				var numHeight=Math.abs(numY-numBaseY);
				if(objEvent.shiftKey||objPaint.Circle==1)
				{
					var numR=(numWidth+numHeight)/2;
					numWidth=numR;
					numHeight=numR;
				}
				var numLeft=numBaseX-numWidth/2;
				if(numLeft<0)numLeft=0;
				var numTop=numBaseY-numHeight/2;
				if(numTop<0)numTop=0;
				
				objActive.style.width=numWidth*1.6;
				objActive.style.height=numHeight*1.6;
				objActive.style.left=numLeft;
				objActive.style.top=numTop;
				break;
			case "rect":
				var numWidth=Math.abs(numX-numBaseX);
				var numHeight=Math.abs(numY-numBaseY);
				if(objEvent.shiftKey||objPaint.Square==1)
				{
					var numLen=(numWidth+numHeight)/2;
					numWidth=numLen;
					numHeight=numLen;
				}				
				objActive.style.width=numWidth;
				objActive.style.height=numHeight;
				break;
			case "roundrect":
				var numWidth=Math.abs(numX-numBaseX);
				var numHeight=Math.abs(numY-numBaseY);
				if(objEvent.shiftKey||objPaint.Square==1)