# 自定义界面扫码预览画面出现拉伸

**问题现象**

XComponent的宽高比与自定义界面扫码接口中ViewControl的宽高比不一致，导致自定义界面扫码预览画面出现拉伸。

**解决措施**

ViewControl的宽高比需要与XComponent的宽高比保持一致，会消除画面拉伸现象。当前支持的分辨率比例为16:9、4:3、1:1。

例如：XComponent中width为1080(px)，height为1920(px)，则ViewControl宽度设置为1080，高度设置为1920。

```
import { hilog } from '@kit.PerformanceAnalysisKit';
import { BusinessError } from '@kit.BasicServicesKit';
import { scanBarcode, customScan } from '@kit.ScanKit';

@Entry
@Component
struct CustomScanPage {
  // 设置预览流高度，默认单位：px
  @State cameraHeight: number = 1920;
  // 设置预览流宽度，默认单位：px
  @State cameraWidth: number = 1080;
  private mXComponentController: XComponentController = new XComponentController();

  build() {
    Stack() {
      XComponent({
        id: 'componentId',
        type: XComponentType.SURFACE,
        controller: this.mXComponentController
      })
        .onLoad(() => {
          hilog.info(0x0001, '[Scan Sample]', 'onLoad is called');
          // 获取XComponent的surfaceId
          let surfaceId: string = this.mXComponentController.getXComponentSurfaceId();
          hilog.info(0x0001, 'viewControl', `onLoad surfaceId: ${surfaceId}`);
          // 设置viewControl相应字段
          let viewControl: customScan.ViewControl = {
            width: this.cameraWidth,
            height: this.cameraHeight,
            surfaceId: surfaceId
          };
          try {
            customScan.start(viewControl).then((scanResult: Array<scanBarcode.ScanResult>) => {
              hilog.info(0x0001, '[Scan Sample]',
                `Succeeded in getting ScanResult by promise, scanResult is ${JSON.stringify(scanResult)}`);
            }).catch((err: BusinessError) => {
              hilog.error(0x0001, '[Scan Sample]',
                `Failed to get ScanResult by promise. Code: ${err.code}, message: ${err.message}`);
            });
          } catch (err) {
            hilog.error(0x0001, '[Scan Sample]',
              `Failed to start customScan. Code: ${err.code}, message: ${err.message}`);
          }
        })
        .height(`${this.cameraHeight}px`)
        .width(`${this.cameraWidth}px`)
        .position({ x: 0, y: 0 })
    }
    .alignContent(Alignment.Bottom)
    .height('100%')
    .width('100%')
    .position({ x: 0, y: 0 })
  }
}
```