Nativescript Core examples

[glorious73]

I could not find a demo for Nativescript core so I created one (to save time for others). It draws both a simple black rectangle on a page and an svg from a certain source.

• File structure:

  ...
  package.json
  app
   app-root.xml
   welcome
      welcome-page.xml
      welcome-page.js
      welcome-view-model.js (if needed)
  ...

• package.json

  
  {
  "name": "canvas and svg example",
  "main": "app/app.js",
  "version": "1.0.0",
  "private": true,
  "dependencies": {
  "@nativescript-community/arraybuffers": "^1.1.5",
  "@nativescript-community/ui-canvas": "^4.6.13",
  "@nativescript-community/ui-svg": "^0.1.25",
  "@nativescript/core": "~8.6.0",
  "@nativescript/theme": "^3.0.2"
  },
  "devDependencies": {
  "@nativescript/android": "8.6.2",
  "@nativescript/ios": "8.6.3",
  "@nativescript/webpack": "~5.0.18"
  }
  }

## `ui-canvas` example

- app-root.xml
```xml
<Frame defaultPage="~/views/welcome/welcome-page" id="topmost"></Frame>

• welcome-page.xml

  <Page loaded="onLoaded" xmlns="http://www.nativescript.org/tns.xsd" xmlns:cv="@nativescript-community/ui-canvas">
  <StackLayout>
      <Label text="text before" textWrap="true" />
      <cv:CanvasView width="400" height="400" draw="onDraw"/>
      <Label text="text after" textWrap="true" />
  </StackLayout>
  </Page>

• welcome-page.js

  
  import { Color } from "@nativescript/core";
  import { Paint, createRect } from "@nativescript-community/ui-canvas";

const { WelcomeViewModel } = require("./welcome-view-model");

const welcomeViewModel = new WelcomeViewModel();

export const onLoaded = (args) => { const page = args.object; page.bindingContext = welcomeViewModel; };

export const onDraw = (event) => { try { const paint = new Paint(); paint.setColor(new Color('black')); paint.strokeWidth = 10; event.canvas.drawRect(createRect(0, 0, 400, 400), paint); } catch(err) { console.log(err); } }

## `ui-svg` example
- Same file structure as above.
- Note that you need to install `@nativescript-community/arraybuffers`, `@nativescript-community/canvas`, and `@nativescript-community/ui-svg` to avoid dependency-related errors. Also, no need for the use of Javascript since we are directly using `SVGView`.

- app-root.xml
```xml
<Frame defaultPage="~/views/welcome/welcome-page" id="topmost"></Frame>

• welcome-page.xml

  <Page loaded="onLoaded" actionBarHidden="true" xmlns="http://www.nativescript.org/tns.xsd" xmlns:cv="@nativescript-community/ui-canvas" xmlns:svg="@nativescript-community/ui-svg">
  <StackLayout>
      <Label text="text before" textWrap="true" />
      <!--Make sure the src file exists-->
      <svg:SVGView height="300" src="~/assets/svg/example.svg" stretch="aspectFit" />
      <Label text="text after" textWrap="true" />
  </StackLayout>
  </Page>

[farfromrefug]

@glorious73 awesome will add it to the readme!