Rotate wall frame portrait, letterbox feed to frame window
This commit is contained in:
@@ -26,7 +26,7 @@ import { Recipe, GPSInfo, FrameId } from '../types';
|
||||
import { getSkiaColorMatrix, applyExposureGain } from '../utils/colorUtils';
|
||||
import { TONE_SKSL, getToneUniforms } from '../utils/toneShader';
|
||||
import { CINEMA_SKSL, getCinemaUniforms, cinemaOffFlat } from '../utils/cinemaShader';
|
||||
import { polaroidLayout, wallframeLayout } from '../utils/frameUtils';
|
||||
import { polaroidLayout, wallframeLayout, WALLFRAME_PNG_W, WALLFRAME_PNG_H } from '../utils/frameUtils';
|
||||
|
||||
interface ViewfinderProps {
|
||||
mode: 'camera' | 'library';
|
||||
@@ -556,10 +556,11 @@ export default function Viewfinder({
|
||||
if (selectedFrame === 'wallframe') {
|
||||
const geo = wallGeo;
|
||||
if (!geo || !wallImage) return null; // PNG still loading → bare feed
|
||||
const { frame } = geo;
|
||||
// Letterbox the live feed black outside the PNG, then draw the artwork:
|
||||
// its transparent window lets the fullscreen feed show through (the mat
|
||||
// opening = center crop of the feed, WYSIWYG with the export crop).
|
||||
const { frame, drawMatrix } = geo;
|
||||
// Letterbox the live feed black outside the frame rect, then draw the
|
||||
// artwork ROTATED into that rect: its transparent window shows the feed
|
||||
// (cover-cropped center, WYSIWYG with the export crop) and the mat covers
|
||||
// the rest of the screen — the feed never fills the whole display.
|
||||
const black = '#000000';
|
||||
return (
|
||||
<Group>
|
||||
@@ -567,7 +568,9 @@ export default function Viewfinder({
|
||||
<Rect x={0} y={frame.y + frame.h} width={vw} height={vh - frame.y - frame.h} color={black} />
|
||||
<Rect x={0} y={frame.y} width={frame.x} height={frame.h} color={black} />
|
||||
<Rect x={frame.x + frame.w} y={frame.y} width={vw - frame.x - frame.w} height={frame.h} color={black} />
|
||||
<SkiaImage image={wallImage} x={frame.x} y={frame.y} width={frame.w} height={frame.h} fit="fill" />
|
||||
<Group matrix={drawMatrix}>
|
||||
<SkiaImage image={wallImage} x={0} y={0} width={WALLFRAME_PNG_W} height={WALLFRAME_PNG_H} fit="fill" />
|
||||
</Group>
|
||||
</Group>
|
||||
);
|
||||
}
|
||||
@@ -856,13 +859,14 @@ export default function Viewfinder({
|
||||
);
|
||||
}
|
||||
|
||||
// WALL FRAME (library): the photo is cover-cropped (center) into the PNG's
|
||||
// fixed 3:2 window — the mat opening of a real frame hides the print edges.
|
||||
// The window never letterboxes a mismatched aspect; the artwork PNG is drawn
|
||||
// over the crop afterwards (its transparent window reveals the photo).
|
||||
// WALL FRAME (library): the photo is cover-cropped (center) into the frame's
|
||||
// fixed 2:3 window (rotated artwork) — the mat opening of a real frame hides
|
||||
// the print edges. The window never letterboxes a mismatched aspect; the
|
||||
// artwork PNG is drawn rotated over the crop afterwards (its transparent
|
||||
// window reveals the photo).
|
||||
if (mode === 'library' && wallGeo && wallImage && skiaImage && libraryImageUri) {
|
||||
const win = wallGeo.window;
|
||||
const frame = wallGeo.frame;
|
||||
const drawMatrix = wallGeo.drawMatrix;
|
||||
const winRect = rect(win.x, win.y, win.w, win.h);
|
||||
return (
|
||||
<View className="flex-1 relative overflow-hidden bg-black items-center justify-center">
|
||||
@@ -905,10 +909,12 @@ export default function Viewfinder({
|
||||
</Rect>
|
||||
</Group>
|
||||
)}
|
||||
{/* Artwork over the crop: transparent window reveals it, mat covers the
|
||||
rest. Drawn last so semi-transparent mat edges blend over the photo
|
||||
instead of the reverse. */}
|
||||
<SkiaImage image={wallImage} x={frame.x} y={frame.y} width={frame.w} height={frame.h} fit="fill" />
|
||||
{/* Artwork (rotated) over the crop: transparent window reveals it, mat
|
||||
covers the rest. Drawn last so semi-transparent mat edges blend over
|
||||
the photo instead of the reverse. */}
|
||||
<Group matrix={drawMatrix}>
|
||||
<SkiaImage image={wallImage} x={0} y={0} width={WALLFRAME_PNG_W} height={WALLFRAME_PNG_H} fit="fill" />
|
||||
</Group>
|
||||
{renderGPSWatermark()}
|
||||
</Canvas>
|
||||
</View>
|
||||
|
||||
+16
-10
@@ -7,7 +7,7 @@ import { Recipe, GPSInfo, FrameId } from '../types';
|
||||
import { getSkiaColorMatrix, applyExposureGain } from './colorUtils';
|
||||
import { TONE_SKSL, getToneUniforms, toneIsActive } from './toneShader';
|
||||
import { CINEMA_SKSL, getCinemaUniforms, cinemaIsActive } from './cinemaShader';
|
||||
import { drawFrameOnCanvas, polaroidLayout, POLAROID_CARD, POLAROID_WIN_W, wallframeLayout, WALLFRAME_IMG_W, WALLFRAME_IMG_H } from './frameUtils';
|
||||
import { drawFrameOnCanvas, polaroidLayout, POLAROID_CARD, POLAROID_WIN_W, wallframeLayout, WALLFRAME_W, WALLFRAME_H } from './frameUtils';
|
||||
import { patchJpegDpi } from './jpegDpi';
|
||||
|
||||
export interface ExportResult {
|
||||
@@ -260,10 +260,11 @@ export async function processAndExportPhoto(
|
||||
// processed picture is composited, uncropped, into the window of a bigger
|
||||
// off-white card (real print proportions, see frameUtils) — the export IS
|
||||
// the card, with the photo scaled to the window so it keeps ~WIN_W of the
|
||||
// card width. WALL FRAME: the export IS the frame PNG at native resolution,
|
||||
// with the photo cover-cropped (center) into the fixed 3:2 window (the mat
|
||||
// opening of a real frame). Other frames (classic white border, legacy
|
||||
// cinematic bars) draw over the photo-sized canvas as before.
|
||||
// card width. WALL FRAME: the export IS the ROTATED frame PNG at its native
|
||||
// portrait size (WALLFRAME_W x WALLFRAME_H), with the photo cover-cropped
|
||||
// (center) into the fixed 2:3 window (the mat opening of a real frame).
|
||||
// Other frames (classic white border, legacy cinematic bars) draw over the
|
||||
// photo-sized canvas as before.
|
||||
let outputSurface: SkSurface = surface;
|
||||
let stampCanvas = canvas;
|
||||
let stampW = width;
|
||||
@@ -306,13 +307,13 @@ export async function processAndExportPhoto(
|
||||
stampH = outH;
|
||||
framedWindow = win;
|
||||
} else if (frameId === 'wallframe') {
|
||||
// Export at the PNG's native resolution: the mat artwork stays crisp and
|
||||
// the photo crop inside the window is as large as the asset allows.
|
||||
// Export at the ROTATED frame's native size (the frame is the product, so
|
||||
// the file is exactly frame-sized — never the photo's own dimensions).
|
||||
const photoImg = surface.makeImageSnapshot();
|
||||
const pw = photoImg.width();
|
||||
const ph = photoImg.height();
|
||||
const outW = WALLFRAME_IMG_W;
|
||||
const outH = WALLFRAME_IMG_H;
|
||||
const outW = WALLFRAME_W; // 3117
|
||||
const outH = WALLFRAME_H; // 4000
|
||||
const cardSurface = createSurface(outW, outH);
|
||||
if (!cardSurface) {
|
||||
console.error('Failed to create wallframe surface');
|
||||
@@ -350,8 +351,13 @@ export async function processAndExportPhoto(
|
||||
plainPaint
|
||||
);
|
||||
// Artwork over the crop: its transparent window reveals the photo, the
|
||||
// mat covers the rest.
|
||||
// mat covers the rest. The source PNG is landscape — rotate it 90° CW
|
||||
// onto the portrait canvas (same affine as wallframeLayout.drawMatrix).
|
||||
cardCanvas.save();
|
||||
cardCanvas.translate(outW, 0);
|
||||
cardCanvas.rotate(90, 0, 0);
|
||||
cardCanvas.drawImage(wfImage, 0, 0, plainPaint);
|
||||
cardCanvas.restore();
|
||||
outputSurface = cardSurface;
|
||||
stampCanvas = cardCanvas;
|
||||
stampW = outW;
|
||||
|
||||
+36
-22
@@ -32,28 +32,40 @@ export interface PolaroidLayout {
|
||||
}
|
||||
|
||||
// Wall frame: the PNG artwork lives at the project root (wallframe.png,
|
||||
// 4000x3117 RGBA, transparent window 675..3322 x 675..2441). Only the geometry
|
||||
// lives here; the bitmap itself is drawn by the caller (Viewfinder overlay /
|
||||
// export engine). The window is FIXED 3:2 landscape, so the photo is
|
||||
// cover-cropped (center) into it — the mat of a real frame hides the print
|
||||
// edges. Fractions are relative to the full PNG.
|
||||
export const WALLFRAME_IMG_W = 4000;
|
||||
export const WALLFRAME_IMG_H = 3117;
|
||||
export const WALLFRAME = {
|
||||
winLeft: 675 / 4000, // 0.16875
|
||||
winTop: 675 / 3117, // ≈ 0.21655
|
||||
winW: 2648 / 4000, // 0.662
|
||||
winH: 1767 / 3117, // ≈ 0.56689
|
||||
// 4000x3117 RGBA, transparent window cols 675..3322 x rows 675..2441). Only the
|
||||
// geometry lives here; the bitmap itself is drawn by the caller. The phone is
|
||||
// portrait, so the app shows the artwork ROTATED 90° CW (original top edge →
|
||||
// right edge): a portrait frame whose transparent window is a fixed 2:3
|
||||
// vertical opening. The photo is cover-cropped (center) into that opening — the
|
||||
// mat of a real frame hides the print edges. WALLFRAME_W/H and WALLFRAME_WIN
|
||||
// are the rotated display orientation; the affine in wallframeLayout maps the
|
||||
// source PNG pixels onto the frame rect so the drawn opening and the photo
|
||||
// window always line up.
|
||||
export const WALLFRAME_PNG_W = 4000; // source PNG width
|
||||
export const WALLFRAME_PNG_H = 3117; // source PNG height
|
||||
export const WALLFRAME_W = 3117; // rotated display width (= PNG height)
|
||||
export const WALLFRAME_H = 4000; // rotated display height (= PNG width)
|
||||
// Transparent window as fractions of the rotated image, derived from the same
|
||||
// affine used to draw the bitmap: X = w - (y/3117)w, Y = (x/4000)h.
|
||||
export const WALLFRAME_WIN = {
|
||||
left: 676 / 3117, // ≈ 0.21688
|
||||
top: 675 / 4000, // 0.16875
|
||||
w: 1766 / 3117, // ≈ 0.56657
|
||||
h: 2647 / 4000, // 0.66175
|
||||
} as const;
|
||||
|
||||
export interface WallframeLayout {
|
||||
frame: { x: number; y: number; w: number; h: number };
|
||||
window: { x: number; y: number; w: number; h: number };
|
||||
// Row-major Skia matrix that rotates the source PNG (WALLFRAME_PNG_W/H) 90° CW
|
||||
// into the frame rect. Feed it to <Group matrix> (viewfinder) or concat it on
|
||||
// the canvas (export) before drawing the bitmap.
|
||||
drawMatrix: number[];
|
||||
}
|
||||
|
||||
// Geometry of the wall-frame PNG inside an arbitrary container. The PNG is
|
||||
// contain-fitted ('contain', centered, letterboxed) for the live viewfinder, or
|
||||
// stretched to fill exactly ('fill', export canvas already has PNG aspect).
|
||||
// Geometry of the ROTATED wall-frame inside an arbitrary container. The frame
|
||||
// is contain-fitted ('contain', centered, letterboxed) for the live viewfinder,
|
||||
// or fills the container exactly ('fill', export canvas already at frame size).
|
||||
export function wallframeLayout(
|
||||
contW: number,
|
||||
contH: number,
|
||||
@@ -65,20 +77,22 @@ export function wallframeLayout(
|
||||
frameW = contW;
|
||||
frameH = contH;
|
||||
} else {
|
||||
const s = Math.min(contW / WALLFRAME_IMG_W, contH / WALLFRAME_IMG_H);
|
||||
frameW = WALLFRAME_IMG_W * s;
|
||||
frameH = WALLFRAME_IMG_H * s;
|
||||
const s = Math.min(contW / WALLFRAME_W, contH / WALLFRAME_H);
|
||||
frameW = WALLFRAME_W * s;
|
||||
frameH = WALLFRAME_H * s;
|
||||
}
|
||||
const fx = (contW - frameW) / 2;
|
||||
const fy = (contH - frameH) / 2;
|
||||
const scale = frameW / WALLFRAME_W; // == frameH / WALLFRAME_H
|
||||
return {
|
||||
frame: { x: fx, y: fy, w: frameW, h: frameH },
|
||||
window: {
|
||||
x: fx + WALLFRAME.winLeft * frameW,
|
||||
y: fy + WALLFRAME.winTop * frameH,
|
||||
w: WALLFRAME.winW * frameW,
|
||||
h: WALLFRAME.winH * frameH,
|
||||
x: fx + WALLFRAME_WIN.left * frameW,
|
||||
y: fy + WALLFRAME_WIN.top * frameH,
|
||||
w: WALLFRAME_WIN.w * frameW,
|
||||
h: WALLFRAME_WIN.h * frameH,
|
||||
},
|
||||
drawMatrix: [0, -scale, fx + frameW, scale, 0, fy, 0, 0, 1],
|
||||
};
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user