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 ComplexRenderNode extends RenderNode { 25 async draw(context: DrawContext) { 26 const canvas = context.canvas; 27 let startX = 100.0; 28 let startY = 50.0; 29 let font = new drawing.Font(); 30 font.setSize(screenWidth / 25); 31 let text = getContext().resourceManager.getStringSync($r('app.string.ShaderEffect')); 32 const stringShaderEffect = drawing.TextBlob.makeFromString(text, font, drawing.TextEncoding.TEXT_ENCODING_UTF8); 33 canvas.drawTextBlob(stringShaderEffect, startX, startY); 34 // ShaderEffect 35 let startPt: common2D.Point = { x: 100, y: 100 }; 36 let endPt: common2D.Point = { x: 400, y: 400 }; 37 let colors = [0xFFFFFF00, 0xFFFF0000, 0xFF0000FF]; 38 let shaderEffect = drawing.ShaderEffect.createLinearGradient(startPt, endPt, colors, drawing.TileMode.CLAMP); 39 let brush = new drawing.Brush(); 40 brush.setShaderEffect(shaderEffect); 41 canvas.attachBrush(brush); 42 let rect1: common2D.Rect = { left: 100, top: 100, right: 400, bottom: 400 }; 43 canvas.drawRect(rect1); 44 canvas.detachBrush(); 45 46 let text2 = getContext().resourceManager.getStringSync($r('app.string.ImageFilter')); 47 const stringImageFilter = drawing.TextBlob.makeFromString(text2, font, drawing.TextEncoding.TEXT_ENCODING_UTF8); 48 canvas.drawTextBlob(stringImageFilter, startX + 600, startY); 49 // ImageFilter 50 let pen = new drawing.Pen(); 51 pen.setStrokeWidth(10.0); 52 pen.setColor(0xFF, 0xFF, 0x00, 0x00); 53 let filter = drawing.ImageFilter.createBlurImageFilter(20, 20, drawing.TileMode.CLAMP); 54 pen.setImageFilter(filter); 55 canvas.attachPen(pen); 56 let rect2: common2D.Rect = { left: 700, top: 100, right: 1000, bottom: 400 }; 57 canvas.drawRect(rect2); 58 canvas.detachPen(); 59 60 let text3 = getContext().resourceManager.getStringSync($r('app.string.PathEffect')); 61 const stringPathEffect = drawing.TextBlob.makeFromString(text3, font, drawing.TextEncoding.TEXT_ENCODING_UTF8); 62 canvas.drawTextBlob(stringPathEffect, startX, startY + 600); 63 let iPen = new drawing.Pen(); 64 iPen.setStrokeWidth(10.0); 65 let iPenColor: common2D.Color = { 66 alpha: 0xFF, 67 red: 0xFF, 68 green: 0x00, 69 blue: 0x00 70 }; 71 iPen.setColor(iPenColor); 72 canvas.attachPen(iPen); 73 let intervals = [20.0, 10.0]; 74 let pathEffect = drawing.PathEffect.createDashPathEffect(intervals, 0); 75 iPen.setPathEffect(pathEffect); 76 canvas.attachPen(iPen); 77 canvas.drawLine(100, 700, 400, 1000); 78 canvas.detachPen(); 79 } 80} 81