Bắt đầu sửa lỗi

2026-07-17 09:33:24 +07:00
commit 2775662b62
134 changed files with 28571 additions and 0 deletions
@@ -0,0 +1,85 @@
+import { SkCanvas, SkPaint, Skia, BlendMode } from '@shopify/react-native-skia';
+import { FrameId } from '../types';
+
+export interface FrameDefinition {
+  id: FrameId;
+  name: string;
+}
+
+export const FRAMES: FrameDefinition[] = [
+  { id: 'none', name: 'NO FRAME' },
+  { id: 'classic-white', name: 'CLASSIC BORDER' },
+  { id: 'polaroid', name: 'RETRO POLAROID' },
+  { id: 'cinematic', name: 'CINEMATIC BARS' },
+];
+
+export function drawFrameOnCanvas(
+  canvas: SkCanvas,
+  width: number,
+  height: number,
+  frameId: FrameId
+) {
+  if (frameId === 'none') return;
+
+  const paint = Skia.Paint();
+  
+  if (frameId === 'classic-white') {
+    // A clean white border around the picture
+    paint.setColor(Skia.Color('#ffffff'));
+    paint.setStyle(0); // Fill
+    
+    const borderWidth = Math.min(width, height) * 0.05; // 5% border
+    
+    // Top border
+    canvas.drawRect(Skia.XYWHRect(0, 0, width, borderWidth), paint);
+    // Bottom border
+    canvas.drawRect(Skia.XYWHRect(0, height - borderWidth, width, borderWidth), paint);
+    // Left border
+    canvas.drawRect(Skia.XYWHRect(0, 0, borderWidth, height), paint);
+    // Right border
+    canvas.drawRect(Skia.XYWHRect(width - borderWidth, 0, borderWidth, height), paint);
+  } else if (frameId === 'polaroid') {
+    // Polaroid style: thick white borders, thicker at the bottom
+    paint.setColor(Skia.Color('#faf9f6')); // Off-white
+    paint.setStyle(0); // Fill
+
+    const sideBorder = Math.min(width, height) * 0.06; // 6% borders on sides/top
+    const bottomBorder = height * 0.18; // 18% border at bottom
+
+    // Top border
+    canvas.drawRect(Skia.XYWHRect(0, 0, width, sideBorder), paint);
+    // Left border
+    canvas.drawRect(Skia.XYWHRect(0, 0, sideBorder, height), paint);
+    // Right border
+    canvas.drawRect(Skia.XYWHRect(width - sideBorder, 0, sideBorder, height), paint);
+    // Bottom border
+    canvas.drawRect(Skia.XYWHRect(0, height - bottomBorder, width, bottomBorder), paint);
+
+    // Inner thin border (grey line separating image and card)
+    const innerPaint = Skia.Paint();
+    innerPaint.setColor(Skia.Color('#e5e5e5'));
+    innerPaint.setStrokeWidth(1);
+    innerPaint.setStyle(1); // Stroke
+    
+    canvas.drawRect(
+      Skia.XYWHRect(
+        sideBorder - 1,
+        sideBorder - 1,
+        width - 2 * sideBorder + 2,
+        height - sideBorder - bottomBorder + 2
+      ),
+      innerPaint
+    );
+  } else if (frameId === 'cinematic') {
+    // Cinematic black bars on top and bottom
+    paint.setColor(Skia.Color('#000000'));
+    paint.setStyle(0); // Fill
+
+    const barHeight = height * 0.12; // 12% cinematic letterbox height
+
+    // Top letterbox
+    canvas.drawRect(Skia.XYWHRect(0, 0, width, barHeight), paint);
+    // Bottom letterbox
+    canvas.drawRect(Skia.XYWHRect(0, height - barHeight, width, barHeight), paint);
+  }
+}