1# Implementing Custom Drawing 2When the registered event is detected as a drawing type, you can use the custom drawing feature to implement your own drawing logic and render custom content. 3> **NOTE** 4> - During event registration, you must register the event as a drawing event (for example, **ARKUI_NODE_CUSTOM_EVENT_ON_DRAW**). You can find the event types and their meanings by referring to the [ArkUI_NodeCustomEventType](../reference/apis-arkui/_ark_u_i___native_module.md#arkui_nodecustomeventtype) enum. 5> 6> - To implement custom drawing logic, you must define custom **UserData** and pass it during event registration. 7 8- Use the **create** API of **ArkUI_NativeNodeAPI_1** to create a custom node, passing **ARKUI_NODE_CUSTOM**. 9 ```c++ 10 auto customNode = nodeAPI->createNode(ARKUI_NODE_CUSTOM); 11 ``` 12 13- Register the custom event with the custom node, event type (for example, **ARKUI_NODE_CUSTOM_EVENT_ON_FOREGROUND_DRAW**), event ID, and **UserData**. 14 ```c++ 15 //UserData 16 struct A { 17 int32_t a =6; 18 bool flag = true; 19 ArkUI_NodeHandle node; 20 }; 21 A *a = new A; 22 a->node = customNode; 23 nodeAPI->registerNodeCustomEvent(customNode,ARKUI_NODE_CUSTOM_EVENT_ON_FOREGROUND_DRAW,1,a); 24 nodeAPI->registerNodeCustomEventReceiver([](ArkUI_NodeCustomEvent *event) { 25 // Event callback logic 26 }); 27 ``` 28 29- In the callback, obtain the event type, event ID, and UserData to determine the logic to execute, using the following APIs: [OH_ArkUI_NodeCustomEvent_GetEventType](../reference/apis-arkui/_ark_u_i___native_module.md#oh_arkui_nodecustomevent_geteventtype), [OH_ArkUI_NodeCustomEvent_GetEventTargetId](../reference/apis-arkui/_ark_u_i___native_module.md#oh_arkui_nodecustomevent_geteventtargetid), [OH_ArkUI_NodeCustomEvent_GetUserData](../reference/apis-arkui/_ark_u_i___native_module.md#oh_arkui_nodecustomevent_getuserdata). 30 31 ```c++ 32 auto type = OH_ArkUI_NodeCustomEvent_GetEventType(event); 33 auto targetId = OH_ArkUI_NodeCustomEvent_GetEventTargetId(event); 34 auto userData =reinterpret_cast<A *>( OH_ArkUI_NodeCustomEvent_GetUserData(event)); 35 ``` 36 37- Use [OH_ArkUI_NodeCustomEvent_GetDrawContextInDraw](../reference/apis-arkui/_ark_u_i___native_module.md#oh_arkui_nodecustomevent_getdrawcontextindraw) to obtain the drawing context from the custom event, and then pass it to [OH_ArkUI_DrawContext_GetCanvas](../reference/apis-arkui/_ark_u_i___native_module.md#oh_arkui_drawcontext_getcanvas) to obtain the drawing canvas pointer. This pointer is then cast to an **OH_Drawing_Canvas** pointer for drawing operations. 38 ```c++ 39 // Obtain the drawing context for the custom event. 40 auto *drawContext = OH_ArkUI_NodeCustomEvent_GetDrawContextInDraw(event); 41 // Obtain the drawing canvas pointer. 42 auto *canvas1 = OH_ArkUI_DrawContext_GetCanvas(drawContext); 43 // Cast the pointer to an OH_Drawing_Canvas pointer for drawing. 44 OH_Drawing_Canvas *canvas = reinterpret_cast<OH_Drawing_Canvas *>(canvas1); 45 // Drawing logic. 46 int32_t width = 1000; 47 int32_t height = 1000; 48 auto path = OH_Drawing_PathCreate(); 49 OH_Drawing_PathMoveTo(path, width / 4, height / 4); 50 OH_Drawing_PathLineTo(path, width * 3 / 4, height * 3 / 4); 51 OH_Drawing_PathLineTo(path, width * 3 / 4, height * 3 / 4); 52 OH_Drawing_PathLineTo(path, width * 3 / 4, height * 3 / 4); 53 OH_Drawing_PathLineTo(path, width * 3 / 4, height * 3 / 4); 54 OH_Drawing_PathClose(path); 55 auto pen = OH_Drawing_PenCreate(); 56 OH_Drawing_PenSetWidth(pen, 10); 57 OH_Drawing_PenSetColor(pen, OH_Drawing_ColorSetArgb(0xFF, 0xFF, 0x00, 0x00)); 58 OH_Drawing_CanvasAttachPen(canvas, pen); 59 OH_Drawing_CanvasDrawPath(canvas, path); 60 ``` 61**Example** 62 63```c++ 64ArkUI_NodeHandle test(ArkUI_NativeNodeAPI_1 *nodeAPI) { 65 // Create a node. 66 auto column = nodeAPI->createNode(ARKUI_NODE_COLUMN); 67 auto customNode = nodeAPI->createNode(ARKUI_NODE_CUSTOM); 68 ArkUI_NumberValue value[] = {480}; 69 ArkUI_AttributeItem item = {value, 1}; 70 // Set attributes. 71 nodeAPI->setAttribute(column, NODE_WIDTH, &item); 72 value[0].i32 = 720; 73 nodeAPI->setAttribute(column, NODE_HEIGHT, &item); 74 ArkUI_NumberValue NODE_WIDTH_value[] = {200}; 75 ArkUI_AttributeItem NODE_WIDTH_Item[] = {NODE_WIDTH_value, 1}; 76 ArkUI_NumberValue NODE_HEIGHT_value[] = {200}; 77 ArkUI_AttributeItem NODE_HEIGHT_Item[] = {NODE_HEIGHT_value, 1}; 78 ArkUI_NumberValue NODE_BACKGROUND_COLOR_item_value[] = {{.u32 = 0xFFFFFF00}}; 79 ArkUI_AttributeItem NODE_BACKGROUND_COLOR_Item[] = {NODE_BACKGROUND_COLOR_item_value, 1}; 80 // Define custom UserData. 81 struct A { 82 int32_t a =6; 83 bool flag = true; 84 ArkUI_NodeHandle node; 85 }; 86 A *a = new A; 87 a->node = customNode; 88 nodeAPI->setAttribute(customNode, NODE_WIDTH, NODE_WIDTH_Item); 89 nodeAPI->setAttribute(customNode, NODE_HEIGHT, NODE_HEIGHT_Item); 90 nodeAPI->setAttribute(customNode, NODE_BACKGROUND_COLOR, NODE_BACKGROUND_COLOR_Item); 91 // Register the event. 92 nodeAPI->registerNodeCustomEvent(customNode,ARKUI_NODE_CUSTOM_EVENT_ON_FOREGROUND_DRAW,1,a); 93 // Define the event callback. 94 nodeAPI->registerNodeCustomEventReceiver([](ArkUI_NodeCustomEvent *event) { 95 // Obtain information from the custom event. 96 auto type = OH_ArkUI_NodeCustomEvent_GetEventType(event); 97 auto targetId = OH_ArkUI_NodeCustomEvent_GetEventTargetId(event); 98 auto userData =reinterpret_cast<A *>( OH_ArkUI_NodeCustomEvent_GetUserData(event)); 99 if (type == ARKUI_NODE_CUSTOM_EVENT_ON_FOREGROUND_DRAW && targetId == 1 && userData->flag) { 100 // Obtain the drawing context for the custom event. 101 auto *drawContext = OH_ArkUI_NodeCustomEvent_GetDrawContextInDraw(event); 102 // Obtain the drawing canvas pointer. 103 auto *canvas1 = OH_ArkUI_DrawContext_GetCanvas(drawContext); 104 // Cast the pointer to an OH_Drawing_Canvas pointer for drawing. 105 OH_Drawing_Canvas *canvas = reinterpret_cast<OH_Drawing_Canvas *>(canvas1); 106 int32_t width = 1000; 107 int32_t height = 1000; 108 auto path = OH_Drawing_PathCreate(); 109 OH_Drawing_PathMoveTo(path, width / 4, height / 4); 110 OH_Drawing_PathLineTo(path, width * 3 / 4, height * 3 / 4); 111 OH_Drawing_PathLineTo(path, width * 3 / 4, height * 3 / 4); 112 OH_Drawing_PathLineTo(path, width * 3 / 4, height * 3 / 4); 113 OH_Drawing_PathLineTo(path, width * 3 / 4, height * 3 / 4); 114 OH_Drawing_PathClose(path); 115 auto pen = OH_Drawing_PenCreate(); 116 OH_Drawing_PenSetWidth(pen, 10); 117 OH_Drawing_PenSetColor(pen, OH_Drawing_ColorSetArgb(0xFF, 0xFF, 0x00, 0x00)); 118 OH_Drawing_CanvasAttachPen(canvas, pen); 119 OH_Drawing_CanvasDrawPath(canvas, path); 120 } 121 }); 122 // Add the custom node to the tree. 123 nodeAPI->addChild(column, customNode); 124 return column; 125 } 126``` 127 128
