harmony 鸿蒙Graphics Development

2022-10-28
浏览 (935)

Graphics Development

How do I obtain the DPI of a device? (API version 9)

Solution

Import the \@ohos.display module and call the getDefaultDisplaySync() API.

Example

import display from '@ohos.display'; 
let displayClass = null;
try {
  displayClass = display.getDefaultDisplaySync();
  console.info('Test densityDPI:' + JSON.stringify(displayClass.densityDPI));
} catch (exception) {
  console.error('Failed to obtain the default display object. Code: ' + JSON.stringify(exception));
}

How do I obtain the window width and height? (API version 9)

Solution

Import 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.

To obtain the window width and height information on a page, timing is crucial. The 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 phase, which is triggered once the window is visible.

Example

import window from '@ohos.window';

// 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.
let windowClass = null;
try {    
    let promise = window.getLastWindow(this.context);
    promise.then((data)=> {
        // Obtain a Window object.
        windowClass = data;
        try {
            // Obtain the window properties.
            let properties = windowClass.getWindowProperties();
            let rect = properties.windowRect;
            // rect.width: window width; rect.height: window height.
        } catch (exception) {
             console.error('Failed to obtain the window properties. Cause: ' + JSON.stringify(exception));
        }
        console.info('Succeeded in obtaining the top window. Data: ' + JSON.stringify(data));
    }).catch((err)=>{
        console.error('Failed to obtain the top window. Cause: ' + JSON.stringify(err));
    });} catch (exception) {
    console.error('Failed to obtain the top window. Cause: ' + JSON.stringify(exception));
}

How do I perform Gaussian blurring on images? (API version 9)

Solution

Import the \@ohos.multimedia.image and \@ohos.effectKit modules to process the image and add the blur effect.

Example

import image from "@ohos.multimedia.image";
import effectKit from "@ohos.effectKit";

  const color = new ArrayBuffer(96);
  let opts = { editable: true, pixelFormat: 3, size: { height: 4, width: 6 } };
  image.createPixelMap(color, opts).then((pixelMap) => {
    let radius = 5;  
    let headFilter = effectKit.createEffect(pixelMap);  
    if (headFilter != null) {
      headFilter.blur(radius);
    }
  })

References

blur

Can EGL operations be performed in subthreads? (API version 10)

Solution

Yes. You can create SharedContext to implement EGL operations in subthreads.

Example

void CreateShareEglContext()
{
  if (renderContext == nullptr) { // renderContext is the context of the main thread.
      RS_LOGE("renderContext_ is nullptr");
      return;
  }
  eglShareContext = renderContext->CreateShareContext();
  if (eglShareContext == EGL_NO_CONTEXT) {
      RS_LOGE("eglShareContext is EGL_NO_CONTEXT");
      return;
  }
  if (!eglMakeCurrent(renderContext->GetEGLDisplay(), EGL_NO_SURFACE, EGL_NO_SURFACE, eglShareContext)) {
      RS_LOGE("eglMakeCurrent failed");
      return;
  }
}

How do I draw a custom animation using EGL? (API version 10)

Solution

Use OpenGL APIs to draw a custom animation.

To 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.

References

Native XComponent Usage (ArkTS)

How do I operate a buffer to draw graphics in the EGL multithreaded drawing scenario? (API version 10)

Solution

You can generate a texture through each thread, and then combine the textures into a buffer.

You can use SharedContext to implement EGL operations in subthreads. You can call OpenGL APIs for the drawing operation.

Example

void CreateShareEglContext()
{
  if (renderContext == nullptr) { // renderContext is the context of the main thread.
      RS_LOGE("renderContext_ is nullptr");
      return;
  }
  eglShareContext = renderContext->CreateShareContext();
  if (eglShareContext == EGL_NO_CONTEXT) {
      RS_LOGE("eglShareContext is EGL_NO_CONTEXT");
      return;
  }
  if (!eglMakeCurrent(renderContext->GetEGLDisplay(), EGL_NO_SURFACE, EGL_NO_SURFACE, eglShareContext)) {
      RS_LOGE("eglMakeCurrent failed");
      return;
  }
}

Can a custom transition animation be used during an ability migration? If yes, how can I implement it? (API version 10)

Solution

No, a custom transition animation cannot be used. The UIAbility displays only one widget on the Recents screen. No customization is allowed for consistency purposes.

The UIAbility cannot be used to combine in-app screens. Instead, use the Navigation component to implement in-app redirection.

References

Navigation