1# Graphics Development
2
3
4## How do I obtain the DPI of a device? (API version 9)
5
6**Solution**
7
8Import the **\@ohos.display** module and call the **getDefaultDisplaySync()** API.
9
10**Example**
11
12```
13import display from '@ohos.display'; 
14let displayClass = null;
15try {
16  displayClass = display.getDefaultDisplaySync();
17  console.info('Test densityDPI:' + JSON.stringify(displayClass.densityDPI));
18} catch (exception) {
19  console.error('Failed to obtain the default display object. Code: ' + JSON.stringify(exception));
20}
21```
22
23
24## How do I obtain the window width and height? (API version 9)
25
26**Solution**
27
28Import the **\@ohos.window** module, obtain a **Window** object, and use **getWindowProperties()** of the object to obtain the window properties. The **windowRect** field in the properties specifies the window width and height.
29
30**Example**
31
32```
33import window from '@ohos.window';
34let windowClass = null;
35try {    
36    let promise = window.getLastWindow(this.context);
37    promise.then((data)=> {
38        // Obtain a Window object.
39        windowClass = data;
40        try {
41            // Obtain the window properties.
42            let properties = windowClass.getWindowProperties();
43            let rect = properties.windowRect;
44            // rect.width: window width; rect.height: window height.
45        } catch (exception) {
46             console.error('Failed to obtain the window properties. Cause: ' + JSON.stringify(exception));
47        }
48        console.info('Succeeded in obtaining the top window. Data: ' + JSON.stringify(data));
49    }).catch((err)=>{
50        console.error('Failed to obtain the top window. Cause: ' + JSON.stringify(err));
51    });} catch (exception) {
52    console.error('Failed to obtain the top window. Cause: ' + JSON.stringify(exception));
53}
54```
55
56
57## How do I perform Gaussian blurring on images? (API version 9)
58
59**Solution**
60
61Import the **\@ohos.multimedia.image** and **\@ohos.effectKit** modules to process the image and add the blur effect.
62
63**Example**
64
65```
66import image from "@ohos.multimedia.image";
67import effectKit from "@ohos.effectKit";
68
69  const color = new ArrayBuffer(96);
70  let opts = { editable: true, pixelFormat: 3, size: { height: 4, width: 6 } };
71  image.createPixelMap(color, opts).then((pixelMap) => {
72    let radius = 5;  
73    let headFilter = effectKit.createEffect(pixelMap);  
74    if (headFilter != null) {
75      headFilter.blur(radius);
76    }
77  })
78```
79**References**
80
81[blur](../reference/apis-arkgraphics2d/js-apis-effectKit.md#blur)
82
83
84## Can EGL operations be performed in subthreads? (API version 10)
85
86**Solution**
87
88Yes. You can create **SharedContext** to implement EGL operations in subthreads.  
89
90**Example**
91```cpp
92void CreateShareEglContext()
93{
94  if (renderContext == nullptr) { // renderContext is the context of the main thread.
95      RS_LOGE("renderContext_ is nullptr");
96      return;
97  }
98  eglShareContext = renderContext->CreateShareContext();
99  if (eglShareContext == EGL_NO_CONTEXT) {
100      RS_LOGE("eglShareContext is EGL_NO_CONTEXT");
101      return;
102  }
103  if (!eglMakeCurrent(renderContext->GetEGLDisplay(), EGL_NO_SURFACE, EGL_NO_SURFACE, eglShareContext)) {
104      RS_LOGE("eglMakeCurrent failed");
105      return;
106  }
107}
108```
109
110## How do I draw a custom animation using EGL? (API version 10)
111
112**Solution**
113
114Use OpenGL APIs to draw a custom animation.
115
116To implement a custom animation, code the logic of the service party so that the service party can identify animation trigger events, obtain the start and end of the animation based on the service requirements, and calculate the content of each frame to draw based on the time axis and animation curve. After that, you can draw the content by calling the OpenGL APIs.
117
118**References** 
119
120[Native XComponent Usage (ArkTS)](https://gitee.com/openharmony/codelabs/tree/master/NativeAPI/XComponent)
121
122## How do I operate a buffer to draw graphics in the EGL multithreaded drawing scenario? (API version 10)
123
124**Solution**
125
126You can generate a texture through each thread, and then combine the textures into a buffer.
127
128You can use **SharedContext** to implement EGL operations in subthreads. You can call OpenGL APIs for the drawing operation.
129
130**Example**
131```cpp
132void CreateShareEglContext()
133{
134  if (renderContext == nullptr) { // renderContext is the context of the main thread.
135      RS_LOGE("renderContext_ is nullptr");
136      return;
137  }
138  eglShareContext = renderContext->CreateShareContext();
139  if (eglShareContext == EGL_NO_CONTEXT) {
140      RS_LOGE("eglShareContext is EGL_NO_CONTEXT");
141      return;
142  }
143  if (!eglMakeCurrent(renderContext->GetEGLDisplay(), EGL_NO_SURFACE, EGL_NO_SURFACE, eglShareContext)) {
144      RS_LOGE("eglMakeCurrent failed");
145      return;
146  }
147}
148```
149## Can a custom transition animation be used during an ability migration? If yes, how can I implement it? (API version 10)
150
151**Solution**
152
153No, a custom transition animation cannot be used. The UIAbility displays only one widget on the Recents screen. No customization is allowed for consistency purposes.
154
155The UIAbility cannot be used to combine in-app screens. Instead, use the **\<Navigation>** component to implement in-app redirection.
156
157**References**
158
159[Navigation](../ui/arkts-navigation-navigation.md)
160