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 ShapeRenderNodeCanvasPen extends RenderNode { 25 async draw(context: DrawContext) { 26 const w = screenWidth / 4; 27 const canvas = context.canvas; 28 canvas.detachBrush(); 29 const startX = 200; 30 const startY = 60; 31 const fontTitle = new drawing.Font(); 32 fontTitle.setSize(30); // 30 font size 33 let text = getContext().resourceManager.getStringSync($r('app.string.GeometryWithPen')); 34 const textBlob = 35 drawing.TextBlob.makeFromString(text, fontTitle, drawing.TextEncoding.TEXT_ENCODING_UTF8); 36 canvas.drawTextBlob(textBlob, startX, startY); 37 // font 38 const font = new drawing.Font(); 39 font.setSize(22); // 22 font size 40 // pen 41 const pen = new drawing.Pen(); 42 const color: common2D.Color = { 43 alpha: 0xFF, 44 red: 0x44, 45 green: 0x72, 46 blue: 0xC3 47 }; 48 pen.setColor(color); 49 pen.setAntiAlias(true); 50 pen.setStrokeWidth(3); 51 // rect 52 const startX1 = 20; 53 const startY1 = 120; 54 const stringRect = 55 drawing.TextBlob.makeFromString('DrawRect', font, drawing.TextEncoding.TEXT_ENCODING_UTF8); 56 canvas.drawTextBlob(stringRect, startX1, startY1); 57 canvas.attachPen(pen); 58 const rect: common2D.Rect = { 59 left: 20, 60 top: 150, 61 right: w - 20, 62 bottom: 250 63 }; 64 canvas.drawRect(rect); 65 canvas.detachPen(); 66 // roundrect 67 const startX2 = w; 68 const startY2 = 120; 69 const stringRoundRect = 70 drawing.TextBlob.makeFromString('DrawRoundRect', font, drawing.TextEncoding.TEXT_ENCODING_UTF8); 71 canvas.drawTextBlob(stringRoundRect, startX2, startY2); 72 canvas.attachPen(pen); 73 const rectRoundRect: common2D.Rect = { 74 left: w + 20, 75 top: 150, 76 right: w * 2 - 20, 77 bottom: 250 78 }; 79 const roundRect = new drawing.RoundRect(rectRoundRect, 20, 20); 80 canvas.drawRoundRect(roundRect); 81 canvas.detachPen(); 82 // line 83 const startX3 = w * 2 + 30; 84 const startY3 = 120; 85 const stringLine = 86 drawing.TextBlob.makeFromString('DrawLine', font, drawing.TextEncoding.TEXT_ENCODING_UTF8); 87 canvas.drawTextBlob(stringLine, startX3, startY3); 88 canvas.attachPen(pen); 89 canvas.drawLine(w * 2 + 20, 200, w * 3 - 20, 200); 90 canvas.detachPen(); 91 // arc 92 const startX4 = w * 3 + 10; 93 const startY4 = 120; 94 const stringArc = 95 drawing.TextBlob.makeFromString('DrawArc', font, drawing.TextEncoding.TEXT_ENCODING_UTF8); 96 canvas.drawTextBlob(stringArc, startX4, startY4); 97 canvas.attachPen(pen); 98 const rectArc: common2D.Rect = { 99 left: w * 3 - 50, 100 top: 150, 101 right: w * 4 - 20, 102 bottom: 350 103 }; 104 canvas.drawArc(rectArc, 0, -90); 105 canvas.detachPen(); 106 // path 107 const startX5 = 20; 108 const startY5 = 320; 109 const stringPath = 110 drawing.TextBlob.makeFromString('DrawPath', font, drawing.TextEncoding.TEXT_ENCODING_UTF8); 111 canvas.drawTextBlob(stringPath, startX5, startY5); 112 canvas.attachPen(pen); 113 const path = new drawing.Path(); 114 const rectFirst: common2D.Rect = { 115 left: 10, 116 top: 350, 117 right: w / 2, 118 bottom: 450 119 }; 120 path.addArc(rectFirst, 0, -130); 121 const rectSecond: common2D.Rect = { 122 left: w / 2, 123 top: 350, 124 right: w - 20, 125 bottom: 450 126 }; 127 path.addArc(rectSecond, 50, 130); 128 canvas.drawPath(path); 129 canvas.detachPen(); 130 // circle 131 const startX6 = w + 20; 132 const startY6 = 320; 133 const stringCircle = 134 drawing.TextBlob.makeFromString('DrawCircle', font, drawing.TextEncoding.TEXT_ENCODING_UTF8); 135 canvas.drawTextBlob(stringCircle, startX6, startY6); 136 canvas.attachPen(pen); 137 canvas.drawCircle(w * 3 / 2, 400, 50); 138 canvas.detachPen(); 139 // oval 140 const startX7 = w * 2 + 25; 141 const startY7 = 320; 142 const stringOval = 143 drawing.TextBlob.makeFromString('DrawOval', font, drawing.TextEncoding.TEXT_ENCODING_UTF8); 144 canvas.drawTextBlob(stringOval, startX7, startY7); 145 canvas.attachPen(pen); 146 const rectOval: common2D.Rect = { 147 left: w * 2 + 20, 148 top: 350, 149 right: w * 3 - 20, 150 bottom: 430 151 }; 152 canvas.drawOval(rectOval); 153 canvas.detachPen(); 154 155 // Region 156 const textBlob1 = drawing.TextBlob.makeFromString('DrawRegion', font, drawing.TextEncoding.TEXT_ENCODING_UTF8); 157 canvas.drawTextBlob(textBlob1, 20, 520); 158 canvas.detachBrush(); 159 canvas.attachPen(pen); 160 let centerX = 70; 161 let centerY = 600; 162 let sideLength = 60; 163 let angleIncrement = 2 * Math.PI / 5; 164 let regionPath = new drawing.Path(); 165 for (let i = 0; i < 5; ++i) { 166 let angle = angleIncrement * i; 167 let x = centerX + sideLength * Math.cos(angle - 60); 168 let y = centerY - sideLength * Math.sin(angle - 60); 169 if (i === 0) { 170 regionPath.moveTo(x, y); 171 } else { 172 regionPath.lineTo(x, y); 173 } 174 } 175 ; 176 regionPath.close(); 177 let region = new drawing.Region(); 178 let clip = new drawing.Region(); 179 clip.setRect(10, 400, 690, 650); 180 region.setPath(regionPath, clip); 181 canvas.drawRegion(region); 182 canvas.detachPen(); 183 184 // Point 185 let startX9 = 20.0+w; 186 let startY9 = 520.0; 187 const stringPoint = drawing.TextBlob.makeFromString('DrawPoint', font, drawing.TextEncoding.TEXT_ENCODING_UTF8); 188 canvas.drawTextBlob(stringPoint, startX9, startY9); 189 let pPen = new drawing.Pen(); 190 pPen.setStrokeWidth(8.0); 191 canvas.attachPen(pPen); 192 canvas.drawPoint(80.0 + w, 580.0); 193 canvas.detachPen(); 194 } 195} 196 197export class ShapeRenderNodeCanvasBrush extends RenderNode { 198 async draw(context: DrawContext) { 199 const w = screenWidth / 4; 200 const dis = screenWidth / 2; 201 const canvas = context.canvas; 202 canvas.detachBrush(); 203 const startX = 200; 204 const startY = 60 + dis; 205 const fontTitle = new drawing.Font(); 206 fontTitle.setSize(30); // 30 font size 207 let text1 = getContext().resourceManager.getStringSync($r('app.string.GeometryWithBrush')); 208 const textBlob = 209 drawing.TextBlob.makeFromString(text1, fontTitle, drawing.TextEncoding.TEXT_ENCODING_UTF8); 210 canvas.drawTextBlob(textBlob, startX, startY); 211 // font 212 const font = new drawing.Font(); 213 font.setSize(22); // 22 font size 214 // set brush 215 const brush = new drawing.Brush(); 216 const color: common2D.Color = { 217 alpha: 0xFF, 218 red: 0x44, 219 green: 0x72, 220 blue: 0xC3 221 }; 222 brush.setColor(color); 223 // rect 224 const startX1 = 20; 225 const startY1 = 120; 226 const stringRect = 227 drawing.TextBlob.makeFromString('DrawRect', font, drawing.TextEncoding.TEXT_ENCODING_UTF8); 228 canvas.drawTextBlob(stringRect, startX1, startY1 + dis); 229 canvas.attachBrush(brush); 230 const rect: common2D.Rect = { 231 left: 20, 232 top: 150 + dis, 233 right: w - 20, 234 bottom: 250 + dis 235 }; 236 canvas.drawRect(rect); 237 canvas.detachBrush(); 238 // roundrect 239 const startX2 = w; 240 const startY2 = 120; 241 const stringRoundRect = 242 drawing.TextBlob.makeFromString('DrawRoundRect', font, drawing.TextEncoding.TEXT_ENCODING_UTF8); 243 canvas.drawTextBlob(stringRoundRect, startX2, startY2 + dis); 244 canvas.attachBrush(brush); 245 const rectRoundRect: common2D.Rect = { 246 left: w + 20, 247 top: 150 + dis, 248 right: w * 2 - 20, 249 bottom: 250 + dis 250 }; 251 const roundRect = new drawing.RoundRect(rectRoundRect, 20, 20); 252 canvas.drawRoundRect(roundRect); 253 canvas.detachBrush(); 254 // line 255 const startX3 = w * 2 + 30; 256 const startY3 = 120; 257 const stringLine = 258 drawing.TextBlob.makeFromString('DrawLine', font, drawing.TextEncoding.TEXT_ENCODING_UTF8); 259 canvas.drawTextBlob(stringLine, startX3, startY3 + dis); 260 canvas.attachBrush(brush); 261 canvas.drawLine(w * 2 + 20, 200 + dis, w * 3 - 20, 200 + dis); 262 canvas.detachBrush(); 263 // arc 264 const startX4 = w * 3 + 10; 265 const startY4 = 120; 266 const stringArc = 267 drawing.TextBlob.makeFromString('DrawArc', font, drawing.TextEncoding.TEXT_ENCODING_UTF8); 268 canvas.drawTextBlob(stringArc, startX4, startY4+dis); 269 canvas.attachBrush(brush); 270 const rectArc: common2D.Rect = { 271 left: w * 3 - 50, 272 top: 150 + dis, 273 right: w * 4 - 20, 274 bottom: 350 + dis 275 }; 276 canvas.drawArc(rectArc, 0, -90); 277 canvas.detachBrush(); 278 // path 279 const startX5 = 20; 280 const startY5 = 320; 281 const stringPath = 282 drawing.TextBlob.makeFromString('DrawPath', font, drawing.TextEncoding.TEXT_ENCODING_UTF8); 283 canvas.drawTextBlob(stringPath, startX5, startY5 + dis); 284 canvas.attachBrush(brush); 285 const path = new drawing.Path(); 286 const rectFirst: common2D.Rect = { 287 left: 10, 288 top: 350 + dis, 289 right: w / 2, 290 bottom: 450 + dis 291 }; 292 path.addArc(rectFirst, 0, -130); 293 const rectSecond: common2D.Rect = { 294 left: w / 2, 295 top: 350 + dis, 296 right: w - 20, 297 bottom: 450 + dis 298 }; 299 path.addArc(rectSecond, 50, 130); 300 canvas.drawPath(path); 301 canvas.detachBrush(); 302 // circle 303 const startX6 = w + 20; 304 const startY6 = 320; 305 const stringCircle = 306 drawing.TextBlob.makeFromString('DrawCircle', font, drawing.TextEncoding.TEXT_ENCODING_UTF8); 307 canvas.drawTextBlob(stringCircle, startX6, startY6 + dis); 308 canvas.attachBrush(brush); 309 canvas.drawCircle(w * 3 / 2, 400 + dis, 50); 310 canvas.detachBrush(); 311 // oval 312 const startX7 = w * 2 + 25; 313 const startY7 = 320; 314 const stringOval = 315 drawing.TextBlob.makeFromString('DrawOval', font, drawing.TextEncoding.TEXT_ENCODING_UTF8); 316 canvas.drawTextBlob(stringOval, startX7, startY7 + dis); 317 canvas.attachBrush(brush); 318 const rectOval: common2D.Rect = { 319 left: w * 2 + 20, 320 top: 350 + dis, 321 right: w * 3 - 20, 322 bottom: 430 + dis 323 }; 324 canvas.drawOval(rectOval); 325 canvas.detachBrush(); 326 // background 327 const brushLayer = new drawing.Brush; 328 brushLayer.setColor({ alpha:0xFF,red:0xFF,green:0xFF,blue:0xFF }); 329 const rectLayer: common2D.Rect = { 330 left: 0, 331 top: 0, 332 right: 0, 333 bottom: 0 334 }; 335 canvas.saveLayer(rectLayer, brushLayer); 336 const startX8 = w * 3 - 10; 337 const startY8 = 320; 338 font.setSize(20); 339 const stringBackground = 340 drawing.TextBlob.makeFromString('DrawBackground', font, drawing.TextEncoding.TEXT_ENCODING_UTF8); 341 canvas.drawTextBlob(stringBackground, startX8, startY8 + dis); 342 const rectBackground: common2D.Rect = { 343 left: w * 3 + 20, 344 top: 350 + dis, 345 right: w * 4 - 20, 346 bottom: 450 + dis 347 }; 348 canvas.clipRect(rectBackground, drawing.ClipOp.INTERSECT); 349 canvas.attachBrush(brush); 350 canvas.drawBackground(brush); 351 canvas.detachBrush(); 352 canvas.restore(); 353 354 // Region 355 const textBlob1 = drawing.TextBlob.makeFromString('DrawRegion', font, drawing.TextEncoding.TEXT_ENCODING_UTF8); 356 canvas.drawTextBlob(textBlob1, 20, 680 + dis); 357 canvas.detachBrush(); 358 const brushBitmap = new drawing.Brush(); 359 brushBitmap.setColor({alpha: 0xFF, red: 0x44, green: 0x72, blue: 0xC3}); 360 canvas.attachBrush(brushBitmap); 361 let centerX = 70; 362 let centerY = 780 + dis; 363 let sideLength = 60; 364 let angleIncrement = 2 * Math.PI / 5; 365 let regionPath = new drawing.Path(); 366 for (let i = 0; i < 5; ++i) { 367 let angle = angleIncrement * i; 368 let x = centerX + sideLength * Math.cos(angle - 60); 369 let y = centerY - sideLength * Math.sin(angle - 60); 370 if (i === 0) { 371 regionPath.moveTo(x, y); 372 } else { 373 regionPath.lineTo(x, y); 374 } 375 }; 376 regionPath.close(); 377 let region = new drawing.Region(); 378 let clip = new drawing.Region(); 379 clip.setRect(10, 600 + dis, 690, 850 + dis); 380 region.setPath(regionPath, clip); 381 canvas.drawRegion(region); 382 canvas.detachBrush(); 383 } 384}