HarmonyOS 鸿蒙Next canvas绘制图像时，缩放图像显示有问题

我自定义了一个组件，其中包含一个canvas，我想在canvas上绘制一张图像，当点击下方按钮的时候使画布可以自适应界面大小，同时缩放图像

但是我遇到一个问题，偶尔会出现画布大小变化了，但是图像并没有缩放，偶尔出现，非必现

代码如下：

import { image } from ‘@kit.ImageKit’;
import { HashMap } from ‘@kit.ArkTS’;
import { hilog } from ‘@kit.PerformanceAnalysisKit’;
import { resourceManager } from ‘@kit.LocalizationKit’;
import { BusinessError } from ‘@kit.BasicServicesKit’;
import { drawing  } from ‘@kit.ArkGraphics2D’;
import { componentUtils, window } from ‘@kit.ArkUI’;

const entryContext: Context = getContext(this);
const resourceMgr : resourceManager.ResourceManager = entryContext.resourceManager;
@Preview
@Component
export struct RightCanvas{
private settings: RenderingContextSettings = new RenderingContextSettings(true);
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
@State canvasWidth:number = 400
@State canvasHeight:number = 200
@State pixelMap: PixelMap | undefined = undefined;
canvasDraw: drawing.Canvas|undefined=undefined;
@State selectImage:string=’’
aboutToAppear(): void {
getContext(this).eventHub.on(“loadImage”,(imageName:string)=>{
this.loadImage(imageName)
})
}
aboutToDisappear(): void {
getContext(this).eventHub.off(“loadImage”)
}
private offCanvas: OffscreenCanvas = new OffscreenCanvas(600, 600)
// private staticCanvas:StaticCanvas = new StaticCanvas()
build() {
Column(){
Row(){
Scroll(){
Scroll() {
Canvas(this.context)
.width(this.canvasWidth)
.height(this.canvasHeight)
.border({
width:this.pixelMap!=undefined?1:0,
color:Color.Red
})
.onReady(()=>{
            })
            .onClick((event)=>{
                console.log(`${event.x},${event.y}`)
            })
        }
        .scrollable(ScrollDirection.Vertical)
        .scrollBar(BarState.On)
      }
      .scrollable(ScrollDirection.Horizontal)
      .scrollBar(BarState.On)
      <span class="hljs-comment">// Text("预览")</span>
      <span class="hljs-comment">// Image(this.pixelMap).width(200).height(200)</span>
    }
    .layoutWeight(<span class="hljs-number">1</span>)
    .width(<span class="hljs-string">'100%'</span>)
    .justifyContent(FlexAlign.Center)
    .alignItems(VerticalAlign.Center)
    .id(<span class="hljs-string">"canvasContainer"</span>)
    Row({space: <span class="hljs-number">5</span>}){
      Image($r(<span class="hljs-string">'app.media.auto'</span>))
        .width(<span class="hljs-number">28</span>).height(<span class="hljs-number">28</span>)
        .onClick(async ()=&gt;{
          <span class="hljs-keyword">let</span> textRange = componentUtils.getRectangleById(<span class="hljs-string">"canvasContainer"</span>)
          <span class="hljs-keyword">let</span> width = textRange.size.width
          <span class="hljs-keyword">let</span> height = textRange.size.height
          console.log(`组件宽${width},组件高${height}`)
          <span class="hljs-keyword">if</span>(<span class="hljs-keyword">this</span>.pixelMap==<span class="hljs-literal">undefined</span>){
            <span class="hljs-keyword">return</span>
          }
          <span class="hljs-keyword">this</span>.pixelMap.getImageInfo().then((imageInfo)=&gt;{
            <span class="hljs-keyword">let</span> imageWidth = imageInfo.size.width
            <span class="hljs-keyword">let</span> imageHeight = imageInfo.size.height
            <span class="hljs-keyword">let</span> zoom = <span class="hljs-built_in">Math</span>.min(width/imageWidth, height/imageHeight)
            <span class="hljs-keyword">if</span>(zoom&lt;<span class="hljs-number">1</span>){
              <span class="hljs-keyword">this</span>.context.reset()
              <span class="hljs-keyword">this</span>.context.clearRect(<span class="hljs-number">0</span>,<span class="hljs-number">0</span>,<span class="hljs-keyword">this</span>.canvasWidth,<span class="hljs-keyword">this</span>.canvasHeight)
              <span class="hljs-keyword">this</span>.pixelMap?.scale(zoom,zoom).then(()=&gt;{
                <span class="hljs-keyword">this</span>.flushPixelMap()
                <span class="hljs-keyword">this</span>.canvasWidth=px2vp(imageWidth)*zoom
                <span class="hljs-keyword">this</span>.canvasHeight=px2vp(imageHeight)*zoom
                console.log(`缩放后的图像宽${<span class="hljs-keyword">this</span>.pixelMap?.getImageInfoSync().size.width},缩放比例${zoom}`)
                <span class="hljs-keyword">this</span>.context.drawImage(<span class="hljs-keyword">this</span>.pixelMap,<span class="hljs-number">0</span>,<span class="hljs-number">0</span>)
                console.log(<span class="hljs-string">"缩放完成"</span>)
              })
            }
          })
        })
      
    }
    .justifyContent(FlexAlign.Center)
    .backgroundColor(<span class="hljs-string">'#eaeaea'</span>)
    .height(<span class="hljs-number">45</span>)
    .flexGrow(<span class="hljs-number">0</span>)
    .width(<span class="hljs-string">'100%'</span>)
  }
  .justifyContent(FlexAlign.SpaceBetween)
  .width(<span class="hljs-string">'100%'</span>)
  .height(<span class="hljs-string">'100%'</span>)
}
flushPixelMap() {
let temp = this.pixelMap;
this.pixelMap = undefined;
this.pixelMap = temp;
}
loadImage(imageName:string){
// this.context.reset();
if(hilog.isLoggable(0x001,“canvas”,hilog.LogLevel.DEBUG)){
hilog.debug(0x0001,“canvas”,“画布尺寸为(宽:%{public}d,高:%{public}d)”,this.context.width,this.context.height)
}
if(hilog.isLoggable(0x001,“canvas”,hilog.LogLevel.INFO)){
hilog.info(0x0001,“canvas”,“加载图像，图像名称为[%{public}s]”,imageName)
}
let fd = resourceMgr.getRawFdSync(imageName)
let imageSource:image.ImageSource = image.createImageSource(fd);
imageSource.createPixelMap((err: BusinessError, pixelMap: image.PixelMap) => {
if (err) {
hilog.error(0x0001,“canvas”,“加载图像失败,错误码[%{public}d],错误信息[%{public}s]”,err.code,err.message);
} else {
this.context.reset()
this.context.clearRect(0,0,this.canvasWidth,this.canvasHeight)
this.pixelMap = pixelMap
this.canvasWidth = px2vp(this.pixelMap.getImageInfoSync().size.width)
this.canvasHeight = px2vp(this.pixelMap.getImageInfoSync().size.height)
this.context.drawImage(this.pixelMap,0,0)
}
})
}
}