VerticesTest

vertices.tsx

/* eslint-disable quotes */
/* eslint-disable prettier/prettier */

import React from 'react';
import { Canvas, Fill, Points, Rect, vec } from "@shopify/react-native-skia"
import { Dimensions } from "react-native";

const { width, height } = Dimensions.get("window");
const N = 3;
const n = new Array(N + 1).fill(0).map((_, i) => i);
const hSize = width/N;
const vSize = height/N;

const palette = ["#61DAFB", "#FB61DA", "#DAFB61", "#61FBCF"];
const defaultVertices = n.map((col) => n.map((row) => vec(col * hSize, row * vSize))).flat();

console.log(`n = ${n}`);
console.log(`width = ${width}, height = ${height}`);
console.log(`hSize = ${hSize}, vSize = ${vSize}`);
console.log(`defaultVertices = ${JSON.stringify(defaultVertices, null, 2)}`);

export const Demo = () => {
  return (
    <Canvas style={{ flex: 1 }}>
      <Fill color="white"/>
      <Points points={defaultVertices} style="stroke" color="blue" strokeWidth={20}  />
      <Rect x={0} y={0} width={vSize} height={hSize} color="red" />
    </Canvas>
  )
}