[*] feat: video editor supoort drawing rectangle with round corner

Author: heng30

lib/video-editor/src/filters/video/draw_rectangle.rs

@@ -117,66 +117,69 @@ impl DrawRectangleFilter {
         *pixel = Rgba([r, g, b, a]);
     }
 
-    fn sdf_rounded_rect(
-        px: f32,
-        py: f32,
-        rect_x: f32,
-        rect_y: f32,
-        width: f32,
-        height: f32,
-        r: f32,
-    ) -> f32 {
-        // Translate point relative to rectangle top-left
-        let p_x = px - rect_x;
-        let p_y = py - rect_y;
-
-        // Calculate distance from each edge
-        let d_left = p_x;
-        let d_right = width - p_x;
-        let d_top = p_y;
-        let d_bottom = height - p_y;
-
-        // Find minimum distance to any edge
-        let d_x = d_left.min(d_right);
-        let d_y = d_top.min(d_bottom);
-
-        // Check if we're in a corner region (both d_x and d_y are small)
-        if d_x < r && d_y < r && d_x >= 0.0 && d_y >= 0.0 {
-            // In corner region: calculate distance to the corner's arc
-            // Determine which corner
-            let corner_cx = if p_x < width / 2.0 { r } else { width - r };
-            let corner_cy = if p_y < height / 2.0 { r } else { height - r };
-
-            let dx = p_x - corner_cx;
-            let dy = p_y - corner_cy;
-            let dist_to_center = (dx * dx + dy * dy).sqrt();
-            r - dist_to_center
+    /// 判断点是否在圆角矩形内部
+    fn inside_rounded_rect(x: f64, y: f64, w: f64, h: f64, r: f64) -> bool {
+        // 检查是否在圆角区域
+        let near_left = x < r;
+        let near_right = x > w - r;
+        let near_top = y < r;
+        let near_bottom = y > h - r;
+
+        let in_corner = (near_left || near_right) && (near_top || near_bottom);
+
+        if in_corner {
+            // 圆角区域：检查是否在圆内
+            let cx = if near_left { r } else { w - r };
+            let cy = if near_top { r } else { h - r };
+            let dx = x - cx;
+            let dy = y - cy;
+            dx * dx + dy * dy <= r * r
         } else {
-            // In edge or interior region
-            let min_dist = d_x.min(d_y);
-            if min_dist >= 0.0 {
-                // Inside: return distance to nearest edge
-                min_dist.min(r)
-            } else {
-                // Outside: negative distance
-                min_dist
-            }
+            // 直线区域
+            x >= 0.0 && x <= w && y >= 0.0 && y <= h
         }
     }
 
-    #[inline]
-    fn aa_smoothstep(edge0: f32, edge1: f32, x: f32) -> f32 {
-        let t = ((x - edge0) / (edge1 - edge0)).clamp(0.0, 1.0);
-        t * t * (3.0 - 2.0 * t)
+    /// 计算点到圆角矩形边缘的距离（正值表示在内部）
+    fn distance_to_edge(x: f64, y: f64, w: f64, h: f64, r: f64) -> f64 {
+        let near_left = x < r;
+        let near_right = x > w - r;
+        let near_top = y < r;
+        let near_bottom = y > h - r;
+
+        let in_corner = (near_left || near_right) && (near_top || near_bottom);
+
+        if in_corner {
+            // 圆角区域：到圆弧的距离
+            let cx = if near_left { r } else { w - r };
+            let cy = if near_top { r } else { h - r };
+            let dx = x - cx;
+            let dy = y - cy;
+            let dist = (dx * dx + dy * dy).sqrt();
+            r - dist
+        } else if near_left {
+            x
+        } else if near_right {
+            w - x
+        } else if near_top {
+            y
+        } else if near_bottom {
+            h - y
+        } else {
+            // 内部区域：到最近边的距离
+            x.min(w - x).min(y).min(h - y)
+        }
     }
 
-    #[inline]
-    fn aa_alpha(sdf: f32) -> f32 {
-        // 1 pixel smooth transition range
-        const AA_RANGE: f32 = 1.0;
-        // SDF positive = inside, negative = outside
-        // Smooth transition from 0 to 1 across AA_RANGE
-        Self::aa_smoothstep(-AA_RANGE, AA_RANGE, sdf)
+    /// 颜色混合
+    fn blend_colors(c1: Rgba<u8>, c2: Rgba<u8>, t: f64) -> Rgba<u8> {
+        let t = t.clamp(0.0, 1.0);
+        Rgba([
+            (c1[0] as f64 * (1.0 - t) + c2[0] as f64 * t).round() as u8,
+            (c1[1] as f64 * (1.0 - t) + c2[1] as f64 * t).round() as u8,
+            (c1[2] as f64 * (1.0 - t) + c2[2] as f64 * t).round() as u8,
+            (c1[3] as f64 * (1.0 - t) + c2[3] as f64 * t).round() as u8,
+        ])
     }
 
     fn draw_filled_rounded_rect(
@@ -186,32 +189,148 @@ impl DrawRectangleFilter {
         width: u32,
         height: u32,
         corner_radius: u32,
-        color: &Rgba<u8>,
+        fill_color: &Rgba<u8>,
     ) {
-        let rx = rect_x as f32;
-        let ry = rect_y as f32;
-        let w = width as f32;
-        let h = height as f32;
-        let r = corner_radius as f32;
-
-        for dy in 0..height as i32 {
-            for dx in 0..width as i32 {
-                let px = rect_x + dx;
-                let py = rect_y + dy;
-
-                if px < 0 || py < 0 || px >= buffer.width() as i32 || py >= buffer.height() as i32 {
+        let x = rect_x as u32;
+        let y = rect_y as u32;
+        let (img_width, img_height) = buffer.dimensions();
+
+        // 限制圆角半径
+        let max_radius = (width / 2).min(height / 2);
+        let radius = corner_radius.min(max_radius);
+
+        // 遍历绘制区域
+        for dy in 0..height {
+            for dx in 0..width {
+                let px = x + dx;
+                let py = y + dy;
+
+                if px >= img_width || py >= img_height {
                     continue;
                 }
 
-                // Calculate signed distance field value
-                let sdf = Self::sdf_rounded_rect(px as f32, py as f32, rx, ry, w, h, r);
+                // 使用浮点数计算像素中心
+                let fx = dx as f64 + 0.5;
+                let fy = dy as f64 + 0.5;
+                let fw = width as f64;
+                let fh = height as f64;
+                let fr = radius as f64;
+
+                // 判断是否在圆角矩形内
+                let in_rect = Self::inside_rounded_rect(fx, fy, fw, fh, fr);
+                if !in_rect {
+                    continue;
+                }
+
+                // 计算抗锯齿
+                let dist = Self::distance_to_edge(fx, fy, fw, fh, fr);
+                let aa_range = 1.5;
+
+                let final_color = if dist < aa_range && dist >= 0.0 {
+                    let alpha = dist / aa_range;
+                    Self::blend_colors(Rgba([0, 0, 0, 0]), *fill_color, alpha)
+                } else {
+                    *fill_color
+                };
+
+                Self::draw_pixel_aa(buffer, px, py, &final_color, 1.0);
+            }
+        }
+    }
 
-                // Apply anti-aliasing based on SDF
-                let alpha = Self::aa_alpha(sdf);
+    /// 绘制带边框的圆角矩形
+    fn draw_rounded_rectangle_with_border(
+        buffer: &mut RgbaImage,
+        x: u32,
+        y: u32,
+        width: u32,
+        height: u32,
+        corner_radius: u32,
+        fill_color: &Rgba<u8>,
+        border_width: u32,
+        border_color: &Rgba<u8>,
+    ) {
+        let (img_width, img_height) = buffer.dimensions();
 
-                if alpha > 0.01 {
-                    Self::draw_pixel_aa(buffer, px as u32, py as u32, color, alpha);
+        // 限制圆角半径
+        let max_radius = (width / 2).min(height / 2);
+        let radius = corner_radius.min(max_radius);
+
+        // 遍历绘制区域
+        for dy in 0..height {
+            for dx in 0..width {
+                let px = x + dx;
+                let py = y + dy;
+
+                if px >= img_width || py >= img_height {
+                    continue;
+                }
+
+                // 使用浮点数计算像素中心
+                let fx = dx as f64 + 0.5;
+                let fy = dy as f64 + 0.5;
+                let fw = width as f64;
+                let fh = height as f64;
+                let fr = radius as f64;
+
+                // 判断是否在外部圆角矩形内
+                let in_outer = Self::inside_rounded_rect(fx, fy, fw, fh, fr);
+                if !in_outer {
+                    continue;
                 }
+
+                // 计算颜色和抗锯齿
+                let final_color = {
+                    let bw = border_width as f64;
+                    let inner_w = (fw - 2.0 * bw).max(0.0);
+                    let inner_h = (fh - 2.0 * bw).max(0.0);
+                    let inner_r = (fr - bw).max(0.0);
+
+                    // 计算到外边界的距离
+                    let outer_dist = Self::distance_to_edge(fx, fy, fw, fh, fr);
+
+                    // 计算到内边界的距离（边框与填充的交界）
+                    let inner_dist = if inner_w > 0.0 && inner_h > 0.0 {
+                        Self::distance_to_edge(fx - bw, fy - bw, inner_w, inner_h, inner_r)
+                    } else {
+                        f64::INFINITY
+                    };
+
+                    let aa_range = 1.5;
+
+                    // 判断是在填充区还是边框区
+                    let in_fill = inner_w > 0.0 && inner_h > 0.0 &&
+                        Self::inside_rounded_rect(fx - bw, fy - bw, inner_w, inner_h, inner_r);
+
+                    if in_fill {
+                        // 填充区：检查是否靠近内边界
+                        if inner_dist < aa_range && inner_dist >= 0.0 {
+                            let alpha = inner_dist / aa_range;
+                            Self::blend_colors(*border_color, *fill_color, alpha)
+                        } else {
+                            *fill_color
+                        }
+                    } else {
+                        // 边框区：需要检查外边界和内边界
+                        let mut color = *border_color;
+
+                        // 外边界抗锯齿（与背景混合）
+                        if outer_dist < aa_range && outer_dist >= 0.0 {
+                            let alpha = outer_dist / aa_range;
+                            color = Self::blend_colors(Rgba([0, 0, 0, 0]), color, alpha);
+                        }
+
+                        // 内边界抗锯齿（与填充混合）- 仅当靠近内边界时
+                        if inner_dist < aa_range && inner_dist >= 0.0 {
+                            let alpha = inner_dist / aa_range;
+                            color = Self::blend_colors(color, *fill_color, 1.0 - alpha);
+                        }
+
+                        color
+                    }
+                };
+
+                Self::draw_pixel_aa(buffer, px, py, &final_color, 1.0);
             }
         }
     }
@@ -234,35 +353,41 @@ impl DrawRectangleFilter {
         };
 
         // Draw filled rectangle
+        // Skip if we have a rounded rectangle with border (will be handled together)
         if let Some(fill) = self.fill_color {
             let fill_color = Rgba(apply_opacity(fill));
 
-            if corner_radius == 0 {
-                // Simple filled rectangle
-                for dy in 0..height {
-                    for dx in 0..width {
-                        let px = x + dx as i32;
-                        let py = y + dy as i32;
-                        if px >= 0
-                            && py >= 0
-                            && px < buffer.width() as i32
-                            && py < buffer.height() as i32
-                        {
-                            Self::draw_pixel_aa(buffer, px as u32, py as u32, &fill_color, 1.0);
+            // Only draw fill separately if: no border OR corner_radius is 0
+            let should_draw_fill_separately = self.border_color.is_none() || corner_radius == 0;
+
+            if should_draw_fill_separately {
+                if corner_radius == 0 {
+                    // Simple filled rectangle
+                    for dy in 0..height {
+                        for dx in 0..width {
+                            let px = x + dx as i32;
+                            let py = y + dy as i32;
+                            if px >= 0
+                                && py >= 0
+                                && px < buffer.width() as i32
+                                && py < buffer.height() as i32
+                            {
+                                Self::draw_pixel_aa(buffer, px as u32, py as u32, &fill_color, 1.0);
+                            }
                         }
                     }
+                } else {
+                    // Rounded rectangle fill (no border)
+                    Self::draw_filled_rounded_rect(
+                        buffer,
+                        x,
+                        y,
+                        width,
+                        height,
+                        corner_radius,
+                        &fill_color,
+                    );
                 }
-            } else {
-                // Rounded rectangle fill
-                Self::draw_filled_rounded_rect(
-                    buffer,
-                    x,
-                    y,
-                    width,
-                    height,
-                    corner_radius,
-                    &fill_color,
-                );
             }
         }
 
@@ -334,8 +459,21 @@ impl DrawRectangleFilter {
                     }
                 }
             } else {
-                // Note: Border rendering is not supported for rounded rectangles
-                // Only the fill will be rendered
+                // Rounded rectangle with border support
+                let fill_rgba = self.fill_color.map(|f| Rgba(apply_opacity(f)))
+                    .unwrap_or(Rgba([0, 0, 0, 0]));
+
+                Self::draw_rounded_rectangle_with_border(
+                    buffer,
+                    x.max(0) as u32,
+                    y.max(0) as u32,
+                    width,
+                    height,
+                    corner_radius,
+                    &fill_rgba,
+                    self.border_width,
+                    &border_color,
+                );
             }
         }