Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/nativescript-community/ui-canvas
Implement Canvas into your NativeScript apps.
https://github.com/nativescript-community/ui-canvas
android canvas cgcontext ios nativescript
Last synced: about 1 month ago
JSON representation
Implement Canvas into your NativeScript apps.
- Host: GitHub
- URL: https://github.com/nativescript-community/ui-canvas
- Owner: nativescript-community
- License: apache-2.0
- Created: 2019-01-27T15:20:36.000Z (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2024-09-25T17:00:36.000Z (about 2 months ago)
- Last Synced: 2024-10-05T07:06:54.986Z (about 1 month ago)
- Topics: android, canvas, cgcontext, ios, nativescript
- Language: TypeScript
- Homepage: https://nativescript-community.github.io/ui-canvas/
- Size: 80.2 MB
- Stars: 31
- Watchers: 14
- Forks: 9
- Open Issues: 16
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
This monorepo contains multiple packages:
ui-canvas
@nativescript-community/ui-canvas
Implement Canvas into your NativeScript apps.
[](#table-of-contents)
[](#table-of-contents)
## Table of Contents
* [Installation](#installation)
* [Usage](#usage)
* [Plain NativeScript](#plain-nativescript)
* [XML](#xml)
* [NativeScript + Angular](#nativescript--angular)
* [NativeScript + Vue](#nativescript--vue)
* [NativeScript + Svelte](#nativescript--svelte)
* [Draw Method ](#draw-method-)
* [Examples:](#examples)
* [Demos and Development](#demos-and-development)
* [Repo Setup](#repo-setup)
* [Build](#build)
* [Demos](#demos)
* [Contributing](#contributing)
* [Update repo ](#update-repo-)
* [Update readme ](#update-readme-)
* [Update doc ](#update-doc-)
* [Publish](#publish)
* [modifying submodules](#modifying-submodules)
* [Questions](#questions)
[](#installation)
[](#installation)
## Installation
Run the following command from the root of your project:
`ns plugin add @nativescript-community/ui-canvas`
### Usage
The nativescript Canvas is based on the [Android Canvas](https://developer.android.com/reference/android/graphics/Canvas) class.
The android API is actually a direct subclass with some Additions
[](#plain-nativescript)
[](#plain-nativescript)
## Plain NativeScript
IMPORTANT: _Make sure you include `xmlns:cv="@nativescript-community/ui-canvas"` on the Page element_
### XML
```XML
```
[](#nativescript--angular)
[](#nativescript--angular)
## NativeScript + Angular
```typescript
import { registerElement } from 'nativescript-angular/element-registry';
import { CanvasView } from '@nativescript-community/ui-canvas';
registerElement('CanvasView', () => CanvasView);
```
```html
```
[](#nativescript--vue)
[](#nativescript--vue)
## NativeScript + Vue
```javascript
import Vue from 'nativescript-vue';
import CanvasPlugin from '@nativescript-community/ui-canvas/vue';
Vue.use(CanvasPlugin);
```
```html
```
[](#nativescript--svelte)
[](#nativescript--svelte)
## NativeScript + Svelte
```ts
// app/app.ts
import { registerNativeViewElement } from 'svelte-native/dom';
registerNativeViewElement('canvasView', () => require('@nativescript-community/ui-canvas').CanvasView);
```
```svelte
```
[](#draw-method-)
[](#draw-method-)
## Draw Method
```ts
import type { Canvas } from '@nativescript-community/ui-canvas';
import { Paint, createRect } from '@nativescript-community/ui-canvas';
import { Color } from '@nativescript/core';
function draw(event: { canvas: Canvas }) {
const canvas = event.canvas;
const paint = new Paint();
paint.setColor(new Color('black'));
paint.strokeWidth = 10;
canvas.drawRect(createRect(0, 0, 200, 100), paint);
}
```
### Examples:
- [Simple](demo-snippets/vue/Simple.vue)
- A basic example
- [Image](demo-snippets/vue/Image.vue)
- An example drawing an image
- [Shapes](demo-snippets/vue/Shapes.vue)
- An example drawing shapes using template
- [Animation](demo-snippets/vue/Animation.vue)
- An example of animating a shape
- [Complex](demo-snippets/vue/Complex.vue)
- An example of animating a shape
[](#demos-and-development)
[](#demos-and-development)
## Demos and Development
### Repo Setup
The repo uses submodules. If you did not clone with ` --recursive` then you need to call
```
git submodule update --init
```
The package manager used to install and link dependencies must be `pnpm` or `yarn`. `npm` wont work.
To develop and test:
if you use `yarn` then run `yarn`
if you use `pnpm` then run `pnpm i`
**Interactive Menu:**
To start the interactive menu, run `npm start` (or `yarn start` or `pnpm start`). This will list all of the commonly used scripts.
### Build
```bash
npm run build.all
```
WARNING: it seems `yarn build.all` wont always work (not finding binaries in `node_modules/.bin`) which is why the doc explicitly uses `npm run`
### Demos
```bash
npm run demo.[ng|react|svelte|vue].[ios|android]
npm run demo.svelte.ios # Example
```
Demo setup is a bit special in the sense that if you want to modify/add demos you dont work directly in `demo-[ng|react|svelte|vue]`
Instead you work in `demo-snippets/[ng|react|svelte|vue]`
You can start from the `install.ts` of each flavor to see how to register new demos
[](#contributing)
[](#contributing)
## Contributing
### Update repo
You can update the repo files quite easily
First update the submodules
```bash
npm run update
```
Then commit the changes
Then update common files
```bash
npm run sync
```
Then you can run `yarn|pnpm`, commit changed files if any
### Update readme
```bash
npm run readme
```
### Update doc
```bash
npm run doc
```
### Publish
The publishing is completely handled by `lerna` (you can add `-- --bump major` to force a major release)
Simply run
```shell
npm run publish
```
### modifying submodules
The repo uses https:// for submodules which means you won't be able to push directly into the submodules.
One easy solution is t modify `~/.gitconfig` and add
```
[url "ssh://[email protected]/"]
pushInsteadOf = https://github.com/
```
[](#questions)
[](#questions)
## Questions
If you have any questions/issues/comments please feel free to create an issue or start a conversation in the [NativeScript Community Discord](https://nativescript.org/discord).
ui-canvaslabel
@nativescript-community/ui-canvaslabel
Alternative to the built-in NativeScript Label but uses canvas which allows extreme complexity and customization.
[](#table-of-contents)
[](#table-of-contents)
## Table of Contents
* [Installation](#installation)
* [Configuration](#configuration)
* [Performances](#performances)
* [TODO / Limitations](#todo--limitations)
* [Examples:](#examples)
* [Demos and Development](#demos-and-development)
* [Repo Setup](#repo-setup)
* [Build](#build)
* [Demos](#demos)
* [Contributing](#contributing)
* [Update repo ](#update-repo-)
* [Update readme ](#update-readme-)
* [Update doc ](#update-doc-)
* [Publish](#publish)
* [modifying submodules](#modifying-submodules)
* [Questions](#questions)
A NativeScript Label widget. This widget takes a different approch from other label components. It is based on `nativescript-canvas` and allows drawing
multiple labels within one single widget.
It allows extreme complexity and customization.
[](#installation)
[](#installation)
## Installation
Run the following command from the root of your project:
`ns plugin add @nativescript-community/ui-canvaslabel`
[](#configuration)
[](#configuration)
## Configuration
It works almost like a normal label.
You can create spans, just like with the {N} labels. However there is a big difference with the {N} component.
`CSpan` do not support css class and never will! It was actually made on purpose to make to make the component much more efficient.
For now `CanvasLabel` do not auto size itself. I will add some way of doing it in the future but in a sense it defies the purpose of this component.
The `CanvasLabel` component supports most labels properties:
`color`, `fontSize`,`fontFamily`,`fontStyle`, `fontWeight`,`textAlignment`. Those can be defined through css.
Now with `CanvasLabel` you don't set the text directly. Instead you create `CSpan` or `CGroup`
Here is a complex Vue layout as an example
```html
```
For full example / doc look at the vue demo and the typings.
[](#performances)
[](#performances)
## Performances
`CanvasLabel` is made to be real fast. It was designed principaly to be used within list views. It uses the technique of drawing the text directly instead of using heavy native text components.
That technique is used by many apps looking for the best performances. One of the best examples is Telegram.
[](#todo--limitations)
[](#todo--limitations)
## TODO / Limitations
* For now there is no accessibility support (but it should be possible)
* The label can't size itself. I will add some ways of doing that. But possibly not in the way you are used to.
* no ellipsize support yet. Will come ([this](https://github.com/lsjwzh/FastTextView/blob/5e440575539ab1f470d853b1e7462fe0251eb869/widget.FastTextView/src/main/java/android/text/EllipsisSpannedContainer.java) could be a solution)
* a lot of canvas features can be added like shadows, gradient ...
* transform supoort should be possible at least for groups and top spans.
### Examples:
- [Basic](demo-snippets/vue/CanvasLabel.vue)
- A basic SVG example
[](#demos-and-development)
[](#demos-and-development)
## Demos and Development
### Repo Setup
The repo uses submodules. If you did not clone with ` --recursive` then you need to call
```
git submodule update --init
```
The package manager used to install and link dependencies must be `pnpm` or `yarn`. `npm` wont work.
To develop and test:
if you use `yarn` then run `yarn`
if you use `pnpm` then run `pnpm i`
**Interactive Menu:**
To start the interactive menu, run `npm start` (or `yarn start` or `pnpm start`). This will list all of the commonly used scripts.
### Build
```bash
npm run build.all
```
WARNING: it seems `yarn build.all` wont always work (not finding binaries in `node_modules/.bin`) which is why the doc explicitly uses `npm run`
### Demos
```bash
npm run demo.[ng|react|svelte|vue].[ios|android]
npm run demo.svelte.ios # Example
```
Demo setup is a bit special in the sense that if you want to modify/add demos you dont work directly in `demo-[ng|react|svelte|vue]`
Instead you work in `demo-snippets/[ng|react|svelte|vue]`
You can start from the `install.ts` of each flavor to see how to register new demos
[](#contributing)
[](#contributing)
## Contributing
### Update repo
You can update the repo files quite easily
First update the submodules
```bash
npm run update
```
Then commit the changes
Then update common files
```bash
npm run sync
```
Then you can run `yarn|pnpm`, commit changed files if any
### Update readme
```bash
npm run readme
```
### Update doc
```bash
npm run doc
```
### Publish
The publishing is completely handled by `lerna` (you can add `-- --bump major` to force a major release)
Simply run
```shell
npm run publish
```
### modifying submodules
The repo uses https:// for submodules which means you won't be able to push directly into the submodules.
One easy solution is t modify `~/.gitconfig` and add
```
[url "ssh://[email protected]/"]
pushInsteadOf = https://github.com/
```
[](#questions)
[](#questions)
## Questions
If you have any questions/issues/comments please feel free to create an issue or start a conversation in the [NativeScript Community Discord](https://nativescript.org/discord).
ui-svg
@nativescript-community/ui-svg
Adds support for SVGs in your NativeScript apps.
[](#table-of-contents)
[](#table-of-contents)
## Table of Contents
* [Installation](#installation)
* [NativeScript + Vue](#nativescript--vue)
* [NativeScript + Svelte](#nativescript--svelte)
* [Examples:](#examples)
* [Demos and Development](#demos-and-development)
* [Repo Setup](#repo-setup)
* [Build](#build)
* [Demos](#demos)
* [Contributing](#contributing)
* [Update repo ](#update-repo-)
* [Update readme ](#update-readme-)
* [Update doc ](#update-doc-)
* [Publish](#publish)
* [modifying submodules](#modifying-submodules)
* [Questions](#questions)
[](#installation)
[](#installation)
## Installation
Run the following command from the root of your project:
`ns plugin add @nativescript-community/ui-svg`
### NativeScript + Vue
```ts
import SVGPlugin from '@nativescript-community/ui-svg/vue';
Vue.use(SVGPlugin);
// or if you want the canvas version
import CanvasSVGPlugin from '@nativescript-community/ui-svg/vue/canvas';
Vue.use(CanvasSVGPlugin);
```
For other flavors you need to register the components directly:
```ts
import { SVGView } from '@nativescript-community/ui-svg';
import { CanvasSVG, SVG } from '@nativescript-community/ui-svg/canvas';
```
It works in 3 ways!.
`CanvasSVG` extending `Canvas`
```html
```
or `SVGView` which is a basic svg view with support for auto sizing
```html
```
Or within and Canvas View extending `CanvasView` like `CanvasLabel`
```html
```
### NativeScript + Svelte
```ts
// app/app.ts
import { registerNativeViewElement } from 'svelte-native/dom';
registerNativeViewElement('svgView', () => require('@nativescript-community/ui-svg').SVGView);
```
```svelte
```
### Examples:
- [Basic](demo-snippets/vue/SVG.vue)
- A basic SVG example
[](#demos-and-development)
[](#demos-and-development)
## Demos and Development
### Repo Setup
The repo uses submodules. If you did not clone with ` --recursive` then you need to call
```
git submodule update --init
```
The package manager used to install and link dependencies must be `pnpm` or `yarn`. `npm` wont work.
To develop and test:
if you use `yarn` then run `yarn`
if you use `pnpm` then run `pnpm i`
**Interactive Menu:**
To start the interactive menu, run `npm start` (or `yarn start` or `pnpm start`). This will list all of the commonly used scripts.
### Build
```bash
npm run build.all
```
WARNING: it seems `yarn build.all` wont always work (not finding binaries in `node_modules/.bin`) which is why the doc explicitly uses `npm run`
### Demos
```bash
npm run demo.[ng|react|svelte|vue].[ios|android]
npm run demo.svelte.ios # Example
```
Demo setup is a bit special in the sense that if you want to modify/add demos you dont work directly in `demo-[ng|react|svelte|vue]`
Instead you work in `demo-snippets/[ng|react|svelte|vue]`
You can start from the `install.ts` of each flavor to see how to register new demos
[](#contributing)
[](#contributing)
## Contributing
### Update repo
You can update the repo files quite easily
First update the submodules
```bash
npm run update
```
Then commit the changes
Then update common files
```bash
npm run sync
```
Then you can run `yarn|pnpm`, commit changed files if any
### Update readme
```bash
npm run readme
```
### Update doc
```bash
npm run doc
```
### Publish
The publishing is completely handled by `lerna` (you can add `-- --bump major` to force a major release)
Simply run
```shell
npm run publish
```
### modifying submodules
The repo uses https:// for submodules which means you won't be able to push directly into the submodules.
One easy solution is t modify `~/.gitconfig` and add
```
[url "ssh://[email protected]/"]
pushInsteadOf = https://github.com/
```
[](#questions)
[](#questions)
## Questions
If you have any questions/issues/comments please feel free to create an issue or start a conversation in the [NativeScript Community Discord](https://nativescript.org/discord).
[](#demos-and-development)
## Demos and Development
### Repo Setup
The repo uses submodules. If you did not clone with ` --recursive` then you need to call
```
git submodule update --init
```
The package manager used to install and link dependencies must be `pnpm` or `yarn`. `npm` wont work.
To develop and test:
if you use `yarn` then run `yarn`
if you use `pnpm` then run `pnpm i`
**Interactive Menu:**
To start the interactive menu, run `npm start` (or `yarn start` or `pnpm start`). This will list all of the commonly used scripts.
### Build
```bash
npm run build.all
```
WARNING: it seems `yarn build.all` wont always work (not finding binaries in `node_modules/.bin`) which is why the doc explicitly uses `npm run`
### Demos
```bash
npm run demo.[ng|react|svelte|vue].[ios|android]
npm run demo.svelte.ios # Example
```
Demo setup is a bit special in the sense that if you want to modify/add demos you dont work directly in `demo-[ng|react|svelte|vue]`
Instead you work in `demo-snippets/[ng|react|svelte|vue]`
You can start from the `install.ts` of each flavor to see how to register new demos
[](#contributing)
## Contributing
### Update repo
You can update the repo files quite easily
First update the submodules
```bash
npm run update
```
Then commit the changes
Then update common files
```bash
npm run sync
```
Then you can run `yarn|pnpm`, commit changed files if any
### Update readme
```bash
npm run readme
```
### Update doc
```bash
npm run doc
```
### Publish
The publishing is completely handled by `lerna` (you can add `-- --bump major` to force a major release)
Simply run
```shell
npm run publish
```
### modifying submodules
The repo uses https:// for submodules which means you won't be able to push directly into the submodules.
One easy solution is t modify `~/.gitconfig` and add
```
[url "ssh://[email protected]/"]
pushInsteadOf = https://github.com/
```
[](#questions)
## Questions
If you have any questions/issues/comments please feel free to create an issue or start a conversation in the [NativeScript Community Discord](https://nativescript.org/discord).