Created
April 24, 2014 21:28
-
-
Save serebro/11270120 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
//This is a demo to show how backgroundLeftCap and backgroundTopCap work on the Tianium platform by Appcelerator | |
//Paste this code in app.js (tested on iOS) | |
//Screenshot: http://screencast.com/t/txWQD3l2UBN | |
/////////////////////////////////////////////////////////////////////////////// | |
//Just modify these variables to see how backgroundLeftCap and topCap will work | |
var topCap = 20; | |
var leftCap = 35; | |
var originalImageSize = {height:100, width:100} | |
var stretchedImageSize = {height:200,width:200} | |
var demoImage = boxImage(originalImageSize);//replace with your image | |
//////////////////////////////////////////////////////////////////////////////// | |
//Demo Specific Code... | |
//stretched view | |
var view = Ti.UI.createView({ | |
top: 10, | |
height: stretchedImageSize.height, | |
width: stretchedImageSize.width, | |
backgroundLeftCap: leftCap, | |
backgroundTopCap: topCap, | |
backgroundImage: demoImage | |
}); | |
//original image | |
var image = Ti.UI.createView({ | |
bottom: 40, | |
height: originalImageSize.height, | |
width: originalImageSize.width, | |
backgroundImage: demoImage | |
}); | |
//cap areas with opactiy | |
var topLeftCap = Ti.UI.createView({ | |
top: 0, | |
left: 0, | |
width: view.backgroundLeftCap, | |
height: view.backgroundTopCap, | |
opacity: 0.7, | |
backgroundColor: 'red' | |
}); | |
var topRightCap = Ti.UI.createView({ | |
top: 0, | |
right: 0, | |
width: view.backgroundLeftCap, | |
height: view.backgroundTopCap, | |
opacity: 0.7, | |
backgroundColor: 'red' | |
}); | |
var bottomRightCap = Ti.UI.createView({ | |
bottom: 0, | |
right: 0, | |
width: view.backgroundLeftCap, | |
height: view.backgroundTopCap, | |
opacity: 0.7, | |
backgroundColor: 'red' | |
}); | |
var bottomLeftCap = Ti.UI.createView({ | |
bottom: 0, | |
left: 0, | |
width: view.backgroundLeftCap, | |
height: view.backgroundTopCap, | |
opacity: 0.7, | |
backgroundColor: 'red' | |
}); | |
var label1 = Ti.UI.createLabel({ | |
text:"Original image with overlay to show top & left cap areas", | |
bottom:10, | |
width:'fill', | |
minimumFontSize:6 | |
}); | |
var label2 = Ti.UI.createLabel({ | |
text:"Stretched image with topCap as "+view.backgroundTopCap+" and leftCap as "+view.backgroundLeftCap, | |
top:15+view.height, | |
width:'fill', | |
minimumFontSize:6 | |
}); | |
var win = Ti.UI.createWindow({ | |
backgroundColor: 'white' | |
}); | |
image.add(bottomLeftCap,bottomRightCap,topLeftCap,topRightCap); | |
win.add(image, view, label1, label2); | |
//function to create demo image | |
function boxImage(imageSize){ | |
var box = Ti.UI.createView({ | |
backgroundColor:"green", | |
width:imageSize.width, | |
height:imageSize.height | |
}); | |
var tlLabel = Ti.UI.createLabel({ | |
color:"black", | |
textAlign:'left', | |
height:'size', | |
width:'size', | |
font:{fontSize:10}, | |
text:"top Left", | |
top:0, | |
left:0 | |
}) | |
var trLabel = Ti.UI.createLabel({ | |
color:"black", | |
textAlign:'right', | |
height:'size', | |
width:'size', | |
font:{fontSize:10}, | |
text:"top Right", | |
top:0, | |
right:0 | |
}) | |
var blLabel = Ti.UI.createLabel({ | |
color:"black", | |
textAlign:'left', | |
height:'size', | |
width:'size', | |
font:{fontSize:10}, | |
text:"bottom \nLeft", | |
bottom:0, | |
left:0 | |
}) | |
var brLabel = Ti.UI.createLabel({ | |
color:"black", | |
textAlign:'right', | |
height:'size', | |
width:'size', | |
font:{fontSize:10}, | |
text:"bottom \nRight", | |
bottom:0, | |
right:0, | |
}); | |
var centerLineVert = Ti.UI.createView({ | |
height:'fill', | |
width:3, | |
backgroundColor:'black' | |
}); | |
var centerLineHorz = Ti.UI.createView({ | |
height:3, | |
width:'fill', | |
backgroundColor:'black' | |
}); | |
box.add(tlLabel,trLabel,blLabel, brLabel, centerLineVert, centerLineHorz); | |
return box.toImage(); | |
} | |
if(view.height<=image.height || view.width<=image.width){ | |
alert("You are not stretching the image so top & left Cap properties will not apply.") | |
} | |
win.open(); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment