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
30To obtain the window width and height information on a page, timing is crucial. The [aboutToAppear](../reference/apis-arkui/arkui-ts/ts-custom-component-lifecycle.md#abouttoappear) phase in the page lifecycle does not indicate that the window is visible. It only indicates that the component has been created. As such, the window size information (specified by **windowRect**) obtained in this phase may be incorrect. To obtain the correct window width and height, you are advised to obtain the information in the [onPageShow](../reference/apis-arkui/arkui-ts/ts-custom-component-lifecycle.md#onpageshow) phase, which is triggered once the window is visible.
31
32**Example**
33
34```
35import window from '@ohos.window';
36
37// To obtain the window width and height on a page, you are advised to place the following code in the onPageShow phase instead of aboutToAppear of the page lifecycle.
38let windowClass = null;
39try {
40    let promise = window.getLastWindow(this.context);
41    promise.then((data)=> {
42        // Obtain a Window object.
43        windowClass = data;
44        try {
45            // Obtain the window properties.
46            let properties = windowClass.getWindowProperties();
47            let rect = properties.windowRect;
48            // rect.width: window width; rect.height: window height.
49        } catch (exception) {
50             console.error('Failed to obtain the window properties. Cause: ' + JSON.stringify(exception));
51        }
52        console.info('Succeeded in obtaining the top window. Data: ' + JSON.stringify(data));
53    }).catch((err)=>{
54        console.error('Failed to obtain the top window. Cause: ' + JSON.stringify(err));
55    });} catch (exception) {
56    console.error('Failed to obtain the top window. Cause: ' + JSON.stringify(exception));
57}
58```
59
60
61## How do I perform Gaussian blurring on images? (API version 9)
62
63**Solution**
64
65Import the **\@ohos.multimedia.image** and **\@ohos.effectKit** modules to process the image and add the blur effect.
66
67**Example**
68
69```
70import image from "@ohos.multimedia.image";
71import effectKit from "@ohos.effectKit";
72
73  const color = new ArrayBuffer(96);
74  let opts = { editable: true, pixelFormat: 3, size: { height: 4, width: 6 } };
75  image.createPixelMap(color, opts).then((pixelMap) => {
76    let radius = 5;
77    let headFilter = effectKit.createEffect(pixelMap);
78    if (headFilter != null) {
79      headFilter.blur(radius);
80    }
81  })
82```
83**References**
84
85[blur](../reference/apis-arkgraphics2d/js-apis-effectKit.md#blur)
86
87
88## Can EGL operations be performed in subthreads? (API version 10)
89
90**Solution**
91
92Yes. You can create **SharedContext** to implement EGL operations in subthreads.
93
94**Example**
95```cpp
96void CreateShareEglContext()
97{
98  if (renderContext == nullptr) { // renderContext is the context of the main thread.
99      RS_LOGE("renderContext_ is nullptr");
100      return;
101  }
102  eglShareContext = renderContext->CreateShareContext();
103  if (eglShareContext == EGL_NO_CONTEXT) {
104      RS_LOGE("eglShareContext is EGL_NO_CONTEXT");
105      return;
106  }
107  if (!eglMakeCurrent(renderContext->GetEGLDisplay(), EGL_NO_SURFACE, EGL_NO_SURFACE, eglShareContext)) {
108      RS_LOGE("eglMakeCurrent failed");
109      return;
110  }
111}
112```
113
114## How do I draw a custom animation using EGL? (API version 10)
115
116**Solution**
117
118Use OpenGL APIs to draw a custom animation.
119
120To 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.
121
122**References**
123
124[Native XComponent Usage (ArkTS)](https://gitee.com/openharmony/codelabs/tree/master/NativeAPI/XComponent)
125
126## How do I operate a buffer to draw graphics in the EGL multithreaded drawing scenario? (API version 10)
127
128**Solution**
129
130You can generate a texture through each thread, and then combine the textures into a buffer.
131
132You can use **SharedContext** to implement EGL operations in subthreads. You can call OpenGL APIs for the drawing operation.
133
134**Example**
135```cpp
136void CreateShareEglContext()
137{
138  if (renderContext == nullptr) { // renderContext is the context of the main thread.
139      RS_LOGE("renderContext_ is nullptr");
140      return;
141  }
142  eglShareContext = renderContext->CreateShareContext();
143  if (eglShareContext == EGL_NO_CONTEXT) {
144      RS_LOGE("eglShareContext is EGL_NO_CONTEXT");
145      return;
146  }
147  if (!eglMakeCurrent(renderContext->GetEGLDisplay(), EGL_NO_SURFACE, EGL_NO_SURFACE, eglShareContext)) {
148      RS_LOGE("eglMakeCurrent failed");
149      return;
150  }
151}
152```
153## Can a custom transition animation be used during an ability migration? If yes, how can I implement it? (API version 10)
154
155**Solution**
156
157No, a custom transition animation cannot be used. The UIAbility displays only one widget on the Recents screen. No customization is allowed for consistency purposes.
158
159The UIAbility cannot be used to combine in-app screens. Instead, use the **Navigation** component to implement in-app redirection.
160
161**References**
162
163[Navigation](../ui/arkts-navigation-navigation.md)
164