• 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 TextBlobRenderNode extends RenderNode {
26  private pMap: image.PixelMap | undefined = undefined;
27
28  async draw(context: DrawContext) {
29    const canvas = context.canvas;
30    let startX = 20.0;
31    let startY = 600.0;
32    let fontTitle = new drawing.Font();
33    fontTitle.setSize(screenWidth / 25);
34    let text = getContext().resourceManager.getStringSync($r('app.string.DrawTextBlob'));
35    const stringImage = drawing.TextBlob.makeFromString(text,
36      fontTitle, drawing.TextEncoding.TEXT_ENCODING_UTF8);
37    canvas.drawTextBlob(stringImage, screenWidth / 3, 550.0);
38    let text1 = getContext().resourceManager.getStringSync($r('app.string.DrawBaseTextBlob'));
39    const stringBasicText = drawing.TextBlob.makeFromString(text1,
40      fontTitle, drawing.TextEncoding.TEXT_ENCODING_UTF8);
41    canvas.drawTextBlob(stringBasicText, startX, startY);
42    // 基本字块绘制
43    const font1 = new drawing.Font();
44    font1.setSize(100);
45    const textBlob1 = drawing.TextBlob.makeFromString('Hello world', font1, drawing.TextEncoding.TEXT_ENCODING_UTF8);
46    canvas.drawTextBlob(textBlob1, 100, 720);
47
48    let text2 = getContext().resourceManager.getStringSync($r('app.string.FontWithPen'));
49    const stringTextPen = drawing.TextBlob.makeFromString(text2,
50      fontTitle, drawing.TextEncoding.TEXT_ENCODING_UTF8);
51    canvas.drawTextBlob(stringTextPen, startX, startY + 280);
52    // 文字描边
53    let pen1 = new drawing.Pen();
54    pen1.setAntiAlias(true);
55    pen1.setStrokeWidth(3.0);
56    pen1.setColor(0xFF, 0xFF, 0x00, 0x00);
57    const font2 = new drawing.Font();
58    font2.setSize(100);
59    canvas.attachPen(pen1);
60    const textBlob2 = drawing.TextBlob.makeFromString('Hello world', font2, drawing.TextEncoding.TEXT_ENCODING_UTF8);
61    canvas.drawTextBlob(textBlob2, 100, 1000);
62    canvas.detachPen();
63
64    let text3 = getContext().resourceManager.getStringSync($r('app.string.TextGradient'));
65    const stringTextShader = drawing.TextBlob.makeFromString(text3,
66      fontTitle, drawing.TextEncoding.TEXT_ENCODING_UTF8);
67    canvas.drawTextBlob(stringTextShader, startX, startY + 520);
68
69    // 文字渐变
70    let startPt: common2D.Point = { x: 100, y: 100 + 1000 };
71    let endPt: common2D.Point = { x: 900, y: 900 + 1000 };
72    let colors = [0xFFFFFF00, 0xFFFF0000, 0xFF0000FF];
73    let shaderEffect = drawing.ShaderEffect.createLinearGradient(startPt, endPt, colors, drawing.TileMode.CLAMP);
74    let brush2 = new drawing.Brush();
75    brush2.setShaderEffect(shaderEffect);
76    canvas.attachBrush(brush2);
77    const font3 = new drawing.Font();
78    font3.setSize(200);
79    const textBlob3 = drawing.TextBlob.makeFromString('Hello world', font3, drawing.TextEncoding.TEXT_ENCODING_UTF8);
80    canvas.drawTextBlob(textBlob3, 100, 1300);
81    canvas.detachBrush();
82  }
83}