@nativescript-community/ui-canvas

将 Canvas 实现到您的 NativeScript 应用程序中。

安装

从您的项目根目录运行以下命令

ns plugin add @nativescript-community/ui-canvas

使用

NativeScript Canvas 基于 Android Canvas 类。Android API 实际上是一个带有一些添加的直接子类

纯 NativeScript

重要：请确保在页面元素上包含 xmlns:cv="@nativescript-community/ui-canvas"

XML

<Page xmlns:cv="@nativescript-community/ui-canvas">
    <StackLayout horizontalAlignment="center">
        <cv:CanvasView width="100" height="100" draw="draw"/>
   </StackLayout>
</Page>

NativeScript + Angular

import { registerElement } from 'nativescript-angular/element-registry';
import { CanvasView } from '@nativescript-community/ui-canvas';
registerElement('CanvasView', () => CanvasView);

<CanvasView width="100" height="100" (draw)="draw($event)></CanvasView>

NativeScript + Vue

import Vue from 'nativescript-vue';
import CanvasPlugin from '@nativescript-community/ui-canvas/vue';

Vue.use(CanvasPlugin);

<CanvasView  width="100" height="100" @draw="draw"/>

NativeScript + Svelte

// app/app.ts
import { registerNativeViewElement } from 'svelte-native/dom';
registerNativeViewElement('canvasView', () => require('@nativescript-community/ui-canvas').CanvasView);

<!-- app/components/Foo.svelte -->
<stackLayout>
    <canvasView width="300" height="300" on:draw={draw} />
</stackLayout>

绘图方法

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);
}

示例

简单
- 基本示例
图像
- 绘制图像的示例
形状
- 使用模板绘制形状的示例
动画
- 动画形状的示例
复杂
- 动画形状的示例

演示和开发

仓库设置

该仓库使用子模块。如果您没有使用 --recursive 克隆，则需要调用

git submodule update --init

用于安装和链接依赖项的包管理器必须是 pnpm 或 yarn。 npm 将无法正常工作。

开发和测试：如果您使用 yarn，则运行 yarn；如果您使用 pnpm，则运行 pnpm i

交互式菜单

要启动交互式菜单，请运行 npm start（或 yarn start 或 pnpm start）。这将列出所有常用脚本。

构建

npm run build.all

警告：似乎 yarn build.all 不会总是工作（在 node_modules/.bin 中找不到二进制文件），这就是为什么文档明确使用 npm run

演示

npm run demo.[ng|react|svelte|vue].[ios|android]

npm run demo.svelte.ios # Example

贡献

更新仓库

您可以非常容易地更新仓库文件

首先更新子模块

npm run update

然后提交更改，然后更新通用文件

npm run sync

然后您可以根据需要运行 yarn|pnpm，如果有的话，提交更改的文件

更新README

npm run readme

更新文档

npm run doc

发布

发布完全由 lerna 处理（您可以添加 -- --bump major 来强制发布主要版本）只需运行

npm run publish

修改子模块

该仓库使用 https:// 子模块，这意味着您无法直接将更改推送到子模块。一个简单的解决方案是修改 ~/.gitconfig 并添加

[url "ssh://[email protected]/"]
	pushInsteadOf = https://github.com/

问题

如果您有任何问题/问题/评论，请随时创建一个问题或开始在 NativeScript 社区 Discord 中进行对话。