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

Animating view with border radius clips its children

    Details

    • Type: Bug
    • Status: In Progress
    • Resolution: Unresolved
    • Affects Version/s: Release 8.0.1
    • Fix Version/s: None
    • Component/s: Android
    • Environment:

      Ti SDK 7.5.2 GA

      Description

      When a view has a borderRadius and is rotated it clips its children.

      var objMatrix = Ti.UI.create2DMatrix();
       
      var win = Ti.UI.createWindow({
          backgroundColor: 'black',
      });
       
      var vw_main = Ti.UI.createView({
          left: 0,
          top: 0,
          width: '100%',
          height: '100%',
          layout: 'vertical',
      });
      win.add(vw_main);
       
       
      var vw_rect1 = Ti.UI.createView({
          top: 20,
          width: 200,
          height: 300,
          borderRadius: 10,
          backgroundColor: 'red',
      });
      vw_main.add(vw_rect1);
       
      var vw_rect2 = Ti.UI.createView({
          width: 150,
          height: 250,
          backgroundColor: 'green',
      });
      vw_rect1.add(vw_rect2);
       
      var checkBox = Ti.UI.createSwitch({
          top: 10,
          value: true,
          style: Titanium.UI.Android.SWITCH_STYLE_CHECKBOX,
          title: 'Border Radius is enabled',
          //titleOn: 'Border Radius is enabled',
          //titleOff: 'Border Radius is not enabled',
      });
      vw_main.add(checkBox);
       
      checkBox.addEventListener('change', function (e) {
          if (e.value) {
              vw_rect1.borderRadius = 5;
              checkBox.title = "Border Radius is enabled";
          }
          else {
              vw_rect1.borderRadius = 0;
              checkBox.title = "Border Radius is not enabled";
          }
      });
       
      var slider = Titanium.UI.createSlider({
          top: 10,
          min: 0,
          max: 100,
          width: Ti.UI.FILL,
          value: 50
      });
       
      slider.addEventListener('change', function (e) {
          (vw_rect1).animate({
              transform: objMatrix.rotate(e.value * 10),
              duration: 0,
          });
      });
      vw_main.add(slider);
      win.open();
       
      /*
      The green view gets clipped when the red view has a borderRadius and is rotated.
      However if the borderRadius is set again then the clipping issue is not present.
      You can view this behaviour by disabling the borderRadius and enabling it again using the checkBox.
      */
      

        Attachments

          Activity

            People

            • Assignee:
              ybanev Yordan Banev
              Reporter:
              pritish.george pritish.george
            • Watchers:
              6 Start watching this issue

              Dates

              • Created:
                Updated:

                Backbone Issue Sync

                • Backbone Issue Sync is enabled for your project, but we do not have any synchronization info for this issue.

                  Git Source Code