updated masks

Matze99 · Matze99 · commit 54a812cfe3b8 · 2024-11-07T12:06:09.000-08:00
diff --git a/playground/main.ts b/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)
diff --git a/src/clips/index.ts b/src/clips/index.ts
@@ -14,3 +14,4 @@ export * from './video';
 export * from './audio';
 export * from './utils';
 export * from './html';
+export * from './mask';
diff --git a/src/clips/mask/circleMask.ts b/src/clips/mask/circleMask.ts
@@ -1,19 +1,19 @@
-import {Graphics} from "pixi.js";
+import { Mask } from "./mask";
+import { CircleMaskProps } from "./mask.types";
 
+/**
+ * A circular mask of a given radius
+ */
+export class CircleMask extends Mask {
 
-export interface CircleMaskProps {
-    radius?: number,
-}
-
-export class CircleMask extends Graphics {
+    private _radius: number;
 
-    public radius = 30
     public constructor(props: CircleMaskProps){
-        super()
+        super(props);
 
-        Object.assign(this, props);
+        this._radius = props.radius;
 
-        this.circle(this.position.x + this.radius,  this.position.y + this.radius, this.radius)
+        this.circle(this.position.x, this.position.y, this._radius)
         this.fill({color: '#FFF'})
     }
 }
diff --git a/src/clips/mask/ellipseMask.ts b/src/clips/mask/ellipseMask.ts
@@ -1,26 +1,20 @@
-import {Graphics} from "pixi.js";
+import { EllipseMaskProps } from './mask.types';
+import { Mask } from './mask';
 
+export class EllipseMask extends Mask {
+	private _radius: { x: number; y: number };
 
-export interface ellipseMaskProps {
-    radius: {
-        x?: number,
-        y?: number,
-    }
-}
-
-export class ellipseMask extends Graphics {
-
-    public radius = {
-        x: 30,
-        y: 30
-    }
-
-    public constructor(props: ellipseMaskProps){
-        super()
+	public constructor(props: EllipseMaskProps) {
+		super(props);
 
-        Object.assign(this, props);
+		this._radius = props.radius;
 
-        this.ellipse(this.position.x + (this.radius.x /2),  this.position.y + (this.radius.y /2), this.radius.x /2, this.radius.y /2 )
-        this.fill({color: '#FFF'})
-    }
+		this.ellipse(
+			this.position.x,
+			this.position.y,
+			this._radius.x,
+			this._radius.y,
+		);
+		this.fill({ color: '#FFF' });
+	}
 }
diff --git a/src/clips/mask/index.ts b/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 };
+
diff --git a/src/clips/mask/mask.ts b/src/clips/mask/mask.ts
@@ -0,0 +1,12 @@
+import { Graphics } from "pixi.js";
+import type { MaskProps } from "./mask.types";
+
+/**
+ * A mask is a clip that is used to mask another visual clip.
+ */
+export class Mask extends Graphics {
+    constructor(props: MaskProps) {
+        super();
+        this.position = props.position ?? {x: 0, y: 0};
+    }
+}
diff --git a/src/clips/mask/mask.types.ts b/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,
+}
diff --git a/src/clips/mask/rectangleMask.ts b/src/clips/mask/rectangleMask.ts
@@ -1,39 +1,19 @@
-import {Graphics} from "pixi.js";
-import { int } from "../../types";
+import { Mask } from './mask';
+import { RectangleMaskProps } from './mask.types';
 
 
-export interface rectangleMaskProps {
-    _width?: number,
-    _height?: number,
-}
-
-export class rectangleMask extends Graphics {
-
-    public constructor(props: rectangleMaskProps) {
-        super()
-
-        Object.assign(this, props);
-
-        this.rect(this.position.x, this.position.y, this._width, this._height)
-        this.fill({color: '#FFF'})
-    }
-
-    private _width = 100;
-    private _height = 100;
-
-    set width(val: int){
-        this._width = val
-    }
 
-    get width(){
-        return this._width;
-    }
+export class RectangleMask extends Mask  {
+	private _rectangleWidth: number;
+	private _rectangleHeight: number;
 
-    set height(val: int){
-        this._height = val
-    }
+	public constructor(props: RectangleMaskProps) {
+		super(props);
+        
+        this._rectangleWidth = props.rectangleWidth;
+        this._rectangleHeight = props.rectangleHeight;
 
-    get height(){
-        return this._height;
-    }
+		this.rect(this.position.x, this.position.y, this._rectangleWidth, this._rectangleHeight);
+		this.fill({ color: '#FFF' });
+	}
 }
diff --git a/src/clips/mask/roundRectangleMask.ts b/src/clips/mask/roundRectangleMask.ts
@@ -1,42 +1,20 @@
 import {Graphics} from "pixi.js";
-import { int } from "../../types";
+import { RoundRectangleMaskProps } from "./mask.types";
 
+export class RoundRectangleMask extends Graphics {
+    private _rectangleWidth: number;
+    private _rectangleHeight: number;
+    private _borderRadius: number;
 
-export interface roundRectangleMaskProps {
-    _width?: number,
-    _height?: number,
-    radius?: number,
-}
-
-export class roundRectangleMask extends Graphics {
-
-    public radius = 50
 
-    public constructor(props: roundRectangleMaskProps) {
-        super()
+    public constructor(props: RoundRectangleMaskProps) {
+        super(props);
 
-        Object.assign(this, props);
+        this._rectangleWidth = props.rectangleWidth;
+        this._rectangleHeight = props.rectangleHeight;
+        this._borderRadius = props.borderRadius;
 
-        this.roundRect(this.position.x, this.position.y, this._width, this._height, this.radius)
+        this.roundRect(this.position.x, this.position.y, this._rectangleWidth, this._rectangleHeight, this._borderRadius)
         this.fill({color: '#FFF'})
     }
-
-    private _width = 100;
-    private _height = 100;
-
-    set width(val: int){
-        this._width = val
-    }
-
-    get width(){
-        return this._width;
-    }
-
-    set height(val: int){
-        this._height = val
-    }
-
-    get height(){
-        return this._height;
-    }
 }
diff --git a/src/clips/mask/starMask.ts b/src/clips/mask/starMask.ts
@@ -1,23 +1,23 @@
 import {Graphics} from "pixi.js";
+import { StarMaskProps } from "./mask.types";
+import { Mask } from "./mask";
+
 
 
-export interface StarMaskProps {
-    points?: number,
-    radius?: number,
-    InnerRadius?: number,
-}
 
-export class StarMask extends Graphics {
+export class StarMask extends Mask {
 
-    public points = 5
-    public radius = 30
-    public InnerRadius = 0
+    private _numberOfPoints: number;
+    private _radius: number;
+    private _innerRadius: number | undefined;
     public constructor(props: StarMaskProps){
-        super()
+        super(props);
 
-        Object.assign(this, props);
+        this._numberOfPoints = props.numberOfPoints;
+        this._radius = props.radius;
+        this._innerRadius = props.innerRadius;
 
-        this.star(this.position.x + this.radius, this.position.y + this.radius, this.points, this.radius, this.InnerRadius, this.rotation)
+        this.star(this.position.x, this.position.y, this._numberOfPoints, this._radius, this._innerRadius, this.rotation)
         this.fill({color: '#FFF'})
     }
 }
diff --git a/src/clips/mixins/visual.ts b/src/clips/mixins/visual.ts
@@ -13,7 +13,7 @@ import { Keyframe } from '../../models';
 import { Sprite } from 'pixi.js';
 
 import type { Serializer } from '../../services';
-import type { Container, Filter } from 'pixi.js';
+import type { Container, Filter, Graphics } from 'pixi.js';
 import type { Constructor, float, int, Anchor, Position, Scale, Translate2D, Percent, NumberCallback } from '../../types';
 
 type BaseClass = { view: Container } & Serializer;
@@ -27,6 +27,8 @@ export function VisualMixin<T extends Constructor<BaseClass>>(Base: T) {
 		 */
 		public filters?: Filter | Filter[];
 
+		private _mask?: Graphics;
+
 		@serializable(deserializers.Deserializer1D)
 		public _height?: int | Keyframe<int> | Percent | NumberCallback;
 
@@ -173,6 +175,18 @@ export function VisualMixin<T extends Constructor<BaseClass>>(Base: T) {
 			this._width = value;
 		}
 
+		/**
+		 * The mask to apply to the clip
+		 */
+		public get mask(): Graphics | undefined {
+			return this._mask;
+		}
+
+		public set mask(value: Graphics | undefined) {
+			this._mask = value;
+			this.view.mask = value ?? null;
+		}
+
 		/**
 		* The anchor sets the origin point of the clip. Setting the anchor to (0.5,0.5) 
 		* means the clips' origin is centered. Setting the anchor to (1,1) would mean 
