• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1/*
2 * Copyright (c) 2025 Huawei Device Co., Ltd.
3 * Licensed under the Apache License, Version 2.0 (the "License");
4 * you may not use this file except in compliance with the License.
5 * You may obtain a copy of the License at
6 *
7 *     http://www.apache.org/licenses/LICENSE-2.0
8 *
9 * Unless required by applicable law or agreed to in writing, software
10 * distributed under the License is distributed on an "AS IS" BASIS,
11 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
12 * See the License for the specific language governing permissions and
13 * limitations under the License.
14 */
15
16import { RenderNode, DrawContext } from '@ohos.arkui.node';
17import drawing from '@ohos.graphics.drawing';
18import common2D from '@ohos.graphics.common2D';
19import image from '@ohos.multimedia.image';
20import display from '@ohos.display';
21
22let screen = display.getDefaultDisplaySync();
23let screenWidth: number = screen.width;
24
25export class ImageRenderNode extends RenderNode {
26  private pMap: image.PixelMap | undefined = undefined;
27
28  async draw(context: DrawContext) {
29    const canvas = context.canvas;
30    let font = new drawing.Font();
31    font.setSize(23);
32    // DrawImage
33    let text = getContext().resourceManager.getStringSync($r('app.string.DrawImage'));
34    const textBlob1 = drawing.TextBlob.makeFromString(text, font, drawing.TextEncoding.TEXT_ENCODING_UTF8);
35    canvas.drawTextBlob(textBlob1, 20, 300);
36    canvas.drawImage(this.pMap, 60, 320);
37
38    // DrawPixelMapMesh
39    let text2 = getContext().resourceManager.getStringSync($r('app.string.DrawPixelMapMesh'));
40    const textBlob2 = drawing.TextBlob.makeFromString(text2,
41      font, drawing.TextEncoding.TEXT_ENCODING_UTF8);
42    canvas.drawTextBlob(textBlob2, 320, 300);
43    const brush = new drawing.Brush();
44    canvas.attachBrush(brush);
45    let verts: number[] =
46      [320, 320, 390, 320, 460, 320, 320, 380, 390, 380, 460, 380, 320, 450, 390, 450, 460, 450];
47    canvas.drawPixelMapMesh(this.pMap, 2, 2, verts, 0, null, 0);
48    canvas.detachBrush();
49  }
50
51  setPixelMap(p: PixelMap) {
52    this.pMap = p;
53  }
54}
55
56export class ImageRectRenderNode extends RenderNode {
57  private pMap: image.PixelMap | undefined = undefined;
58
59  async draw(context: DrawContext) {
60    const canvas = context.canvas;
61    // DrawImageRectWithSrc
62    let font = new drawing.Font();
63    font.setSize(23); // 23 is font size;
64    let fontTitle = new drawing.Font();
65    fontTitle.setSize(screenWidth / 25);
66
67    let text3 = getContext().resourceManager.getStringSync($r('app.string.DrawPicture'));
68    const stringImage = drawing.TextBlob.makeFromString(text3,
69      fontTitle, drawing.TextEncoding.TEXT_ENCODING_UTF8);
70    canvas.drawTextBlob(stringImage, screenWidth / 3, 50.0);
71    let text4 = getContext().resourceManager.getStringSync($r('app.string.DrawImageRectWithSrc'));
72    const textBlob1 = drawing.TextBlob.makeFromString(text4,
73      font, drawing.TextEncoding.TEXT_ENCODING_UTF8);
74    canvas.drawTextBlob(textBlob1, 20, 80.0);
75    canvas.detachBrush();
76
77    // DrawImageRectWithSrc
78    let srcRect: common2D.Rect = {
79      left: 0,
80      top: 0,
81      right: 140,
82      bottom: 140
83    };
84    let dstRect: common2D.Rect = {
85      left: 60,
86      top: 100,
87      right: 200,
88      bottom: 240
89    };
90    canvas.drawImageRectWithSrc(this.pMap, srcRect, dstRect);
91
92    // DrawImageRect
93    let font1 = new drawing.Font();
94    font1.setSize(23); // 23 is font size;
95    let text5 = getContext().resourceManager.getStringSync($r('app.string.DrawImageRect'));
96    const textBlob2 = drawing.TextBlob.makeFromString(text5, font1, drawing.TextEncoding.TEXT_ENCODING_UTF8);
97    canvas.drawTextBlob(textBlob2, 320, 80.0);
98    canvas.detachBrush();
99    let rect: common2D.Rect = {
100      left: 330,
101      top: 100,
102      right: 470,
103      bottom: 240
104    };
105    canvas.drawImageRect(this.pMap, rect);
106  }
107
108  setPixelMap(p: PixelMap) {
109    this.pMap = p;
110  }
111}