Merge pull request #4 from albyoo/features/border-radius

Rename corner-radius to border-radius & Implement Skia border-radius.

Author: mstancombe

Source/Demos/HtmlRenderer.Demo.Common/DemoUtils.cs

@@ -74,8 +74,8 @@ public static string GetStylesheet(string src)
                     a:link { text-decoration: none; }
                     a:hover { text-decoration: underline; }
                     .gray    { color:gray; }
-                    .example { background-color:#efefef; corner-radius:5px; padding:0.5em; }
-                    .whitehole { background-color:white; corner-radius:10px; padding:15px; }
+                    .example { background-color:#efefef; border-radius:5px; padding:0.5em; }
+                    .whitehole { background-color:white; border-radius:10px; padding:15px; }
                     .caption { font-size: 1.1em }
                     .comment { color: green; margin-bottom: 5px; margin-left: 3px; }
                     .comment2 { color: green; }";

Source/Demos/HtmlRenderer.Demo.Common/Samples/07.Additional features.htm

@@ -27,16 +27,16 @@
                 vertical-align: middle;
             }
 
-            .c1 { corner-radius: 0px; }
+            .c1 { border-radius: 0px; }
 
-            .c2 { corner-radius: 10px; }
+            .c2 { border-radius: 10px; }
 
-            .c3 { corner-radius: 0px 10px 10px 0px; }
+            .c3 { border-radius: 0px 10px 10px 0px; }
 
-            .c4 { corner-radius: 18px; }
+            .c4 { border-radius: 18px; }
 
             .c5 {
-                corner-radius: 10px;
+                border-radius: 10px;
                 border: outset #BBBB00 2px;
             }
 
@@ -121,15 +121,15 @@ <h3>
             <p>
                 In this renderer, the rounded corners are achieved by adding this CSS properties:</p>
             <ul>
-                <li><code>corner-ne-radius: (length)</code> Indicates the radius of the north-east corner.
+                <li><code>border-top-right-radius: (length)</code> Indicates the radius of the top-right corner.
                     Not ineritted</li>
-                <li><code>corner-se-radius: (length)</code> Indicates the radius of the south-east corner.
+                <li><code>border-bottom-right-radius: (length)</code> Indicates the radius of the bottom-right corner.
                     Not ineritted</li>
-                <li><code>corner-sw-radius: (length)</code> Indicates the radius of the south-west corner.
+                <li><code>border-bottom-left-radius: (length)</code> Indicates the radius of the bottom-left corner.
                     Not ineritted</li>
-                <li><code>corner-nw-radius: (length)</code> Indicates the radius of the north-west corner.
+                <li><code>border-top-left-radius: (length)</code> Indicates the radius of the top-left corner.
                     Not ineritted</li>
-                <li><code>corner-radius: (length){1,4}</code> Shorthand for the other corner properties.
+                <li><code>border-radius: (length){1,4}</code> Shorthand for the other corner properties.
                     Not ineritted</li>
             </ul>
             <!-- Corners table -->
@@ -160,11 +160,11 @@ <h3>
                 </tr>
             </table>
             <pre>.c1, .c2, .c3, .c4, .c5 { background-color:olive; border:0px; color:white; vertical-align:middle; }
-.c1  { corner-radius: 0px }
-.c2  { corner-radius: 10px }
-.c3  { corner-radius: 0px 10px 10px 0px }
-.c4  { corner-radius: 18px }
-.c5  { corner-radius: 10px; border: outset #bb0 2px; }</pre>
+.c1  { border-radius: 0px }
+.c2  { border-radius: 10px }
+.c3  { border-radius: 0px 10px 10px 0px }
+.c4  { border-radius: 18px }
+.c5  { border-radius: 10px; border: outset #bb0 2px; }</pre>
         </blockquote>
     </body>
 </html>

Source/Demos/HtmlRenderer.Demo.Common/TestSamples/16.Borders.htm

@@ -12,13 +12,13 @@
                 </div>
             </p>
             <p>
-                <div style="padding: 5px; border: 1px solid black; corner-radius: 5px;">
-                    border 1px with corner-radius 5px
+                <div style="padding: 5px; border: 1px solid black; border-radius: 5px;">
+                    border 1px with border-radius 5px
                 </div>
             </p>
             <p>
-                <div style="padding: 5px; border: 2px solid black; corner-radius: 10px;">
-                    border 2px with corner-radius 10px
+                <div style="padding: 5px; border: 2px solid black; border-radius: 10px;">
+                    border 2px with border-radius 10px
                 </div>
             </p>
             <p>
@@ -37,8 +37,8 @@
                 </div>
             </p>
             <p>
-                <div style="padding: 5px; border: 2px dashed darkred; corner-radius: 10px;">
-                    dashed border 2px with corner-radius 10px
+                <div style="padding: 5px; border: 2px dashed darkred; border-radius: 10px;">
+                    dashed border 2px with border-radius 10px
                 </div>
             </p>
         </div>

Source/Demos/HtmlRenderer.Demo.Console/Program.cs

@@ -11,7 +11,7 @@
 }
 
 //Probably won't be running a suite of tests more than once a second, so this will do.
-string runIdentifier = DateTime.Now.ToString("ddMMyyyy-hhmmss");
+string runIdentifier = DateTime.Now.ToString("yyyyMMdd-hhmmss");
 
 var skia = new SkiaConverter(runIdentifier, basePath);
 var pdfSharp = new PdfSharpCoreConverter(runIdentifier, basePath);

Source/HtmlRenderer.SkiaSharp/Adapters/GraphicsAdapter.cs

@@ -20,7 +20,7 @@
 namespace TheArtOfDev.HtmlRenderer.SkiaSharp.Adapters
 {
     /// <summary>
-    /// Adapter for WinForms Graphics for core.
+    /// Adapter for Skia Graphics for core.
     /// </summary>
     internal sealed class GraphicsAdapter : RGraphics
     {

Source/HtmlRenderer.SkiaSharp/Adapters/GraphicsPathAdapter.cs

@@ -19,22 +19,22 @@
 namespace TheArtOfDev.HtmlRenderer.SkiaSharp.Adapters
 {
     /// <summary>
-    /// Adapter for WinForms graphics path object for core.
+    /// Adapter for Skia graphics path object for core.
     /// </summary>
     internal sealed class GraphicsPathAdapter : RGraphicsPath
     {
         /// <summary>
-        /// The actual PdfSharp graphics path instance.
+        /// The actual SKPath graphics path instance.
         /// </summary>
-        private readonly SKPath _graphicsPath = new SKPath();
+        private readonly SKPath _graphicsPath = new();
 
         /// <summary>
         /// the last point added to the path to begin next segment from
         /// </summary>
         private RPoint _lastPoint;
 
         /// <summary>
-        /// The actual PdfSharp graphics path instance.
+        /// The actual SKPath graphics path instance.
         /// </summary>
         public SKPath GraphicsPath
         {
@@ -44,6 +44,7 @@ public SKPath GraphicsPath
         public override void Start(double x, double y)
         {
             _lastPoint = new RPoint(x, y);
+            _graphicsPath.MoveTo((float)x, (float)y);
         }
 
         public override void LineTo(double x, double y)
@@ -56,12 +57,16 @@ public override void ArcTo(double x, double y, double size, Corner corner)
         {
             float left = (float)(Math.Min(x, _lastPoint.X) - (corner == Corner.TopRight || corner == Corner.BottomRight ? size : 0));
             float top = (float)(Math.Min(y, _lastPoint.Y) - (corner == Corner.BottomLeft || corner == Corner.BottomRight ? size : 0));
-            _graphicsPath.ArcTo(left, top, (float)size * 2, (float)size * 2, GetStartAngle(corner));
+
+            var rect = SKRect.Create(left, top, (float)size * 2, (float)size * 2);
+            _graphicsPath.ArcTo(rect, GetStartAngle(corner), 90f, false);
             _lastPoint = new RPoint(x, y);
         }
 
         public override void Dispose()
-        { }
+        {
+            _graphicsPath.Dispose();
+        }
 
         /// <summary>
         /// Get arc start angle for the given corner.

Source/HtmlRenderer.SkiaSharp/Adapters/SkiaSharpAdapter.cs

@@ -75,7 +75,7 @@ protected override RColor GetColorInt(string colorName)
 
         protected override RPen CreatePen(RColor color)
         {
-            return new PenAdapter(new SKPaint { Color = Utils.Convert(color) });
+            return new PenAdapter(new SKPaint { Color = Utils.Convert(color), IsStroke = true });
         }
 
         protected override RBrush CreateSolidBrush(RColor color)

Source/HtmlRenderer/Core/Dom/CssBox.cs

@@ -1346,7 +1346,7 @@ protected void PaintBackground(RGraphics g, RRect rect, bool isFirst, bool isLas
                     RGraphicsPath roundrect = null;
                     if (IsRounded)
                     {
-                        roundrect = RenderUtils.GetRoundRect(g, rect, ActualCornerNw, ActualCornerNe, ActualCornerSe, ActualCornerSw);
+                        roundrect = RenderUtils.GetRoundRect(g, rect, ActualBorderRadiusTopLeft, ActualBorderRadiusTopRight, ActualBorderRadiusBottomRight, ActualBorderRadiusBottomLeft);
                     }
 
                     Object prevMode = null;