clip masks

Author: girayk

src/clips/mask/circleMask.ts

@@ -0,0 +1,19 @@
+import {Graphics} from "pixi.js";
+
+
+export interface CircleMaskProps {
+    radius?: number,
+}
+
+export class CircleMask extends Graphics {
+
+    public radius = 30
+    public constructor(props: CircleMaskProps){
+        super()
+
+        Object.assign(this, props);
+
+        this.circle(this.position.x + this.radius,  this.position.y + this.radius, this.radius)
+        this.fill({color: '#FFF'})
+    }
+}

src/clips/mask/ellipseMask.ts

@@ -0,0 +1,26 @@
+import {Graphics} from "pixi.js";
+
+
+export interface ellipseMaskProps {
+    radius: {
+        x?: number,
+        y?: number,
+    }
+}
+
+export class ellipseMask extends Graphics {
+
+    public radius = {
+        x: 30,
+        y: 30
+    }
+
+    public constructor(props: ellipseMaskProps){
+        super()
+
+        Object.assign(this, props);
+
+        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'})
+    }
+}

src/clips/mask/rectangleMask.ts

@@ -0,0 +1,39 @@
+import {Graphics} from "pixi.js";
+import { int } from "../../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;
+    }
+
+    set height(val: int){
+        this._height = val
+    }
+
+    get height(){
+        return this._height;
+    }
+}

src/clips/mask/roundRectangleMask.ts

@@ -0,0 +1,42 @@
+import {Graphics} from "pixi.js";
+import { int } from "../../types";
+
+
+export interface roundRectangleMaskProps {
+    _width?: number,
+    _height?: number,
+    radius?: number,
+}
+
+export class roundRectangleMask extends Graphics {
+
+    public radius = 50
+
+    public constructor(props: roundRectangleMaskProps) {
+        super()
+
+        Object.assign(this, props);
+
+        this.roundRect(this.position.x, this.position.y, this._width, this._height, this.radius)
+        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;
+    }
+}

src/clips/mask/starMask.ts

@@ -0,0 +1,23 @@
+import {Graphics} from "pixi.js";
+
+
+export interface StarMaskProps {
+    points?: number,
+    radius?: number,
+    InnerRadius?: number,
+}
+
+export class StarMask extends Graphics {
+
+    public points = 5
+    public radius = 30
+    public InnerRadius = 0
+    public constructor(props: StarMaskProps){
+        super()
+
+        Object.assign(this, props);
+
+        this.star(this.position.x + this.radius, this.position.y + this.radius, this.points, this.radius, this.InnerRadius, this.rotation)
+        this.fill({color: '#FFF'})
+    }
+}