apexify.js 5.0.3 → 5.1.0

package/lib/Canvas/utils/Custom/advancedLines.ts

@@ -103,10 +103,10 @@ export function drawMarker(
 }
 
 /**
- * Creates a smooth path from points
+ * Creates a smooth path from points using Cardinal Spline (graph-like smoothness)
  * @param ctx - Canvas 2D context
  * @param points - Array of points
- * @param tension - Smoothness (0-1)
+ * @param tension - Smoothness (0-1, default 0.5, lower = smoother)
  * @param closed - Whether path is closed
  */
 export function createSmoothPath(
@@ -117,6 +117,10 @@ export function createSmoothPath(
 ): void {
   if (points.length < 2) return;
   
+  // Enable anti-aliasing for smoother rendering
+  ctx.imageSmoothingEnabled = true;
+  ctx.imageSmoothingQuality = 'high';
+  
   ctx.beginPath();
   ctx.moveTo(points[0].x, points[0].y);
   
@@ -125,18 +129,35 @@ export function createSmoothPath(
     return;
   }
   
+  // Cardinal spline - produces graph-like smooth curves
+  // Ultra-high resolution for maximum smoothness (like professional graphing libraries)
+  const segmentsPerCurve = 50; // Increased to 50 for ultra-smooth curves
+  
   for (let i = 0; i < points.length - 1; i++) {
     const p0 = i > 0 ? points[i - 1] : (closed ? points[points.length - 1] : points[i]);
     const p1 = points[i];
     const p2 = points[i + 1];
     const p3 = i < points.length - 2 ? points[i + 2] : (closed ? points[0] : p2);
     
-    const cp1x = p1.x + (p2.x - p0.x) / 6 * tension;
-    const cp1y = p1.y + (p2.y - p0.y) / 6 * tension;
-    const cp2x = p2.x - (p3.x - p1.x) / 6 * tension;
-    const cp2y = p2.y - (p3.y - p1.y) / 6 * tension;
+    // Cardinal spline control points (optimized for maximum smoothness)
+    const t = (1 - tension) * 0.5; // Convert tension to cardinal spline parameter
+    
+    const cp1x = p1.x + t * (p2.x - p0.x);
+    const cp1y = p1.y + t * (p2.y - p0.y);
+    const cp2x = p2.x - t * (p3.x - p1.x);
+    const cp2y = p2.y - t * (p3.y - p1.y);
     
-    ctx.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, p2.x, p2.y);
+    // Draw ultra-smooth curve with many segments for graph-like quality
+    for (let s = 0; s <= segmentsPerCurve; s++) {
+      const t = s / segmentsPerCurve;
+      const point = cubicBezier(p1, { x: cp1x, y: cp1y }, { x: cp2x, y: cp2y }, p2, t);
+      
+      if (s === 0 && i === 0) {
+        ctx.moveTo(point.x, point.y);
+      } else {
+        ctx.lineTo(point.x, point.y);
+      }
+    }
   }
   
   if (closed) {
@@ -145,10 +166,32 @@ export function createSmoothPath(
 }
 
 /**
- * Creates a Catmull-Rom spline path
+ * Cubic Bezier interpolation helper
+ */
+function cubicBezier(
+  p0: { x: number; y: number },
+  p1: { x: number; y: number },
+  p2: { x: number; y: number },
+  p3: { x: number; y: number },
+  t: number
+): { x: number; y: number } {
+  const mt = 1 - t;
+  const mt2 = mt * mt;
+  const mt3 = mt2 * mt;
+  const t2 = t * t;
+  const t3 = t2 * t;
+  
+  return {
+    x: mt3 * p0.x + 3 * mt2 * t * p1.x + 3 * mt * t2 * p2.x + t3 * p3.x,
+    y: mt3 * p0.y + 3 * mt2 * t * p1.y + 3 * mt * t2 * p2.y + t3 * p3.y
+  };
+}
+
+/**
+ * Creates a Catmull-Rom spline path (ultra-smooth, passes through all points - best for graphs)
  * @param ctx - Canvas 2D context
  * @param points - Array of points
- * @param tension - Tension (0-1)
+ * @param tension - Tension (0-1, default 0.5, lower = tighter curves)
  * @param closed - Whether path is closed
  */
 export function createCatmullRomPath(
@@ -159,6 +202,10 @@ export function createCatmullRomPath(
 ): void {
   if (points.length < 2) return;
   
+  // Enable anti-aliasing for smoother rendering
+  ctx.imageSmoothingEnabled = true;
+  ctx.imageSmoothingQuality = 'high';
+  
   ctx.beginPath();
   ctx.moveTo(points[0].x, points[0].y);
   
@@ -168,6 +215,7 @@ export function createCatmullRomPath(
   }
   
   const segments = closed ? points.length : points.length - 1;
+  const segmentsPerCurve = 60; // Ultra-high resolution for maximum smoothness (graph quality)
   
   for (let i = 0; i < segments; i++) {
     const p0 = closed && i === 0 ? points[points.length - 1] : (i > 0 ? points[i - 1] : points[i]);
@@ -175,9 +223,12 @@ export function createCatmullRomPath(
     const p2 = points[(i + 1) % points.length];
     const p3 = closed && i === segments - 1 ? points[0] : (i < points.length - 2 ? points[i + 2] : p2);
     
-    for (let t = 0; t <= 1; t += 0.1) {
+    // Draw ultra-smooth curve with maximum resolution for graph-like quality
+    for (let s = 0; s <= segmentsPerCurve; s++) {
+      const t = s / segmentsPerCurve;
       const point = catmullRom(p0, p1, p2, p3, t, tension);
-      if (t === 0) {
+      
+      if (s === 0 && i === 0) {
         ctx.moveTo(point.x, point.y);
       } else {
         ctx.lineTo(point.x, point.y);
@@ -191,7 +242,8 @@ export function createCatmullRomPath(
 }
 
 /**
- * Catmull-Rom interpolation
+ * Catmull-Rom spline interpolation (corrected formula)
+ * This creates curves that pass through all control points
  */
 function catmullRom(
   p0: { x: number; y: number },
@@ -204,21 +256,21 @@ function catmullRom(
   const t2 = t * t;
   const t3 = t2 * t;
   
-  const x = 0.5 * (
-    (2 * p1.x) +
-    (-p0.x + p2.x) * t +
-    (2 * p0.x - 5 * p1.x + 4 * p2.x - p3.x) * t2 +
-    (-p0.x + 3 * p1.x - 3 * p2.x + p3.x) * t3
-  ) * tension;
+  // Proper Catmull-Rom spline formula with tension
+  // Tension typically ranges from 0 (tight) to 1 (loose)
+  const s = (1 - tension) * 0.5;
+  
+  const x = (2 * p1.x) +
+    s * ((-p0.x + p2.x) * t +
+         (2 * p0.x - 5 * p1.x + 4 * p2.x - p3.x) * t2 +
+         (-p0.x + 3 * p1.x - 3 * p2.x + p3.x) * t3);
   
-  const y = 0.5 * (
-    (2 * p1.y) +
-    (-p0.y + p2.y) * t +
-    (2 * p0.y - 5 * p1.y + 4 * p2.y - p3.y) * t2 +
-    (-p0.y + 3 * p1.y - 3 * p2.y + p3.y) * t3
-  ) * tension;
+  const y = (2 * p1.y) +
+    s * ((-p0.y + p2.y) * t +
+         (2 * p0.y - 5 * p1.y + 4 * p2.y - p3.y) * t2 +
+         (-p0.y + 3 * p1.y - 3 * p2.y + p3.y) * t3);
   
-  return { x: p1.x + x, y: p1.y + y };
+  return { x: x * 0.5, y: y * 0.5 };
 }
 
 /**

package/lib/Canvas/utils/Custom/customLines.ts

@@ -5,6 +5,10 @@ import { drawArrow, drawMarker, createSmoothPath, createCatmullRomPath, applyLin
 
 
 export async function customLines(ctx: SKRSContext2D, options: CustomOptions[]): Promise<void> {
+    // Enable high-quality anti-aliasing for ultra-smooth lines (graph quality)
+    ctx.imageSmoothingEnabled = true;
+    ctx.imageSmoothingQuality = 'high';
+    
     let previousEndCoordinates: { x: number; y: number } | null = null;
     let currentStyle: CustomOptions['lineStyle'] | null = null;
     let inSingleLineSequence = false;

package/lib/Canvas/utils/types.ts

@@ -91,11 +91,14 @@ export interface CanvasConfig {
       opacity?: number; // NEW: Background image opacity
     };
     videoBg?: {
-      source: string;
-      frame?: number; // Extract specific frame (default: 0)
+      source: string | Buffer; // Video file path, URL, or Buffer
+      frame?: number; // Extract specific frame number (default: 0)
+      time?: number; // Extract frame at specific time in seconds (overrides frame if provided)
       loop?: boolean; // Loop video (default: false)
       autoplay?: boolean; // Autoplay (default: false)
       opacity?: number; // Video opacity (default: 1)
+      format?: 'jpg' | 'png'; // Output format (default: 'jpg')
+      quality?: number; // JPEG quality 1-31, lower = better (default: 2)
     };
 
     colorBg?: string;
@@ -887,6 +890,7 @@ export interface PaletteOptions {
 }
 
   export interface ExtractFramesOptions {
+  outputDirectory?: string; // Directory to save frames
     interval: number;
     outputFormat?: 'jpg' | 'png';
     frameSelection?: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "apexify.js",
-  "version": "5.0.3",
+  "version": "5.1.0",
   "description": "🎨 Advanced Canvas Rendering Library - Professional image processing, shape drawing, text effects, patterns, filters, and charts. Built with TypeScript & Rust for high performance.",
   "author": "zenith-79",
   "license": "MIT",
@@ -182,7 +182,6 @@
     "@napi-rs/canvas": "^0.1.80",
     "apexify.js": "^5.0.0",
     "axios": "^1.7.7",
-    "fluent-ffmpeg": "^2.1.3",
     "fs-extra": "^11.3.1",
     "gifencoder": "^2.0.1",
     "imgur": "^2.5.0",
@@ -191,7 +190,6 @@
     "sharp": "^0.34.4"
   },
   "devDependencies": {
-    "@types/fluent-ffmpeg": "^2.1.27",
     "@types/gifencoder": "^2.0.3",
     "@types/node": "^22.5.4",
     "ts-node": "^10.9.2",