diff --git a/src/Tizen.NUI/src/public/Visuals/VisualConstants.cs b/src/Tizen.NUI/src/public/Visuals/VisualConstants.cs index 234dc63e480..fbb9bf8261d 100755 --- a/src/Tizen.NUI/src/public/Visuals/VisualConstants.cs +++ b/src/Tizen.NUI/src/public/Visuals/VisualConstants.cs @@ -1431,11 +1431,13 @@ public enum ColorVisualCutoutPolicyType /// [EditorBrowsable(EditorBrowsableState.Never)] None, + /// /// Cutout as bounding box of view /// [EditorBrowsable(EditorBrowsableState.Never)] CutoutView, + /// /// Cutout as bounding box of view, include corner radius. /// @@ -1446,5 +1448,22 @@ public enum ColorVisualCutoutPolicyType /// [EditorBrowsable(EditorBrowsableState.Never)] CutoutViewWithCornerRadius, + + /// + /// Cutout as outside of bounding box of view. + /// + [EditorBrowsable(EditorBrowsableState.Never)] + CutoutOutside, + + /// + /// Cutout as outside of bounding box of view, include corner radius. + /// + /// + /// The CornerRadius and CornerRadiusPolicy will be used color visual itself's value. + /// If you are using this policy at Tizen.NUI.Visuals.ColorVisual, please be careful that CornerRadius value + /// is not same as View.CornerRadius. + /// + [EditorBrowsable(EditorBrowsableState.Never)] + CutoutOutsideWithCornerRadius, }; } diff --git a/test/Tizen.NUI.Samples/Tizen.NUI.Samples/Samples/VisualTest.cs b/test/Tizen.NUI.Samples/Tizen.NUI.Samples/Samples/VisualTest.cs index 01eccc4bda2..9560755409c 100755 --- a/test/Tizen.NUI.Samples/Tizen.NUI.Samples/Samples/VisualTest.cs +++ b/test/Tizen.NUI.Samples/Tizen.NUI.Samples/Samples/VisualTest.cs @@ -9,7 +9,6 @@ public class VisualTest : IExample static private string DEMO_IMAGE_DIR = Tizen.Applications.Application.Current.DirectoryInfo.Resource + "images/"; - static private readonly string focusIndicatorImageUrl = DEMO_IMAGE_DIR + "i_focus_stroke_tile_2unit.9.webp"; static private readonly string[] ImageUrlList = { //DEMO_IMAGE_DIR + "Dali/DaliDemo/application-icon-1.png", //DEMO_IMAGE_DIR + "AGIF/dog-anim.gif", @@ -26,12 +25,18 @@ public class VisualTest : IExample const float thumbnailAreaHeight = 96.0f; const float thumbnailSize = 72.0f; const float viewGap = 24.0f; + const float defaultCornerRadius = 16.0f; + + float cornerRadius = defaultCornerRadius; + float cornerSquareness = 0.0f; View rootView; View[] visualViewList = new View[4]; - Visuals.NPatchVisual focusIndicatorVisual; + Visuals.ColorVisual focusIndicatorBorderVisual; + Visuals.ColorVisual focusIndicatorInnerShadowVisual1; + Visuals.ColorVisual focusIndicatorInnerShadowVisual2; Visuals.ColorVisual shadowVisual1; Visuals.ColorVisual shadowVisual2; @@ -63,13 +68,17 @@ private void WinKeyEvent(object sender, Window.KeyEventArgs e) rootView?.Unparent(); rootView?.Dispose(); - focusIndicatorVisual?.Dispose(); + focusIndicatorBorderVisual?.Dispose(); + focusIndicatorInnerShadowVisual1?.Dispose(); + focusIndicatorInnerShadowVisual2?.Dispose(); shadowVisual1?.Dispose(); shadowVisual2?.Dispose(); CreateFocusedVisuals(); CreateLayoutViews(); + + UpdateCornerRadius(); } else if(e.Key.KeyPressedName == "2") { @@ -88,11 +97,36 @@ private void WinKeyEvent(object sender, Window.KeyEventArgs e) } else if(e.Key.KeyPressedName == "4") { - focusIndicatorVisual.ResourceUrl = null; + focusIndicatorBorderVisual.BorderlineWidth = 5.0f - focusIndicatorBorderVisual.BorderlineWidth; + + focusIndicatorInnerShadowVisual1.BorderlineWidth = 8.0f - focusIndicatorInnerShadowVisual1.BorderlineWidth; + + focusIndicatorInnerShadowVisual1.ExtraWidth = 20.0f - focusIndicatorInnerShadowVisual1.ExtraWidth; + focusIndicatorInnerShadowVisual1.ExtraHeight = 20.0f - focusIndicatorInnerShadowVisual1.ExtraHeight; + focusIndicatorInnerShadowVisual1.OffsetX = 10.0f - focusIndicatorInnerShadowVisual1.OffsetX; + focusIndicatorInnerShadowVisual1.OffsetY = 10.0f - focusIndicatorInnerShadowVisual1.OffsetY; + + focusIndicatorInnerShadowVisual2.BorderlineWidth = 5.0f - focusIndicatorInnerShadowVisual2.BorderlineWidth; + + focusIndicatorInnerShadowVisual2.Opacity = 0.15f - focusIndicatorInnerShadowVisual2.Opacity; + + focusIndicatorInnerShadowVisual2.ExtraWidth = 20.0f - focusIndicatorInnerShadowVisual2.ExtraWidth; + focusIndicatorInnerShadowVisual2.ExtraHeight = 20.0f - focusIndicatorInnerShadowVisual2.ExtraHeight; + focusIndicatorInnerShadowVisual2.OffsetX = -10.0f - focusIndicatorInnerShadowVisual2.OffsetX; + focusIndicatorInnerShadowVisual2.OffsetY = -10.0f - focusIndicatorInnerShadowVisual2.OffsetY; } else if(e.Key.KeyPressedName == "5") { - focusIndicatorVisual.ResourceUrl = focusIndicatorImageUrl; + cornerRadius += defaultCornerRadius; + if(cornerRadius > thumbnailAreaHeight * 0.5f + 1.0f) + { + cornerRadius = defaultCornerRadius; + cornerSquareness = 0.6f - cornerSquareness; + } + + Tizen.Log.Error("NUI", $"Use corner radius {cornerRadius} and corner squareness {cornerSquareness} Scene\n"); + + UpdateCornerRadius(); } else if(e.Key.KeyPressedName == "6") { @@ -154,7 +188,9 @@ public void Deactivate() rootView?.Unparent(); rootView?.Dispose(); - focusIndicatorVisual?.Dispose(); + focusIndicatorBorderVisual?.Dispose(); + focusIndicatorInnerShadowVisual1?.Dispose(); + focusIndicatorInnerShadowVisual2?.Dispose(); shadowVisual1?.Dispose(); shadowVisual2?.Dispose(); } @@ -168,20 +204,86 @@ private void FullGC() private void CreateFocusedVisuals() { - focusIndicatorVisual = new Visuals.NPatchVisual() + focusIndicatorBorderVisual = new Visuals.ColorVisual() { Name = "indicator", - ResourceUrl = focusIndicatorImageUrl, + Origin = Visual.AlignType.Center, + PivotPoint = Visual.AlignType.Center, + + Color = Color.Transparent, + + Width = 1.0f, + Height = 1.0f, + + ExtraWidth = 1.0f, + ExtraHeight = 1.0f, + + CornerRadius = new Vector4(16.5f, 16.5f, 16.5f, 16.5f), + + BorderlineWidth = 5.0f, + BorderlineColor = Color.White, + BorderlineOffset = -1.0f, + }; + + focusIndicatorInnerShadowVisual1 = new Visuals.ColorVisual() + { + Name = "indicator-shadow", Origin = Visual.AlignType.Center, PivotPoint = Visual.AlignType.Center, - Width = 1.01f, - Height = 1.01f, + Color = Color.Transparent, + + Width = 1.0f, + Height = 1.0f, + + ExtraWidth = -1.0f, + ExtraHeight = -1.0f, - BorderOnly = true, + OffsetXPolicy = VisualTransformPolicyType.Absolute, + OffsetYPolicy = VisualTransformPolicyType.Absolute, + + CornerRadius = new Vector4(15.5f, 15.5f, 15.5f, 15.5f), + + BorderlineWidth = 3.0f, + BorderlineColor = Color.Black, + BorderlineOffset = -1.0f, + + BlurRadius = 5.0f, + + CutoutPolicy = ColorVisualCutoutPolicyType.CutoutOutsideWithCornerRadius, }; + + focusIndicatorInnerShadowVisual2 = new Visuals.ColorVisual() + { + Name = "indicator-shadow2", + + Origin = Visual.AlignType.Center, + PivotPoint = Visual.AlignType.Center, + + Color = Color.Transparent, + + Width = 1.0f, + Height = 1.0f, + + ExtraWidth = -1.0f, + ExtraHeight = -1.0f, + + OffsetXPolicy = VisualTransformPolicyType.Absolute, + OffsetYPolicy = VisualTransformPolicyType.Absolute, + + CornerRadius = new Vector4(15.5f, 15.5f, 15.5f, 15.5f), + + BorderlineWidth = 0.0f, + BorderlineColor = Color.White, + BorderlineOffset = -1.0f, + + BlurRadius = 5.0f, + + CutoutPolicy = ColorVisualCutoutPolicyType.CutoutOutsideWithCornerRadius, + }; + shadowVisual1 = new Visuals.ColorVisual() { Name = "shadow1", @@ -424,11 +526,15 @@ private View CreateViewWithVisual(int id) { Tizen.Log.Error("NUI", $"View {me.ID} focus gained.\n"); - me.AddVisual(focusIndicatorVisual); + me.AddVisual(focusIndicatorBorderVisual); + me.AddVisual(focusIndicatorInnerShadowVisual1); + me.AddVisual(focusIndicatorInnerShadowVisual2); me.AddVisual(shadowVisual1); me.AddVisual(shadowVisual2); - focusIndicatorVisual.RaiseToTop(); + focusIndicatorInnerShadowVisual1.RaiseToTop(); + focusIndicatorInnerShadowVisual2.RaiseAbove(focusIndicatorInnerShadowVisual1); + focusIndicatorBorderVisual.RaiseAbove(focusIndicatorInnerShadowVisual2); shadowVisual1.LowerToBottom(); shadowVisual2.LowerBelow(shadowVisual1); @@ -461,7 +567,9 @@ private View CreateViewWithVisual(int id) { Tizen.Log.Error("NUI", $"View {me.ID} focus losted.\n"); - me.RemoveVisual(focusIndicatorVisual); + me.RemoveVisual(focusIndicatorBorderVisual); + me.RemoveVisual(focusIndicatorInnerShadowVisual1); + me.RemoveVisual(focusIndicatorInnerShadowVisual2); me.RemoveVisual(shadowVisual1); me.RemoveVisual(shadowVisual2); @@ -495,6 +603,51 @@ private View CreateViewWithVisual(int id) return view; } + private void UpdateCornerRadius() + { + foreach (var view in visualViewList) + { + if(view != null) + { + view.CornerRadius = new Vector4(cornerRadius, cornerRadius, cornerRadius, cornerRadius); + view.CornerSquareness = new Vector4(cornerSquareness, cornerSquareness, cornerSquareness, cornerSquareness); + + { + var visual = view.FindVisualByName("background") as Visuals.ColorVisual; + visual.CornerRadius = new Vector4(cornerRadius, cornerRadius, cornerRadius, cornerRadius); + visual.CornerSquareness = new Vector4(cornerSquareness, cornerSquareness, cornerSquareness, cornerSquareness); + } + + { + var visual = view.FindVisualByName("mainImage") as Visuals.ImageVisual; + visual.CornerRadius = new Vector4(cornerRadius, cornerRadius, 0.0f, 0.0f); + visual.CornerSquareness = new Vector4(cornerSquareness, cornerSquareness, 0.0f, 0.0f); + } + + { + var visual = view.FindVisualByName("foreground") as Visuals.ColorVisual; + visual.CornerRadius = new Vector4(0.0f, 0.0f, cornerRadius, cornerRadius); + visual.CornerSquareness = new Vector4(0.0f, 0.0f, cornerSquareness, cornerSquareness); + } + } + } + + float borderCornerRadius = cornerRadius + 0.5f; + focusIndicatorBorderVisual.CornerRadius = new Vector4(borderCornerRadius, borderCornerRadius, borderCornerRadius, borderCornerRadius); + focusIndicatorBorderVisual.CornerSquareness = new Vector4(cornerSquareness, cornerSquareness, cornerSquareness, cornerSquareness); + + borderCornerRadius = cornerRadius - 0.5f; + focusIndicatorInnerShadowVisual1.CornerRadius = new Vector4(borderCornerRadius, borderCornerRadius, borderCornerRadius, borderCornerRadius); + focusIndicatorInnerShadowVisual1.CornerSquareness = new Vector4(cornerSquareness, cornerSquareness, cornerSquareness, cornerSquareness); + focusIndicatorInnerShadowVisual2.CornerRadius = new Vector4(borderCornerRadius, borderCornerRadius, borderCornerRadius, borderCornerRadius); + focusIndicatorInnerShadowVisual2.CornerSquareness = new Vector4(cornerSquareness, cornerSquareness, cornerSquareness, cornerSquareness); + + shadowVisual1.CornerRadius = new Vector4(cornerRadius, cornerRadius, cornerRadius, cornerRadius); + shadowVisual1.CornerSquareness = new Vector4(cornerSquareness, cornerSquareness, cornerSquareness, cornerSquareness); + shadowVisual2.CornerRadius = new Vector4(cornerRadius, cornerRadius, cornerRadius, cornerRadius); + shadowVisual2.CornerSquareness = new Vector4(cornerSquareness, cornerSquareness, cornerSquareness, cornerSquareness); + } + static private SamplingModeType GetNextSamplingModeType(SamplingModeType currentSamplingMode) { SamplingModeType nextSamplingMode = SamplingModeType.DontCare; diff --git a/test/Tizen.NUI.Samples/Tizen.NUI.Samples/res/images/i_focus_stroke_tile_2unit.9.webp b/test/Tizen.NUI.Samples/Tizen.NUI.Samples/res/images/i_focus_stroke_tile_2unit.9.webp deleted file mode 100644 index f1224f56044..00000000000 Binary files a/test/Tizen.NUI.Samples/Tizen.NUI.Samples/res/images/i_focus_stroke_tile_2unit.9.webp and /dev/null differ