版面-电子报版面按住图片出现阴影绘制区域优化

@@ -13,6 +13,10 @@ export struct ENewspaperItemComponent {
   private startY: number = 0
   private itemBeanClicked: NewspaperPositionItemBean = {} as NewspaperPositionItemBean
   @State isShowSkeleton: boolean = true
+  @State contentWidth: number = 0
+  @State contentHeight: number = 0
+  @Consume itemPicWidth: number
+  @Consume itemPicHeight: number
 
   aboutToAppear(): void {
     for (let index = 0; index < this.newspaperListItemBean.items.length; index++) {
@@ -33,23 +37,28 @@ export struct ENewspaperItemComponent {
       newsSkeleton()
         .visibility(this.isShowSkeleton ? Visibility.Visible : Visibility.None)
       Image(this.newspaperListItemBean.pagePic)
-        .width('100%')
-        .onComplete(() => {
+        .width(px2vp(this.itemPicWidth))
+        .height(px2vp(this.itemPicHeight))
+        .onComplete((event) => {
+          if (event?.loadingStatus == 1) {
+            this.contentWidth = event?.contentWidth
+            this.contentHeight = event?.contentHeight
+          }
           this.isShowSkeleton = false
         })
-        .objectFit(ImageFit.Contain)
+        .objectFit(ImageFit.Fill)
         .visibility(this.isShowSkeleton ? Visibility.None : Visibility.Visible)
+      if (this.contentWidth !== 0) {
+        Canvas(this.context)
+          .width(px2vp(this.contentWidth))
+          .height(px2vp(this.contentHeight))
+          .backgroundColor(Color.Transparent)
+          .onReady(() => {
 
-      Canvas(this.context)
-        .width('100%')
-        .height('100%')
-        .backgroundColor(Color.Transparent)
-        .onReady(() => {
-
-        })
+          })
+      }
     }
     .padding({ top:14, right: 10, bottom: 14, left: 10 })
-    .margin({ left: 10, right: 10 })
     .backgroundColor(Color.White)
     .width('100%')
     .onTouch((event: TouchEvent) => {
@@ -59,6 +68,7 @@ export struct ENewspaperItemComponent {
         this.startX = x;
         this.startY = y;
         let points: number[][] = this.getArea(x, y, this.newspaperListItemBean.items);
+        console.log("event.points", JSON.stringify(points))
         if (points && points.length > 2) {
           let path = new Path2D();
           path.moveTo(px2vp(points[0][0]), px2vp(points[0][1]));

@@ -21,8 +21,10 @@ export struct ENewspaperPageComponent {
   private windowClass?: window.Window;
   private displayTool = display.getDefaultDisplaySync()
   private screenWidth: number = 0
-  private picWidth: number = 0
+  @State picWidth: number = 0
   @State picHeight: number = 0
+  @Provide itemPicWidth: number = 0
+  @Provide itemPicHeight: number = 0
   @State newspaperListBean: NewspaperListBean = {} as NewspaperListBean
   @Provide @Watch('onCurrentPageNumUpdated') currentPageNum: string = '01'
   @State pageDialogShow: boolean = false
@@ -131,13 +133,19 @@ export struct ENewspaperPageComponent {
     this.screenWidth = this.windowClass?.getWindowProperties()?.windowRect.width
     console.log('ENewspaperPageComponent this.screenWidth', this.screenWidth)
     // 2000折叠屏 TODO DeviceUtil 方法完善了换判断条件
-    this.ratio = this.screenWidth > 2000 ? '60%' : '100%'
+    this.ratio = this.screenWidth > 2000 ? '50%' : '100%'
     //获取宽高尺寸
-    this.picWidth = this.screenWidth - vp2px(52)
+    // Swiper .margin({ left: 10, right: 10 })
+    this.picWidth = this.screenWidth - vp2px(20)
     let screenHeight = this.displayTool.height;
     // bottomSafeHeight 底导高度 topSafeHeight 顶导高度 44 顶部高度 60 底部高度
-    let height = screenHeight - this.bottomSafeHeight - this.topSafeHeight - vp2px(44) - vp2px(60)
+    // newspaper_shadow 49 高度  e_newspaper_content 59 margin top
+    let height = screenHeight - this.bottomSafeHeight - this.topSafeHeight - vp2px(44) - vp2px(60) - vp2px(49) -vp2px(59)
     this.picHeight = height
+
+    let ratio = this.ratio == '100%' ? 1 : 0.5
+    this.picWidth = this.picWidth * ratio
+    this.picHeight = this.picHeight
     // 默认日期
     const date = new Date()
     const month = date.getMonth() + 1
@@ -168,7 +176,10 @@ export struct ENewspaperPageComponent {
     this.windowClass?.on('windowSizeChange', () => {
       this.screenWidth = this.windowClass?.getWindowProperties()?.windowRect.width || this.displayTool.width
       // 2000折叠屏 TODO DeviceUtil 方法完善了换判断条件
-      this.ratio = this.screenWidth > 2000 ? '60%' : '100%'
+      this.ratio = this.screenWidth > 2000 ? '50%' : '100%'
+      let ratio = this.ratio == '100%' ? 1 : 0.5
+      this.picWidth = this.screenWidth - vp2px(20)
+      this.picWidth = this.picWidth * ratio
     });
   }
 
@@ -248,7 +259,7 @@ export struct ENewspaperPageComponent {
             .id('news_skeleton_id')
             .width('100%')
             .height(px2vp(this.picHeight) + 32)
-            .margin({ top: 35, left: 10, right: 10 })
+            .margin({ top: 59, left: 10, right: 10 })
         }
 
         if (this.newspaperListBean && this.newspaperListBean.list && this.newspaperListBean.list.length > 0) {
@@ -259,16 +270,15 @@ export struct ENewspaperPageComponent {
           }
           .itemSpace(10)
           .index(this.swiperIndex)
-          .width(this.ratio)
-          // newspaper_shadow 44 高度  e_newspaper_content 35 margin top
-          .height(px2vp(this.picHeight) - 44 - 35)
+          .width(px2vp(this.picWidth))
+          .height(px2vp(this.picHeight))
           .vertical(true)
           .autoPlay(false)
           .cachedCount(1)
           .indicator(false)
           .loop(false)
           .displayCount(1)
-          .margin({ top: 35, left: 10, right: 10 })
+          .margin({ top: 59, left: 10, right: 10 })
           .id('e_newspaper_content')
           .alignRules({
             top: { anchor: "e_newspaper_top", align: VerticalAlign.Bottom },
@@ -298,6 +308,7 @@ export struct ENewspaperPageComponent {
               '滑动查看下一版')
               .fontColor(Color.White)
               .fontSize($r('app.float.font_size_14'))
+              .lineHeight(20)
             Image($r('app.media.icon_next_page'))
               .width($r('app.float.vp_16'))
               .height($r('app.float.vp_16'))
@@ -305,7 +316,7 @@ export struct ENewspaperPageComponent {
               Visibility.Visible)
           }
           .justifyContent(FlexAlign.Center)
-          .margin({ top: $r('app.float.margin_16') })
+          .margin({ top: 17 })
           .alignRules({
             top: { anchor: "e_newspaper_shadow", align: VerticalAlign.Bottom },
             middle: { anchor: "__container__", align: HorizontalAlign.Center }
@@ -434,10 +445,15 @@ export struct ENewspaperPageComponent {
   }
 
   private async getNewspaperList() {
+    // ENewspaperItemComponent .padding({ top:14, right: 10, bottom: 14, left: 10 })
+    // 计算图片的内容宽高
+    let ratio = this.ratio == '100%' ? 1 : 0.6
+    this.itemPicWidth = this.picWidth * ratio - vp2px(20)
+    this.itemPicHeight = this.picHeight - vp2px(28)
     try {
       if (NetworkUtil.isNetConnected()) {
         let listBean =
-          await NewspaperViewModel.getNewspaperList(this.calendarDate, this.picWidth + 'x' + this.picHeight)
+          await NewspaperViewModel.getNewspaperList(this.calendarDate, this.itemPicWidth  + 'x' + this.itemPicHeight)
         this.newspaperListBean = listBean;
       } else {
         this.showToastTip('网络出小差了，请检查网络后重试')