• 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 display from '@ohos.display';
20
21let screen = display.getDefaultDisplaySync();
22let screenWidth: number = screen.width;
23
24export class CanvasRenderNodeCropping extends RenderNode {
25  async draw(context: DrawContext) {
26    const canvas = context.canvas;
27    let startX = 100.0;
28    let startY = 100.0;
29    let w = screenWidth / 8;
30    let h = screenWidth / 8;
31    let textSize = screenWidth / 25;
32    let font = new drawing.Font();
33    font.setSize(textSize);
34    let text = getContext().resourceManager.getStringSync($r('app.string.crop'));
35    const textBlob = drawing.TextBlob.makeFromString(text, font, drawing.TextEncoding.TEXT_ENCODING_UTF8);
36    canvas.drawTextBlob(textBlob, startX, startY - textSize);
37
38    // 画布裁剪矩形 交集（INTERSECT）
39    let brush1 = new drawing.Brush();
40    brush1.setColor(0xFF, 0x00, 0x00, 0xFF);
41    canvas.attachBrush(brush1);
42    canvas.save();
43    let rect1: common2D.Rect = { left: startX, top: startY, right: startX + w, bottom: startY + h };
44    canvas.clipRect(rect1);
45    canvas.drawCircle(startX + w, startY + h, w);
46    canvas.restore();
47    canvas.detachBrush();
48
49    // 画布裁剪矩形 差集（DIFFERENCE）
50    let brush2 = new drawing.Brush();
51    brush2.setColor(0xFF, 0x00, 0x00, 0xFF);
52    canvas.attachBrush(brush2);
53    canvas.save();
54    let rect2: common2D.Rect = { left: startX + 2 * w, top: startY, right: startX + 3 * w, bottom: startY + h };
55    canvas.clipRect(rect2, drawing.ClipOp.DIFFERENCE);
56    canvas.drawCircle(startX + 3 * w, startY + h, w);
57    canvas.restore();
58    canvas.drawCircle(startX + 6 * w, startY + h, w); // 原始图
59    canvas.detachBrush();
60  }
61}
62
63export class CanvasRenderNodeMatrix extends RenderNode {
64  async draw(context: DrawContext) {
65    const canvas = context.canvas;
66    let startX = 100.0;
67    let startY = 100.0 + screenWidth / 3;
68    let textSize = screenWidth / 25;
69    let font = new drawing.Font();
70    font.setSize(textSize);
71    let text2 = getContext().resourceManager.getStringSync($r('app.string.scaling'));
72    let startBlob = drawing.TextBlob.makeFromString(text2, font, drawing.TextEncoding.TEXT_ENCODING_UTF8);
73    canvas.drawTextBlob(startBlob, startX, startY + textSize);
74    // 矩阵变换-缩放
75    let pen = new drawing.Pen();
76    pen.setColor({alpha:0xFF, red:0xFF, green:0x00, blue:0x00});
77    pen.setStrokeWidth(20);
78    canvas.attachPen(pen);
79    canvas.save();
80    canvas.scale(1.5, 1.5)
81    canvas.drawCircle(startX + 60, startY + textSize + 100, 60);
82    canvas.restore();
83    canvas.drawCircle(startX + 60, startY + textSize + 100, 60);
84    canvas.detachPen();
85
86    let startX2: number = startX + screenWidth / 3;
87    let text3 = getContext().resourceManager.getStringSync($r('app.string.translation_and_rotation'));
88    let startBlob2 = drawing.TextBlob.makeFromString(text3, font, drawing.TextEncoding.TEXT_ENCODING_UTF8);
89    canvas.drawTextBlob(startBlob2, startX2, startY + textSize);
90    // 矩阵变换-平移和旋转
91    canvas.attachPen(pen);
92    canvas.save();
93    canvas.translate(150, 150); // 平移
94    canvas.rotate(15, startX + screenWidth / 2, startY + textSize + 100); // 旋转
95    canvas.drawRect({left: startX2, top: startY + textSize + 50,
96      right: startX2 + 200, bottom: startY + textSize + 200});
97    canvas.restore();
98    canvas.drawRect({left: startX2, top: startY + textSize + 50,
99      right: startX2 + 200, bottom: startY + textSize + 200});
100    canvas.detachPen();
101  }
102}
103
104export class CanvasRenderNodeCombination extends RenderNode {
105  async draw(context: DrawContext) {
106    const canvas = context.canvas;
107    let startX = 100.0;
108    let startY = 100.0+screenWidth;
109    let w = screenWidth / 8;
110    let h = screenWidth / 8;
111    let textSize = screenWidth / 25;
112    let font = new drawing.Font();
113    font.setSize(textSize);
114    let text4 = getContext().resourceManager.getStringSync($r('app.string.tailor_and_translation'));
115    let startBlob = drawing.TextBlob.makeFromString(text4, font, drawing.TextEncoding.TEXT_ENCODING_UTF8);
116    canvas.drawTextBlob(startBlob, startX, startY - textSize);
117    // 裁剪+矩阵——矩形裁剪+平移
118    let brush1 = new drawing.Brush();
119    brush1.setColor(0xFF, 0x00, 0x00, 0xFF);
120    canvas.attachBrush(brush1);
121    canvas.save();
122    let rect1: common2D.Rect = { left: startX, top: startY, right: startX + w, bottom: startY + h };
123    canvas.translate(100, 100); // 平移
124    canvas.clipRect(rect1); // 裁剪
125    canvas.drawCircle(startX + w, startY + h, w);
126    canvas.restore();
127    canvas.drawCircle(startX + 3 * w, startY + h, w);
128    canvas.detachBrush();
129  }
130}
131