中国优质的IT技术网站
专业IT技术创作平台
IT职业在线教育平台
微信扫码分享
NativeRender.ets 文件 import { NodeController, FrameNode, RenderNode, DrawContext, Size } from "@ohos.ArkUI.node" import { UIContext } from '@ohos.ArkUI.UIContext'; const DefaultDrawFunction = (context: DrawContext) => {}; type DrawFunction = (context: DrawContext) => void; class NativeRenderNode extends RenderNode { private drawFunction: DrawFunction; constructor(drawFunction: DrawFunction) { super(); this.drawFunction = drawFunction; } draw(context: DrawContext) { this.drawFunction(context); } } class NativeNodeController extends NodeController { private rootNode: FrameNode | null = null; private renderNode: NativeRenderNode | null = null; private drawFunction: DrawFunction; constructor(drawFunction: DrawFunction) { super(); this.drawFunction = drawFunction; } makeNode(uiContext: UIContext): FrameNode { this.renderNode = new NativeRenderNode(this.drawFunction); this.rootNode = new FrameNode(uiContext); const renderNode = this.rootNode?.getRenderNode(); if (renderNode) { renderNode.frame = { x: 0, y: 0, width: 1000, height: 1000 }; this.renderNode.frame = { x: 0, y: 0, width: 1000, height: 1000 }; renderNode.appendChild(this.renderNode); } return this.rootNode; } aboutToResize(size: Size): void { const renderNode = this.rootNode?.getRenderNode(); if (renderNode) { renderNode.frame = { x: 0, y: 0, width: size.width, height: size.height }; if (this.renderNode) { this.renderNode.frame = { x: 0, y: 0, width: size.width, height: size.height }; } } this.invalidate(); } invalidate(): void { this.renderNode?.invalidate(); } } @Component struct NativeRenderComponent { drawFunction: DrawFunction = DefaultDrawFunction; @State controller: NativeNodeController | null = null; aboutToAppear(): void { this.controller = new NativeNodeController(this.drawFunction); } build() { NodeContainer(this.controller) .onTouch((event: TouchEvent) => { if (event.type === TouchType.Up) { this.controller?.invalidate(); } }) } } export default NativeRenderComponent; Index.ets 文件 import { NodeController, FrameNode, RenderNode, DrawContext, Size, LengthMetrics } from "@ohos.ArkUI.node" import NativeRenderComponent from './NativeRender'; import drawing from '@ohos.graphics.drawing'; import { common2D, text } from '@kit.ArkGraphics2D'; import { NodeController, FrameNode, RenderNode, DrawContext, Size, LengthMetrics } from "@ohos.ArkUI.node" import NativeRenderComponent from './NativeRender'; import drawing from '@ohos.graphics.drawing'; import { common2D, text } from '@kit.ArkGraphics2D'; @Entry @Component struct Index { static fontName: string = "myFont"; static fontCollection: text.FontCollection = LoadFont(Index.fontName, $rawfile('font/Yarndings20-Regular.ttf')); build() { Column({ space: 20 }) { NativeRenderComponent({drawFunction: (context: DrawContext) => { let style: text.TextStyle = {color: {alpha: 255, red: 255, green: 0, blue: 0}, fontFamilies: [Index.fontName], fontSize: 100}; // DrawParagraph(context.canvas, 'ABCD', Index.fontCollection, style, 50, 50); const x = 50; const y = 200; DrawParagraph(context.canvas, '你好', Index.fontCollection, style, x, y); }}) .backgroundColor(0x00ff00) .width(300) .height(400) } .height('100%') } } function LoadFont(name: string, fontSrc: string | Resource) { const fc = new text.FontCollection(); fc.loadFontSync(name, fontSrc); return fc; } function DrawParagraph(canvas: drawing.Canvas, str: string, fontCollection: text.FontCollection, style: text.TextStyle, x: number, y: number): text.Paragraph { const builder = new text.ParagraphBuilder({}, fontCollection); builder.pushStyle(style); builder.addText(str); builder.popStyle(); let paragraph = builder.build(); paragraph.layoutSync(Number.POSITIVE_INFINITY); let width = paragraph.getLongestLine(); let height = paragraph.getHeight(); DrawRect(canvas, {alpha: 255, red: 255, green: 255, blue: 0}, {left: x, top: y, right: x + width, bottom: y + height}); paragraph.paint(canvas, x, y); return paragraph; }