@nativescript-community/ui-htmlcanvasapi

基于 @nativescript-community/ui-canvas 的 HTML Canvas 实现。

支持的类

• OffscreenCanvas
• CanvasRenderingContext2D
• ImageBitmapRenderingContext
• OffscreenCanvasRenderingContext2D
• CanvasGradient
• CanvasPattern
• DOMMatrix
• DOMPoint (尚未使用)
• Path2D
• TextMetrics

安装

npm install @nativescript-community/ui-htmlcanvasapi

使用

安装 polyfills (可选)

import { Application } from '@nativescript/core';
import { installPolyfills } from '@nativescript-community/ui-htmlcanvasapi';

installPolyfills();

Application.run({ moduleName: 'app-root' });

然后，设置您的视图

<Page xmlns="http://schemas.nativescript.org/tns.xsd" xmlns:canvas="@nativescript-community/ui-htmlcanvasapi">
  <Page.actionBar>
    <ActionBar title="ui-htmlcanvasapi" icon="" class="action-bar">
    </ActionBar>
  </Page.actionBar>
  <StackLayout class="p-20">
    <canvas:HTMLCanvasView width="400" height="400" hardwareAccelerated="true" draw="onDraw"/>
  </StackLayout>
</Page>

import { Canvas } from '@nativescript-community/ui-canvas';
import { HTMLCanvasView } from '@nativescript-community/ui-htmlcanvasapi';

export function onDraw(args: { object: HTMLCanvasView; canvas: Canvas }) {
	const ctx = args.object.getContext('2d');

	ctx.save();

	ctx.fillStyle = 'yellow';
	ctx.fillRect(10, 10, 200, 100);

	ctx.transform(1, 0.5, -0.5, 1, 30, 10);

	ctx.fillStyle = 'red';
	ctx.fillRect(10, 10, 200, 100);

	ctx.transform(1, 0.5, -0.5, 1, 30, 10);

	ctx.fillStyle = 'blue';
	ctx.fillRect(10, 10, 200, 100);

	ctx.restore();
}

注意：如果您希望在 draw 监听器上下文之外绘图，您应该调用 HTMLCanvasView 的 invalidate() 方法，以便请求视图重新绘制。

import { HTMLCanvasView } from '@nativescript-community/ui-htmlcanvasapi';

function updateGraph(canvasView: HTMLCanvasView) {
	const ctx = canvasView.getContext('2d');

	ctx.save();
	ctx.fillStyle = 'yellow';
	ctx.fillRect(10, 10, 200, 100);
	ctx.restore();

	canvasView.invalidate();
}

有时，可能需要在离屏上绘图但保持对视图的引用，最终在离屏上绘制所有内容。
HTMLCanvasView 包含以下自定义方法

• enableOffscreenBuffer
• disableOffscreenBuffer
• isOffscreenBufferEnabled
• drawOffscreenBuffer

const view = args.object;
const ctx = view.getContext('2d');

view.enableOffscreenBuffer();

ctx.save();
ctx.fillStyle = 'yellow';
ctx.fillRect(10, 10, 200, 100);
ctx.transform(1, 0.5, -0.5, 1, 30, 10);
ctx.fillStyle = 'red';
ctx.fillRect(10, 10, 200, 100);
ctx.transform(1, 0.5, -0.5, 1, 30, 10);
ctx.fillStyle = 'blue';
ctx.fillRect(10, 10, 200, 100);
ctx.restore();

view.drawOffscreenBuffer();
// If buffer is no longer needed, just discard it
view.disableOffscreenBuffer();

注意：此状态对于执行如 toDataURL 之类的操作是必需的。

许可证

Apache 许可证版本 2.0