Merge pull request #37 from girayk/mask

clip masks

Author: k9p5

playground/main.ts

@@ -20,6 +20,16 @@ const video = await composition.add(
     .offsetBy(30)
 );
 
+const mask = new core.CircleMask({
+  radius: 1080/2,
+  position: {
+    x: 1920 / 2,
+    y: 1080 / 2,
+  },
+});
+
+video.mask = mask;
+
 video.animate()
   .alpha(0.5).to(1, 120).to(0.5, 120).to(1, 60)
   .scale(0.1, 0, 'easeIn').to(1, 30)

src/clips/index.ts

@@ -14,3 +14,4 @@ export * from './video';
 export * from './audio';
 export * from './utils';
 export * from './html';
+export * from './mask';

src/clips/mask/circleMask.ts

@@ -0,0 +1,19 @@
+import { Mask } from "./mask";
+import { CircleMaskProps } from "./mask.types";
+
+/**
+ * A circular mask of a given radius
+ */
+export class CircleMask extends Mask {
+
+    private _radius: number;
+
+    public constructor(props: CircleMaskProps){
+        super(props);
+
+        this._radius = props.radius;
+
+        this.circle(this.position.x, this.position.y, this._radius)
+        this.fill({color: '#FFF'})
+    }
+}

src/clips/mask/ellipseMask.ts

@@ -0,0 +1,20 @@
+import { EllipseMaskProps } from './mask.types';
+import { Mask } from './mask';
+
+export class EllipseMask extends Mask {
+	private _radius: { x: number; y: number };
+
+	public constructor(props: EllipseMaskProps) {
+		super(props);
+
+		this._radius = props.radius;
+
+		this.ellipse(
+			this.position.x,
+			this.position.y,
+			this._radius.x,
+			this._radius.y,
+		);
+		this.fill({ color: '#FFF' });
+	}
+}

src/clips/mask/index.ts

@@ -0,0 +1,8 @@
+import { CircleMask } from "./circleMask";
+import { EllipseMask } from "./ellipseMask";
+import { RectangleMask } from "./rectangleMask";
+import { RoundRectangleMask } from "./roundRectangleMask";
+import { StarMask } from "./starMask";
+
+export { CircleMask, EllipseMask, RectangleMask, RoundRectangleMask, StarMask };
+

src/clips/mask/mask.ts

@@ -0,0 +1,9 @@
+import { Graphics } from "pixi.js";
+import type { MaskProps } from "./mask.types";
+
+export class Mask extends Graphics {
+    constructor(props: MaskProps) {
+        super();
+        this.position = props.position ?? {x: 0, y: 0};
+    }
+}

src/clips/mask/mask.types.ts

@@ -0,0 +1,35 @@
+
+
+export interface MaskProps {
+    /**
+     * The position of the center of the mask for circular, elliptical and star masks and 
+     * the top left corner of the mask for rectangular masks
+     */
+    position?: { x: number, y: number },
+}
+
+export interface CircleMaskProps extends MaskProps {
+    radius: number,
+}
+
+export interface EllipseMaskProps extends MaskProps {
+    radius: {
+        x: number,
+        y: number,
+    }
+}
+
+export interface RectangleMaskProps extends MaskProps {
+	rectangleWidth: number;
+	rectangleHeight: number;
+}
+
+export interface RoundRectangleMaskProps extends RectangleMaskProps {
+    borderRadius: number,
+}
+
+export interface StarMaskProps extends MaskProps {
+    numberOfPoints: number,
+    radius: number,
+    innerRadius?: number,
+}

src/clips/mask/rectangleMask.ts

@@ -0,0 +1,19 @@
+import { Mask } from './mask';
+import { RectangleMaskProps } from './mask.types';
+
+
+
+export class RectangleMask extends Mask  {
+	private _rectangleWidth: number;
+	private _rectangleHeight: number;
+
+	public constructor(props: RectangleMaskProps) {
+		super(props);
+        
+        this._rectangleWidth = props.rectangleWidth;
+        this._rectangleHeight = props.rectangleHeight;
+
+		this.rect(this.position.x, this.position.y, this._rectangleWidth, this._rectangleHeight);
+		this.fill({ color: '#FFF' });
+	}
+}

src/clips/mask/roundRectangleMask.ts

@@ -0,0 +1,20 @@
+import {Graphics} from "pixi.js";
+import { RoundRectangleMaskProps } from "./mask.types";
+
+export class RoundRectangleMask extends Graphics {
+    private _rectangleWidth: number;
+    private _rectangleHeight: number;
+    private _borderRadius: number;
+
+
+    public constructor(props: RoundRectangleMaskProps) {
+        super(props);
+
+        this._rectangleWidth = props.rectangleWidth;
+        this._rectangleHeight = props.rectangleHeight;
+        this._borderRadius = props.borderRadius;
+
+        this.roundRect(this.position.x, this.position.y, this._rectangleWidth, this._rectangleHeight, this._borderRadius)
+        this.fill({color: '#FFF'})
+    }
+}

src/clips/mask/starMask.ts

@@ -0,0 +1,23 @@
+import {Graphics} from "pixi.js";
+import { StarMaskProps } from "./mask.types";
+import { Mask } from "./mask";
+
+
+
+
+export class StarMask extends Mask {
+
+    private _numberOfPoints: number;
+    private _radius: number;
+    private _innerRadius: number | undefined;
+    public constructor(props: StarMaskProps){
+        super(props);
+
+        this._numberOfPoints = props.numberOfPoints;
+        this._radius = props.radius;
+        this._innerRadius = props.innerRadius;
+
+        this.star(this.position.x, this.position.y, this._numberOfPoints, this._radius, this._innerRadius, this.rotation)
+        this.fill({color: '#FFF'})
+    }
+}