Merge pull request #33938 from hmajid2301/feature/react-native-canvas

Added react-native-canvas

types/react-native-canvas/index.d.ts

@@ -0,0 +1,206 @@
+// Type definitions for react-native-canvas 0.1
+// Project: https://github.com/iddan/react-native-canvas#readme
+// Definitions by: hmajid2301 <https://github.com/hmajid2301>
+// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
+// TypeScript Version: 3.1
+
+import * as React from "react";
+import { StyleProp, ViewStyle } from "react-native";
+
+export interface CanvasProps {
+    baseUrl?: string;
+    originWhitelist?: string[];
+    ref: (canvas: Canvas) => any;
+    style?: StyleProp<ViewStyle>;
+}
+
+export interface CanvasRenderingContext2D {
+    fillStyle: string;
+    font: string;
+    globalAlpha: number;
+    globalCompositionOperation: string;
+    linecap: string;
+    lineDashOffset: number;
+    lineJoin: string;
+    lineWidth: number;
+    miterLimit: number;
+    shadowBlur: number;
+    shadowColor: string;
+    shadowOffsetX: number;
+    shadowOffsetY: number;
+    strokeStyle: string;
+    textAlign: string;
+    arc: (
+        x: number,
+        y: number,
+        r: number,
+        sAngle: number,
+        eAngle: number,
+        counterClockwise?: number
+    ) => void;
+    arcTo: (x1: number, y1: number, x2: number, y2: number, r: number) => void;
+    beginPath: () => void;
+    bezierCurveTo: (
+        cp1x: number,
+        cp1y: number,
+        cp2x: number,
+        cp2y: number,
+        x: number,
+        y: number
+    ) => void;
+    clearRect: (x: number, y: number, width: number, height: number) => void;
+    clip: () => void;
+    closePath: () => void;
+    createImageData: (
+        //
+        width: number,
+        height: number,
+        imageData: ImageData
+    ) => void;
+    createLinearGradient: (
+        x0: number,
+        yo: number,
+        x1: number,
+        y1: number
+    ) => void;
+    createPattern: () => void;
+    createRadialGradient: (
+        x0: number,
+        y0: number,
+        r0: number,
+        x1: number,
+        y1: number,
+        r1: number
+    ) => void;
+    drawFocusIfNeeded: (html: HTMLElement) => void;
+    drawImage: (
+        image: Image,
+        dx: number,
+        dy: number,
+        sx?: number,
+        sy?: number,
+        sWidth?: number,
+        sHeight?: number,
+        dWidth?: number,
+        dHeight?: number
+    ) => void;
+    drawWidgetAsOnScreen: (window: any) => void;
+    drawWindow: (
+        window: any,
+        x: number,
+        y: number,
+        w: number,
+        h: number,
+        bgColor: string,
+        flags?: any
+    ) => void; //
+    fill: (Path2D: Path2D, fillRule?: any) => void;
+    fillRect: (x: number, y: number, width: number, height: number) => void;
+    fillText: (text: string, x: number, y: number, maxWidth?: number) => void;
+    ellipse: (
+        x: number,
+        y: number,
+        radiusX: number,
+        radiusY: number,
+        rotation: number,
+        startAngle: number,
+        endAngle: number,
+        anticlockwise?: boolean
+    ) => void;
+    getImageData: (sx: number, sy: number, sw: number, sh: number) => ImageData;
+    getLineDash: () => number[];
+    isPointInPath: (
+        x: number,
+        y: number,
+        fillRule: any,
+        path: Path2D
+    ) => boolean;
+    isPointInStroke: (x: number, y: number, path: Path2D) => boolean;
+    lineTo: (x: number, y: number) => void;
+    measureText: (text: string) => any;
+    moveTo: (x: number, y: number) => void;
+    putImageData: (
+        imageData: ImageData,
+        dx: number,
+        dy: number,
+        dirtyX?: number,
+        dirtyY?: number,
+        dirtyWidth?: number,
+        dirtyHeight?: number
+    ) => void;
+    quadraticCurveTo: (cpx: number, cpy: number, x: number, y: number) => void;
+    rect: (x: number, y: number, width: number, height: number) => void;
+    restore: () => void;
+    rotate: (angle: number) => void;
+    save: () => void;
+    scale: (x: number, y: number) => void;
+    setLineDash: (segments: number[]) => void;
+    setTransform: (
+        a: number,
+        b: number,
+        c: number,
+        d: number,
+        e: number,
+        f: number
+    ) => void;
+    stroke: (path: Path2D) => void;
+    strokeRect: (x: number, y: number, width: number, height: number) => void;
+    strokeText: (text: string, x: number, y: number, maxWidth?: number) => void;
+    transform: (
+        a: number,
+        b: number,
+        c: number,
+        d: number,
+        e: number,
+        f: number
+    ) => void;
+    translate: (x: number, y: number) => void;
+}
+
+export default class Canvas extends React.Component<CanvasProps> {
+    width: number;
+    height: number;
+    toDataURL: () => string;
+    getContext: (context: string) => CanvasRenderingContext2D;
+}
+
+export class Image {
+    constructor(canvas: Canvas, height?: number, width?: number);
+    crossOrigin: string | undefined;
+    height: number | undefined;
+    width: number | undefined;
+    src: string | undefined;
+    addEventListener: (event: string, func: (...args: any) => any) => void;
+}
+
+export class ImageData {
+    constructor(canvas: Canvas, data: number[], height: number, width: number);
+    readonly data: number[];
+    readonly height: number;
+    readonly width: number;
+}
+
+export class Path2D {
+    constructor(canvas: Canvas, ...args: any);
+    addPath: (
+        path: Path2D,
+        transform?: {
+            a: number;
+            b: number;
+            c: number;
+            d: number;
+            e: number;
+            f: number;
+        }
+    ) => void;
+
+    closePath: CanvasRenderingContext2D["closePath"];
+    moveTo: CanvasRenderingContext2D["moveTo"];
+    lineTo: CanvasRenderingContext2D["lineTo"];
+    bezierCurveTo: CanvasRenderingContext2D["bezierCurveTo"];
+    quadraticCurveTo: CanvasRenderingContext2D["quadraticCurveTo"];
+    arc: CanvasRenderingContext2D["arc"];
+    arcTo: CanvasRenderingContext2D["arcTo"];
+    ellipse: CanvasRenderingContext2D["ellipse"];
+    rect: CanvasRenderingContext2D["rect"];
+}

types/react-native-canvas/react-native-canvas-tests.tsx

@@ -0,0 +1,52 @@
+import * as React from "react";
+import { View } from "react-native";
+import Canvas, {
+    Image as CanvasImage,
+    Path2D,
+    ImageData
+} from "react-native-canvas";
+
+class CanvasTest extends React.Component {
+    render() {
+        return (
+            <View>
+                <Canvas ref={this.handleCanvas} />
+            </View>
+        );
+    }
+
+    handleCanvas = (canvas: Canvas) => {
+        canvas.width = 100;
+        canvas.height = 100;
+
+        const context = canvas.getContext("2d");
+        context.fillStyle = "purple";
+        context.fillRect(0, 0, 100, 100);
+
+        const ellipse = new Path2D(canvas);
+        ellipse.ellipse(50, 50, 25, 35, (45 * Math.PI) / 180, 0, 2 * Math.PI);
+        context.fillStyle = "purple";
+        context.fill(ellipse);
+
+        const image = new CanvasImage(canvas);
+        canvas.width = 100;
+        canvas.height = 100;
+
+        image.src =
+            "https://upload.wikimedia.org/wikipedia/commons/6/63/Biho_Takashi._Bat_Before_the_Moon%2C_ca._1910.jpg";
+        image.addEventListener("load", () => {
+            context.drawImage(image, 0, 0, 100, 100);
+        });
+
+        const imageData = context.getImageData(0, 0, 100, 100);
+        const data = Object.values(imageData.data);
+        const length = Object.keys(data).length;
+        for (let i = 0; i < length; i += 4) {
+            data[i] = 0;
+            data[i + 1] = 0;
+            data[i + 2] = 0;
+        }
+        const imgData = new ImageData(canvas, data, 100, 100);
+        context.putImageData(imgData, 0, 0);
+    }
+}

types/react-native-canvas/tsconfig.json

@@ -0,0 +1,17 @@
+{
+    "compilerOptions": {
+        "module": "commonjs",
+        "lib": ["es6", "es2017"],
+        "noImplicitAny": true,
+        "noImplicitThis": true,
+        "strictNullChecks": true,
+        "strictFunctionTypes": true,
+        "baseUrl": "../",
+        "typeRoots": ["../"],
+        "types": [],
+        "noEmit": true,
+        "forceConsistentCasingInFileNames": true,
+        "jsx": "react-native"
+    },
+    "files": ["index.d.ts", "react-native-canvas-tests.tsx"]
+}

types/react-native-canvas/tslint.json

@@ -0,0 +1 @@
+{ "extends": "dtslint/dt.json" }