Uploaded image for project: 'Titanium SDK/CLI'
  1. Titanium SDK/CLI
  2. TIMOB-12189

iOS: imageWithRoundedCorner() makes opaque corners instead of transparent corners

    Details

      Description

      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.

      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();
      

        Attachments

          Activity

            People

            • Assignee:
              mstepanov Max Stepanov
              Reporter:
              bitshftr Shawn Lipscomb
            • Watchers:
              0 Start watching this issue

              Dates

              • Due:
                Created:
                Updated:
                Resolved:

                Backbone Issue Sync

                • Titanium SDK/CLI <> Titanium Mobile
                  Synced with:
                  TIMOB-15260
                  Sync status:
                  ERROR
                  Last received:
                  Last sent:

                  Git Source Code