chore: rn perf

tools/demo/canvas/canvas2d/rn-skia-perf.ts

@@ -0,0 +1,55 @@
+import { Canvas } from '@nativescript/canvas';
+
+export function rnSkiaPerf(canvas: Canvas) {
+	const ctx = canvas.getContext('2d');
+
+	let numberOfBoxes = 1200;
+	const { width, height } = canvas as any;
+
+	const Size = 25;
+	const Increaser = 50;
+
+	const SizeWidth = Size;
+	const SizeHeight = Size * 0.45;
+
+	const pos = {
+		x: width / 2,
+		y: height * 0.25,
+	};
+
+	const rects = new Array(numberOfBoxes).fill(0).map((_, i) => {
+		return {
+			x: 5 + ((i * Size) % width),
+			y: 25 + Math.floor(i / (width / Size)) * Size,
+			width: SizeWidth,
+			height: SizeHeight,
+		};
+	});
+
+	function draw() {
+		ctx.clearRect(0, 0, width, height);
+		for (const rect of rects) {
+			ctx.save();
+			ctx.translate(rect.x, rect.y);
+			const p1 = { x: rect.x, y: rect.y };
+			const p2 = pos;
+			const r = Math.atan2(p2.y - p1.y, p2.x - p1.x);
+			ctx.rotate(r);
+			ctx.fillStyle = '#00ff00';
+			ctx.fillRect(0, 0, rect.width, rect.height);
+			ctx.strokeStyle = '#4060A3';
+			ctx.lineWidth = 2;
+			ctx.strokeRect(0, 0, rect.width, rect.height);
+			ctx.restore();
+		}
+	}
+
+	canvas.addEventListener('touchmove', (args: TouchEvent) => {
+		const first = args.changedTouches[0];
+		pos.x = first.clientX;
+		pos.y = first.clientY;
+		draw();
+	});
+
+	draw();
+}

tools/demo/canvas/index.ts

@@ -60,6 +60,7 @@ let zen3d;
 import * as Svg from '@nativescript/canvas/SVG';
 import { issue54, issue93 } from './issues';
 import { subTest } from './webgl/test';
+import { rnSkiaPerf } from './canvas2d/rn-skia-perf';
 var Vex;
 export class DemoSharedCanvas extends DemoSharedBase {
 	private canvas: any;
@@ -547,6 +548,7 @@ export class DemoSharedCanvas extends DemoSharedBase {
 		});
 	}
 	draw() {
+		rnSkiaPerf(this.canvas);
 		///this.drawOnCanvasWithCanvas(this.canvas);
 		//const ctx = this.canvas.getContext('2d');
 		//this.urlTests();
@@ -644,7 +646,7 @@ export class DemoSharedCanvas extends DemoSharedBase {
 		// ctx.fillRect(0,0,400,400)
 		//ellipse(this.canvas);
 		//this.drawPatternWithCanvas(this.canvas);
-		this.clock(this.canvas);
+		//this.clock(this.canvas);
 		//this.solar(this.canvas);
 		//console.log('ready ??');
 		//this.coloredParticles(this.canvas);