🎥 Clip path rendering for Animated cursors

This commit is contained in:
KaizIqbal 2020-07-31 13:39:50 +05:30
parent dc8f9aa69c
commit fefc743998
2 changed files with 14 additions and 4 deletions

View file

@ -1,6 +1,6 @@
import path from "path";
import fs from "fs";
import { staticCursors, animatedCursors } from "./cursors.json";
import { staticCursors, animatedCursors, animatedClip } from "./cursors.json";
// Source Directory
const svgsDir = path.resolve(__dirname, "svg");
@ -14,4 +14,4 @@ const staticSvgs = staticCursors.map((svg: string) =>
const bitmapsDir = path.resolve(process.cwd(), "bitmaps");
if (!fs.existsSync(bitmapsDir)) fs.mkdirSync(bitmapsDir);
export { staticSvgs, animatedCursors, svgsDir, bitmapsDir };
export { staticSvgs, animatedCursors, svgsDir, bitmapsDir, animatedClip };

View file

@ -3,7 +3,13 @@ import path from "path";
import puppeteer from "puppeteer";
import { generateRenderTemplate } from "./helpers/htmlTemplate";
import { staticSvgs, bitmapsDir, svgsDir, animatedCursors } from "./config";
import {
staticSvgs,
bitmapsDir,
svgsDir,
animatedCursors,
animatedClip,
} from "./config";
// --------------------------- Helpers
const frameNumber = (number: number, length: number) => {
@ -86,7 +92,11 @@ const frameNumber = (number: number, length: number) => {
const out = path.resolve(bitmapsDir, bitmap);
// Render
await svgElement.screenshot({ omitBackground: true, path: out });
await svgElement.screenshot({
omitBackground: true,
path: out,
clip: animatedClip,
});
// console.log(`${svg} frame ${frame}/${frames} rendered at ${out}`);
}