电子报页面

@@ -6,12 +6,15 @@ export struct ENewspaperItemComponent {
   private newspaperListItemBean: NewspaperListItemBean = {} as NewspaperListItemBean
   private settings: RenderingContextSettings = new RenderingContextSettings(true);
   private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
+  private startX: number = 0
+  private startY: number = 0
+  private itemBeanClicked: NewspaperPositionItemBean = {} as NewspaperPositionItemBean
 
   build() {
     Stack() {
       Image(this.newspaperListItemBean.pagePic)
         .width('100%')
-        .height('100%')
+        .aspectRatio(0.68688)
         .objectFit(ImageFit.Contain)
 
       Canvas(this.context)
@@ -23,11 +26,21 @@ export struct ENewspaperItemComponent {
         })
     }
     .width('100%')
-    .aspectRatio(0.7)
+    .aspectRatio(0.68688)
+    .onClick((event: ClickEvent) =>{
+      if (this.itemBeanClicked && this.itemBeanClicked.newsId){
+        // todo 跳转事件
+
+
+        this.itemBeanClicked = {} as NewspaperPositionItemBean
+      }
+    })
     .onTouch((event: TouchEvent) => {
       if (event.type === TouchType.Down) {
         let x = event.touches[0].x;
         let y = event.touches[0].y;
+        this.startX = x;
+        this.startY = y;
         let points: number[][] = this.getArea(x, y, this.newspaperListItemBean.items);
         if (points && points.length > 2){
           let path = new Path2D();
@@ -47,7 +60,13 @@ export struct ENewspaperItemComponent {
         this.context.clearRect(0, 0, this.context.width, this.context.height)
       }
       if (event.type === TouchType.Move) {
-        // this.context.clearRect(0, 0, this.context.width, this.context.height)
+        let mx = event.touches[0].x;
+        let my = event.touches[0].y;
+        if (this.startX - mx > 5 || mx - this.startX > 5 || this.startY - my > 5 || my - this.startY > 5){
+          this.itemBeanClicked = {} as NewspaperPositionItemBean
+          this.context.clearRect(0, 0, this.context.width, this.context.height)
+        }
+
       }
     })
   }
@@ -66,7 +85,8 @@ export struct ENewspaperItemComponent {
             for (let item of area) {
               let pair: string[] = item.split(',');
               if (pair && pair.length > 1) {
-                let xy: number[] = [StringUtils.parseNumber(pair[0]), StringUtils.parseNumber(pair[1])]
+                // todo 因为数据是根据安卓手机抓的，这里根据分辨率倍数做了数据放大处理，真实数据不用乘以放大倍数
+                let xy: number[] = [StringUtils.parseNumber(pair[0])*1.28, StringUtils.parseNumber(pair[1])*1.24]
                 if (minX < 0) {
                   minX = xy[0]
                 } else {
@@ -101,6 +121,7 @@ export struct ENewspaperItemComponent {
             }
 
             if (vp2px(x) > minX && vp2px(x) < maxX && vp2px(y) > minY && vp2px(y) < maxY) {
+              this.itemBeanClicked = itemBean;
               return xys;
             }
           }

 import { NewspaperListBean, NewspaperListItemBean } from 'wdBean'
 import { NewspaperViewModel } from '../viewmodel/NewspaperViewModel'
 import router from '@ohos.router'
+import { Logger } from 'wdKit';
 import { ENewspaperItemComponent } from './ENewspaperItemComponent'
 
 @Component
@@ -20,6 +21,7 @@ export struct ENewspaperPageComponent {
             center: { anchor: "__container__", align: VerticalAlign.Center } })
           .id('e_newspaper_back')
           .onClick((event: ClickEvent) => {
+            Logger.info("sfsfsd", "" + vp2px(10))
             router.back()
           })
 
@@ -64,7 +66,7 @@ export struct ENewspaperPageComponent {
         .cachedCount(3)
         .indicator(false)
         .displayCount(1)
-        .aspectRatio(0.7)
+        .aspectRatio(0.68688)
         .margin({ top: $r('app.float.vp_55'), left: 10, right: 10 })
         .id('e_newspaper_content')
         .alignRules({ top: { anchor: "e_newspaper_top", align: VerticalAlign.Bottom },
@@ -75,7 +77,7 @@ export struct ENewspaperPageComponent {
 
         Image($r('app.media.newspaper_shadow'))
           .height($r('app.float.vp_12'))
-          .margin({ left: 12, right: 12, top: -2 })
+          .margin({ left: 12, right: 12, top: -5 })
           .objectFit(ImageFit.Contain)
           .alignRules({ top: { anchor: "e_newspaper_content", align: VerticalAlign.Bottom },
             left: { anchor: 'e_newspaper_content', align: HorizontalAlign.Start },