cvi_reflex_lib.js

一个在图像显示的时候具有镜面反射效果的javascript

							xb = '<v:shape strokeweight="'+ibord+'" strokecolor="'+icolor+'" stroked="'+(bord>0||ibord>0?'t':'f')+'" filled="f" coordorigin="0,0" coordsize="'+iw+','+(ch+iheit+idist)+'" path="m '+(cw+bord)+','+(ch+idist+bord)+' l '+(cw+bord)+','+(iheit+ch+idist-bord)+','+(iw-cw-bord)+','+(parseInt((iheit+idist)*z)-bord)+','+(iw-cw-bord)+','+(parseInt(idist*z)+bord)+' x e" style="position:absolute;margin:0;padding:0;top:'+(ih-ch+idist)+'px;left:0px;width:'+iw+'px;height:'+(ch+iheit+idist)+'px; flip: y; filter:flipv progid:DXImageTransform.Microsoft.Alpha(opacity='+(100*iopac)+',style=1,finishOpacity=0,startx=0,starty=0,finishx='+q+',finishy=80);"></v:shape>';
						}else {fb = ''; xb = ''; }
						flex = '<v:shape strokeweight="0" stroked="f" filled="t" fillcolor="#808080" coordorigin="0,0" coordsize="'+iw+','+(ch+iheit+idist)+'" path="m '+cw+','+(ch+idist)+' l '+cw+','+(iheit+ch+idist)+','+(iw-cw)+','+parseInt((iheit+idist)*z)+','+(iw-cw)+','+parseInt(idist*z)+' x e" style="position:absolute;margin:0;padding:0;top:'+(ih-ch+idist)+'px;left:0px;width:'+iw+'px;height:'+(ch+iheit+idist)+'px; flip: y; filter:flipv progid:DXImageTransform.Microsoft.Alpha(opacity='+(100*iopac)+',style=1,finishOpacity=0,startx=0,starty=0,finishx='+q+',finishy=90);"><v:fill origin="0,0" position="0,-'+((divs/2)-0.5)+'" size="1,'+(divs)+'" src="'+canvas.source+'" type="frame" /></v:shape>';
					}else if(itilt=='l') {
						fill = '<v:rect strokeweight="0" filled="t" stroked="f" fillcolor="#808080" style="position:absolute;margin:0;padding:0;width:'+iw+'px;height:'+(ih+iheit+idist)+'px;"><v:fill color="#808080" opacity="0.0" /></v:rect><v:shape strokeweight="0" filled="t" stroked="f" fillcolor="#ffffff" coordorigin="0,0" coordsize="'+iw+','+ih+'" path="m '+cw+','+ch+' l '+cw+','+(ih-ch)+','+(iw-cw)+','+ih+','+(iw-cw)+',0 x e" style="position:absolute;margin:0;padding:0;top:0px;left:0px;width:'+iw+'px;height:'+ih+'px;"><v:fill src="'+canvas.source+'" type="frame" /></v:shape>';
						for(j=0;j<iter;j++) {
							if(j==(iter-1)) q = (rest>0?1:0);
							fill += '<v:shape strokeweight="0" filled="t" stroked="f" fillcolor="#808080" coordorigin="0,0" coordsize="'+iw+','+ih+'" path="m '+(cw+(j*wide))+','+(iter-j)+' l '+(q+cw+((j+1)*wide))+','+(iter-1-j)+','+(q+cw+((j+1)*wide))+','+(ih-1-iter+j)+','+(cw+(j*wide))+','+(ih-iter+j)+' x e" style="position:absolute;margin:0;padding:0px;top:0px;left:0px;width:'+iw+'px;height:'+ih+'px;"><v:fill origin="0,0" position="'+(half-j)+',0" size="'+((iw-cw-cw)/wide)+',1" type="frame" src="'+canvas.source+'" /></v:shape>';
						}
						if(rest>0) {
							fill += '<v:shape strokeweight="0" filled="t" stroked="f" fillcolor="#808080" coordorigin="0,0" coordsize="'+iw+','+ih+'" path="m '+(cw+(j*wide))+','+(iter-j)+' l '+(cw+((j+1)*wide))+','+(iter-1-j)+','+(cw+((j+1)*wide))+','+(ih-1-iter+j)+','+(cw+(j*wide))+','+(ih-iter+j)+' x e" style="position:absolute;margin:0;padding:0px;top:0px;left:0px;width:'+iw+'px;height:'+ih+'px;"><v:fill origin="0,0" position="'+(half-j)+',0" size="'+((iw-cw-cw)/wide)+',1" type="frame" src="'+canvas.source+'" /></v:shape>';
						} q = 100-(((iter*z)/(ih/100))/2);
						if(bord>0||ibord>0) {
							fb = '<v:shape strokeweight="'+ibord+'" strokecolor="'+icolor+'" filled="f" stroked="'+(bord>0||ibord>0?'t':'f')+'" coordorigin="0,0" coordsize="'+iw+','+ih+'" path="m '+(cw+bord)+','+(ch+bord)+' l '+(cw+bord)+','+(ih-ch-bord)+','+(iw-cw-bord)+','+(ih-bord)+','+(iw-cw-bord)+','+bord+' x e" style="position:absolute;margin:0;padding:0;top:0px;left:0px;width:'+iw+'px;height:'+ih+'px;"></v:shape>';
							xb = '<v:shape strokeweight="'+ibord+'" strokecolor="'+icolor+'" stroked="'+(bord>0||ibord>0?'t':'f')+'" filled="f" coordorigin="0,0" coordsize="'+iw+','+(ch+iheit+idist)+'" path="m '+(cw+bord)+','+(parseInt(idist*z)+bord)+' l '+(cw+bord)+','+(parseInt((iheit+idist)*z)-bord)+','+(iw-cw-bord)+','+(iheit+ch+idist-bord)+','+(iw-cw-bord)+','+(ch+idist+bord)+' x e" style="position:absolute;margin:0;padding:0;top:'+(ih-ch+idist)+'px;left:0px;width:'+iw+'px;height:'+(ch+iheit+idist)+'px; flip: y; filter:flipv progid:DXImageTransform.Microsoft.Alpha(opacity='+(100*iopac)+',style=1,finishOpacity=0,startx=100,starty=0,finishx='+q+',finishy=80);"></v:shape>';
						}else {fb = ''; xb = ''; }
						flex = '<v:shape strokeweight="0" filled="t" stroked="f" fillcolor="#808080" coordorigin="0,0" coordsize="'+iw+','+(ch+iheit+idist)+'" path="m '+cw+','+parseInt(idist*z)+' l '+cw+','+parseInt((iheit+idist)*z)+','+(iw-cw)+','+(iheit+ch+idist)+','+(iw-cw)+','+(ch+idist)+' x e" style="position:absolute;margin:0;padding:0;top:'+(ih-ch+idist)+'px;left:0px;width:'+iw+'px;height:'+(ch+iheit+idist)+'px; flip: y; filter:flipv progid:DXImageTransform.Microsoft.Alpha(opacity='+(100*iopac)+',style=1,finishOpacity=0,startx=100,starty=0,finishx='+q+',finishy=90);"><v:fill origin="0,0" position="0,-'+((divs/2)-0.5)+'" size="1,'+(divs)+'" src="'+canvas.source+'" type="frame" /></v:shape>';
					}
					var foot = '</v:group>';
					canvas.innerHTML = head+flex+xb+fill+fb+foot;
				}
			}else {
				if(canvas.tagName.toUpperCase() == "CANVAS" && canvas.getContext("2d")) {
					var context = canvas.getContext("2d");
					var img = new Image();
					img.onload = function() {
						if(canvas.isWK) {var obj = canvas.parentNode;}
						if(typeof resource=='undefined') {
							var resource = document.createElement('canvas');
							if(resource.getContext) {
								resource.style.position = 'fixed';
								resource.style.left = -9999+'px';
								resource.style.top = 0+'px';
								resource.height = canvas.height;
								resource.width = canvas.width;
								resource.style.height = canvas.height+'px';
								resource.style.width = canvas.width+'px';
								if(canvas.isWK) {obj.appendChild(resource);}
							}
						}
						if(canvas.isOP) {canvas.style.visibility = 'hidden';}
						context = canvas.getContext("2d");
						context.clearRect(0,0,ww,hh);
						context.globalCompositeOperation = "source-over";
						context.fillStyle = 'rgba(0,0,0,0)';
						context.fillRect(0,0,ww,hh);
						context.save();
						context.translate(0,boxh-(canvas.isWK?0:1));
						context.scale(1,-1);
						context.drawImage(img,0,-(boxh-iheit-iheit-idist),ww,ih);
						context.restore();
						context.clearRect(0,boxh,ww,hh-boxh);
						if(ibord>0) {
							context.strokeStyle = icolor;
							context.lineWidth = ibord;
							context.beginPath();
							tmp = 0; if(canvas.isOP&&itilt!='n') tmp = 1; if(canvas.isOP&&itilt=='n') tmp = -1;
							context.rect(bord,boxh-iheit+bord+tmp,ww-ibord,iheit);
							context.closePath();
							context.stroke();
							context.clearRect(0,boxh,ww,ibord);
						}
						if(!canvas.isWK||itilt=='n') {
							tmp = 0; if(canvas.isOP) tmp = 1;
							context.globalCompositeOperation = "destination-out";
							style = context.createLinearGradient(0,boxh-iheit-tmp,0,boxh);
							style.addColorStop(1,"rgba(0,0,0,1.0)");
							style.addColorStop(0,"rgba(0,0,0,"+iopac+")");
							context.fillStyle = style;
						}
						if(canvas.isWK) {
							context.beginPath();
							context.rect(0,boxh-iheit,ww,iheit);
							context.closePath();
							context.fill();
						}else {
							tmp = 0; if(canvas.isOP&&itilt=='n') tmp = 1;
							context.fillRect(0,boxh-iheit-tmp,ww,iheit+tmp);
						}
						context.globalCompositeOperation = "source-over";
						context.drawImage(img,0,0,iw,ih);
						if(canvas.isWK&&idist>0&&itilt!='n') {
							context.fillStyle = '#808080';
							context.fillRect(0,boxh-iheit-idist,ww,idist);
						}
						if(ibord>0&&itilt=='n') {
							context.beginPath();
							context.rect(bord,bord,ww-ibord,boxh-iheit-idist-ibord);
							context.closePath();
							context.stroke();
						}
						if(itilt=='l'||itilt=='r') {
							if(resource.getContext) {
								context = resource.getContext("2d");
								context.globalCompositeOperation = "source-over";
								context.clearRect(0,0,ww,hh);
								context.save();
								if(itilt=='r') {
									for(j=0;j<iter;j++) {
										context.drawImage(canvas,j*wide,0,wide,boxh,j*wide,j*1,wide,boxh-(j*2));
									}
									if(rest>0) {
										rest = canvas.width-(iter*wide);
										context.drawImage(canvas,j*wide,0,rest,boxh,j*wide,j*1,rest,boxh-(j*2));
									}
								}else {
									for(j=0;j<iter;j++) {
										context.drawImage(canvas,j*wide,0,wide,boxh,j*wide,(iter-j)*1,wide,boxh-((iter-j)*2));
									}
									if(rest>0) {
										rest = canvas.width-(iter*wide);
										context.drawImage(canvas,j*wide,0,rest,boxh,j*wide,0,rest,boxh);
									}
								}
								context.restore();
								if(canvas.getContext) {
									context = canvas.getContext("2d");
									context.clearRect(0,0,ww,hh);
									context.save();
									if(itilt=='r') {
										clipPolyRight(context,ww/20,0,ww*0.95,boxh,iter+(rest>0?1:0),idist,iheit);
									}else {
										clipPolyLeft(context,ww/20,0,ww*0.95,boxh,iter+(rest>0?1:0),idist,iheit);
									}
									context.clip();
									context.drawImage(resource,parseInt(ww/20),0,parseInt(ww*0.9),hh);
									context.restore();
									if(ibord>0) {
										context.lineWidth = ibord;
										if(itilt=='r') {
											strokePolyRight(context,ww/20,0,ww*0.95,boxh,iter+(rest>0?1:0),idist,iheit,bord);
											context.stroke();
										}else {
											strokePolyLeft(context,ww/20,0,ww*0.95,boxh,iter+(rest>0?1:0),idist,iheit,bord);
											context.stroke();
										}
									}
									if(canvas.isWK) {
										context.save();
										context.globalCompositeOperation = "destination-out";
										style = context.createLinearGradient((itilt=='l'?ww:0),boxh-iheit,(itilt=='l'?ww-(2*(wide/divs)):2*(wide/divs)),boxh);
										style.addColorStop(1,"rgba(0,0,0,1.0)");
										style.addColorStop(0,"rgba(0,0,0,"+iopac+")");
										context.fillStyle = style;
										clipReflex(context,ww/20,0,ww*0.95,boxh,iter+(rest>0?1:0),idist,iheit,itilt);
										context.fill();
										context.globalCompositeOperation = "source-in";
										clearReflex(context,ww/20,0,ww*0.95,boxh,iter+(rest>0?1:0),idist,iheit,itilt);
										context.clip();
										context.clearRect(0,0,ww,boxh);
										context.clearRect(0,0,ww,boxh);
										context.clearRect(0,0,ww,boxh);
										context.clearRect(0,0,ww,boxh);
										//obj.removeChild(resource);
										context.restore();
									}
								}
							}
						}
						if(canvas.isOP) {canvas.style.visibility = 'visible';}
					}
					img.src = canvas.source;
				}
			}
		} catch (e) {
		}
	},

	replace : function(canvas) {
		var object = canvas.parentNode;
		var img = document.createElement('img');
		img.id = canvas.id;
		img.alt = canvas.alt;
		img.title = canvas.title;
		img.src = canvas.source;
		img.className = canvas.className;
		img.style.cssText = canvas.style.cssText;
		img.style.height = canvas.iheight+'px';
		img.style.width = canvas.iwidth+'px';
		object.replaceChild(img,canvas);
	},

	remove : function(canvas) {
		if(document.all && document.namespaces && !window.opera) {
			if(canvas.tagName.toUpperCase() == "VAR") {
				cvi_reflex.replace(canvas);
			}
		}else {
			if(canvas.tagName.toUpperCase() == "CANVAS") {
				cvi_reflex.replace(canvas);
			}
		}
	}
}