IDC资讯中心
<html>
<head>
<title>directx transform filters interactive demo</title>
<script language="javascript">
var browsercapable = true; // prevents errors on downlevel browsers
var startimage = "/workshop/graphics/tigerstripe.jpg";
var endimage = "/workshop/graphics/metablob.jpg";
var featuresheader = "<b>features:</b><br>"
function copy2clipboard()
{
// copy currently displayed code to users clipboard.
textrange = document.body.createtextrange();
textrange.movetoelementtext(ocodespan);
textrange.execcommand("copy");
}
function highlighttext(whattohighlight) {
orng = document.body.createtextrange();
orng.movetoelementtext(ocodepre);
orng.execcommand("removeformat");
ohl = document.body.createtextrange();
ohl.movetoelementtext(ocodepre);
ohl.findtext(whattohighlight);
ohl.execcommand("bold");
}
function switchcontent(obj) {
ocontentholder.innerhtml=obj.innerhtml;
oimg.src=startimage;
if (obj==filtersection){
changefilter();
updatefiltercode();
}
else {
changetrans();
updatetranscode();
}
}
function getcontrolobject(controlname) {
for (x=0; x < document.all(controlname).length; x++) {
objtemp = document.all(controlname,x);
if (objtemp.parentelement.issource==null) {
obj=objtemp;
}
}
return(obj);
}
function changefilter() {
selectobject = getcontrolobject("oselect");
selectedvalue = selectobject.options[selectobject.selectedindex].value;
transitionasfilter = selectobject.options[selectobject.selectedindex].trans;
if (selectedvalue != "empty") {
if (selectedvalue.indexof(blur)!=-1) {
ocontrolsspan.innerhtml = oblurcontrols.innerhtml;
blurfilterchange();
}
else if (selectedvalue.indexof(pixelate)!=-1) {
ocontrolsspan.innerhtml = opixelatecontrols.innerhtml;
pixelatefilterchange();
}
else if (selectedvalue.indexof(dropshadow)!=-1) {
ocontrolsspan.innerhtml = odropshadowcontrols.innerhtml;
dropshadowfilterchange();
}
else if (selectedvalue.indexof(chroma)!=-1) {
ocontrolsspan.innerhtml = ochromacontrols.innerhtml;
chromafilterchange();
}
else if (selectedvalue.indexof(basicimage)!=-1) {
ocontrolsspan.innerhtml = obasicimagecontrols.innerhtml;
basicimagefilterchange();
}
else {
oimg.style.filter=selectedvalue;
ocontrolsspan.innerhtml = ;
}
if (ocontrolsspan.innerhtml!=) {
ocontrolsspan.innerhtml = featuresheader + ocontrolsspan.innerhtml;
}
if (transitionasfilter == "true") {
ocontrolsspan.innerhtml = ocontrolsspan.innerhtml + oglobalcontrols.innerhtml;
progresschange();
}
}
else {
oimg.style.filter=;
ocontrolsspan.innerhtml = featuresheader + no filter is currently selected.;
}
updatefiltercode();
}
function updatefiltercode() {
ocodepre.innertext=imgobj.innerhtml;
}
function blurfilterchange(){
controlobject = getcontrolobject("pixelradiuslist");
pixelradius = controlobject.options[controlobject.selectedindex].value;
controlobject = getcontrolobject("shadowopacitylist");
shadowopacity = controlobject.options[controlobject.selectedindex].value;
controlobject = getcontrolobject("makeshadowswitch");
makeshadow = controlobject.checked;
cmd = "oimg.style.filter=progid:dximagetransform.microsoft.crblur(pixelradius="+ pixelradius +"," + "makeshadow=" + makeshadow + ",shadowopacity=" + shadowopacity +")";
eval(cmd);
updatefiltercode();
highlighttext(cmd);
}
function embossfilterchange(){
controlobject = getcontrolobject("embossbiaslist");
bias = controlobject.options[controlobject.selectedindex].value;
cmd = "oimg.style.filter=progid:dximagetransform.microsoft.cremboss()";
eval(cmd);
updatefiltercode();
highlighttext(cmd);
}
function engravefilterchange(){
controlobject = getcontrolobject("engravebiaslist");
bias = controlobject.options[controlobject.selectedindex].value;
cmd = "oimg.style.filter=progid:dximagetransform.microsoft.crengrave()";
eval(cmd);
updatefiltercode();
highlighttext(cmd);
}
function pixelatefilterchange(){
controlobject = getcontrolobject("maxsquarelist");
maxsquare = controlobject.options[controlobject.selectedindex].value;
cmd = "oimg.style.filter=progid:dximagetransform.microsoft.pixelate(maxsquare="+ maxsquare +")";
eval(cmd);
controlobject = getcontrolobject("progresslist");
progress = controlobject.options[controlobject.selectedindex].value;
cmd = "oimg.filters[0].progress=" + progress + ";";
eval(cmd);
updatefiltercode();
highlighttext(cmd);
}
function dropshadowfilterchange(){
controlobject = getcontrolobject("shadowcolorlist");
shadowcolor = controlobject.options[controlobject.selectedindex].value;
controlobject = getcontrolobject("offsetxlist");
offx = controlobject.options[controlobject.selectedindex].value;
controlobject = getcontrolobject("offsetylist");
offy = controlobject.options[controlobject.selectedindex].value;
controlobject = getcontrolobject("positiveswitch");
positive = controlobject.checked;
cmd = "oimg.style.filter=progid:dximagetransform.microsoft.dropshadow(color=" + shadowcolor + ",offx=" + offx + ",offy=" + offy + ",positive=" + positive + ")";
eval(cmd);
updatefiltercode();
highlighttext(cmd);
}
function chromafilterchange(){
controlobject = getcontrolobject("chromacolorlist");
chromacolor = controlobject.options[controlobject.selectedindex].value;
cmd = "oimg.style.filter=progid:dximagetransform.microsoft.chroma(color="+ chromacolor +")";
eval(cmd);
updatefiltercode();
highlighttext(cmd);
}
function basicimagefilterchange(){
var cmd;
controlobject = getcontrolobject("rotationlist");
rotation = controlobject.options[controlobject.selectedindex].value;
controlobject = getcontrolobject("mirrorswitch");
controlobject.checked==true ? mirror = 1 : mirror = 0
controlobject = getcontrolobject("invertswitch");
controlobject.checked==true ? invert = 1 : invert = 0
controlobject = getcontrolobject("xrayswitch");
controlobject.checked==true ? xray = 1 : xray = 0
controlobject = getcontrolobject("grayscaleswitch");
controlobject.checked==true ? grayscale = 1 : grayscale = 0
controlobject = getcontrolobject("basicimagemaskswitch");
controlobject.checked==true ? mask = 1 : mask = 0
controlobject = getcontrolobject("basicimageopacitylist");
opacity = controlobject.options[controlobject.selectedindex].value;
controlobject = getcontrolobject("basicimagemaskcolorlist");
controlobject2 = getcontrolobject("maskcolorspan");
if (mask==0) {
controlobject2.style.display = none;
}
else {
controlobject2.style.display = inline;
}
cmd = "oimg.style.filter=progid:dximagetransform.microsoft.basicimage(rotation="+ rotation +",mirror=" + mirror + ",invert=" + invert + ",xray=" + xray + ",grayscale=" + grayscale + ",opacity=" + opacity + ",mask=" + mask ;
if (mask!=0) {
maskcolor = controlobject.options[controlobject.selectedindex].value;
cmd = cmd +",maskcolor=" + maskcolor;
}
cmd = cmd + ")";
eval(cmd);
updatefiltercode();
highlighttext(cmd);
}
function transstart(arg) {
obj = getcontrolobject("oselect");
selectedvalue=obj.options[obj.selectedindex].value;
if (selectedvalue != "empty") {
arg.filters[0].apply();
if (arg.src.indexof(startimage)!=-1) {
arg.src = endimage;
}
else {
arg.src = startimage;
}
arg.filters[0].play();
}
}
