WIP: Support the clip-path property #211

examples/outline.rs

@@ -8,51 +8,59 @@ fn main() {
 }
 
 fn app() -> Element {
+    let clip_styles = [
+      // "clip-path: inset(100px 50px);",
+      "clip-path: circle(40%);",
+      "clip-path: ellipse(430px 440px at 40% 10%);",
+      "clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);",
+      // "clip-path: path(\"M0.5,1 C0.5,1,0,0.7,0,0.3 A0.25,0.25,1,1,1,0.5,0.3 A0.25,0.25,1,1,1,1,0.3 C1,0.7,0.5,1,0.5,1 Z\");",
+      "clip-path: rect(5px 5px 160px 145px round 20%);",
+      // "clip-path: shape(from 0% 0%, line to 100% 0%, line to 50% 100%, close);",
+    ];
+
     rsx! {
         style { {CSS} }
-        div { "padd           " }
-        div { "padd           " }
-        div { "padd           " }
-        div { "padd           " }
         div {
-            class: "colorful",
-            id: "a",
-            div { "Dioxus12312312312321" }
-            div { "Dioxus12312312312321" }
-            div { "Dioxus12312312312321" }
-            div { "Dioxus12312312312321" }
-            div { "Dioxus12312312312321" }
-            div { "Dioxus12312312312321" }
+          class: "example",
+          div {
+            class: "imagecontainer",
+            "no clip path"
+            img {
+              class: "image",
+              src: "https://images.dog.ceo/breeds/pitbull/dog-3981540_1280.jpg"
+            }
+          }
+
+          for style in clip_styles {
+            div  {
+              class: "imagecontainer",
+              {style}
+              img {
+                class: "image",
+                style: "{style}",
+                src: "https://images.dog.ceo/breeds/pitbull/dog-3981540_1280.jpg"
+              }
+            }
+          }
         }
     }
 }
 
 const CSS: &str = r#"
-.colorful {
-    border-right-color: #000;
-    border-left-color: #ff0;
-    border-top-color: #F01;
-    border-bottom-color: #0f0;
+.example {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
 }
-#a {
-    height:300px;
-    background-color: gray;
-    border: 1px solid black;
-    // border-radius: 50px 20px;
-    border-top-color: red;
-    // padding:20px;
-    // margin:20px;
-    // border-radius: 10px;
-    border-radius: 10% 30% 50% 70%;
-    border-left: 4px solid #000;
-    border-top: 10px solid #ff0;
-    border-right:  3px solid #F01;
-    border-bottom:  9px solid #0f0;
-    // box-shadow: 10px 10px gray;
-
-    margin: 100px;
-    outline-width: 50px;
-    outline-style: solid;
-    outline-color: blue;
+.image {
+  border: solid 1px green;
+  width: 300px;
+  height: 300px;
+}
+.imagecontainer {
+  border: solid 1px red;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
 }
 "#;

packages/blitz-paint/src/kurbo_css/css_box.rs

@@ -1,4 +1,4 @@
-use kurbo::{Arc, BezPath, Ellipse, Insets, PathEl, Point, Rect, Shape as _, Vec2};
+use kurbo::{Arc, BezPath, Circle, Ellipse, Insets, PathEl, Point, Rect, RoundedRect, Shape as _, Vec2};
 use std::{f64::consts::FRAC_PI_2, f64::consts::PI};
 
 use super::non_uniform_radii::NonUniformRoundedRectRadii;
@@ -174,6 +174,38 @@ impl CssBox {
         path
     }
 
+    pub fn circle_path(&self, center: Point, radius: f64) -> BezPath {
+        let path = Circle::new(center, radius).to_path(BezPath::TOLERANCE);
+        path
+    }
+
+    pub fn ellipse_path(&self, center: Point, radii: Vec2) -> BezPath {
+        let path = Ellipse::new(center, radii, 0.0).to_path(BezPath::TOLERANCE);
+        path
+    }
+
+    pub fn path_from_path_vec(&self, path: Vec<PathEl>) -> BezPath {
+        let path = BezPath::from_vec(path);
+        path
+    }
+
+    pub fn polygon_path(&self, points: &[Point]) -> BezPath {
+        let mut path = BezPath::new();
+        if !points.is_empty() {
+            path.move_to(points[0]);
+            for point in points.iter().skip(1) {
+                path.line_to(*point);
+            }
+            path.close_path();
+        }
+        path
+    }
+
+    pub fn rect_path(&self, x0: f64, y0: f64, x1: f64, y1: f64, radii: (f64, f64, f64, f64)) -> BezPath {
+        let path = RoundedRect::new(x0, y0, x1, y1, radii).to_path(BezPath::TOLERANCE);
+        path
+    }
+
     fn shape(&self, path: &mut BezPath, line: CssBoxKind, direction: Direction) {
         use Corner::*;