GitHub Issue | n/a |
Type | Bug |
Priority | High |
Status | Closed |
Resolution | Fixed |
Resolution Date | 2013-01-25T11:17:46.000+0000 |
Affected Version/s | n/a |
Fix Version/s | Release 3.0.2, Release 3.1.0, 2013 Sprint 01 Core, 2013 Sprint 01 |
Components | iOS |
Labels | blob, core, defect, ios, module_imageview, parity, qe-testadded |
Reporter | Shawn Lipscomb |
Assignee | Max Stepanov |
Created | 2013-01-03T07:56:21.000+0000 |
Updated | 2014-06-19T12:44:03.000+0000 |
Problem
The blob.imageWithRoundedCorner() method on iOS creates an image with opaque white corners instead of transparenet corners like the Android version does. Therefore, this is a parity issue.
I have attached two screenshots. The iPhone screenshot shows the white corners in the resulting image in the bottom right corner. The other screenshot is the same code run on the Android emulator, showing the expected result of transparent corners.
Testcase
Using the following app.js code, click the "Step 1" button, then the "Step 2" button.
{panel:title=app.js}
var win1=Ti.UI.createWindow({backgroundColor:'blue'});
var RoundedFile;
var PhoneDataDirectory=Ti.Filesystem.getFile(Ti.Filesystem.applicationDataDirectory);
if (! PhoneDataDirectory.exists())
PhoneDataDirectory.createDirectory();
var Label1=Ti.UI.createLabel({top:2, left:2, text:'M and Ms',
color:'orange',
backgroundColor:'black'});
win1.add(Label1);
function Step1()
{
Ti.Media.takeScreenshot(ContinueStep1);
}
var Step1Button=Ti.UI.createButton({title:'Step 1', left:5, top:'50%'});
win1.add(Step1Button);
Step1Button.addEventListener('click',Step1);
function ContinueStep1(ScreenShot)
{
var ScreenBlob=ScreenShot.media;
var SectionBlob=ScreenBlob.imageAsCropped({x:0,
y:25,
width:90,
height:50
});
var Rounded=SectionBlob.imageWithRoundedCorner(20);
RoundedFile=Ti.Filesystem.getFile(PhoneDataDirectory.nativePath,'Rounded.png');
RoundedFile.write(Rounded);
Step1Button.title='Done';
}
function Step2()
{
var RoundedImage=Ti.UI.createImageView({image:RoundedFile,
bottom:2, right:2,
width:Ti.UI.SIZE,
height:Ti.UI.SIZE });
win1.add(RoundedImage);
}
var Step2Button=Ti.UI.createButton({title:'Step 2', left:165, top:'50%'});
win1.add(Step2Button);
Step2Button.addEventListener('click',Step2);
win1.open();
{panel}
HD ticket: [APP-692179](http://support.appcelerator.com/tickets/APP-692179)
I tried using the ImageFactory module's imageWithRoundedCorner and imageWithTransparentBorder methods to have a rounded corner around the image but I still see the white corners. Below is another sample code with ImageFactory module. Steps to to reproduce are the same as mentioned in the ticket description. https://gist.github.com/9bd72e8cc6aec73da665
PR https://github.com/appcelerator/titanium_mobile/pull/3678
Verified fixed with SDK 3.0.1.v20130109180643. Thanks!
The image has transparent corners. Verified on: Studio: 3.0.1.201212181159 SDK: 3.1.0.v20130114171802 iOS Device: iPhone 5(v6.0), iPhone Simulator (v6.0) XCode: 4.5.2
Seems I listed the wrong SDK in my "fixed" comment...it's fixed in SDK 3.1.0.v20130109175536. Can this be merged into 3.0.2 ?
reopen for backporting
Closing. Tested with: Titanium Studio, build: 3.0.1.201212181159 Studio SDK, build: 3.0.2.v20130124094710 Studio SDK, build: 3.1.0.v20130124094206 Devices: Nexus4 4.2 iPhone4S 5.0.1
Reopening to update labels
Verified fixed in SDK 3.0.2.v20130124164131. Thanks!