ENewspaperItemComponent.ets
4.79 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
import { Action, NewspaperListItemBean, NewspaperPositionItemBean, Params } from 'wdBean';
import { ExtraDTO } from 'wdBean/src/main/ets/bean/component/extra/ExtraDTO';
import { StringUtils } from 'wdKit';
import { WDRouterRule } from 'wdRouter';
@Component
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%')
.aspectRatio(378 / 566)
.objectFit(ImageFit.Fill)
Canvas(this.context)
.width('100%')
.height('100%')
.backgroundColor(Color.Transparent)
.onReady(() => {
})
}
.padding({ top: 16, right: 16, bottom: 16, left: 16 })
.margin({ left: 10, right: 10 })
.backgroundColor(Color.White)
.width('100%')
.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();
path.moveTo(px2vp(points[0][0]), px2vp(points[0][1]));
for (let point of points.slice(1, points.length)) {
path.lineTo(px2vp(point[0]), px2vp(point[1]));
}
path.closePath();
// 设定填充色为蓝色
this.context.fillStyle = '#33000000';
// 使用填充的方式，将Path2D描述的五边形绘制在canvas组件内部
this.context.fill(path);
}
}
if (event.type === TouchType.Up) {
this.context.clearRect(0, 0, this.context.width, this.context.height)
if (this.itemBeanClicked && this.itemBeanClicked.newsId) {
let taskAction: Action = {
type: 'JUMP_INNER_NEW_PAGE',
params: {
contentID: '30001758346',
pageID: 'IMAGE_TEXT_DETAIL',
extra: {
relType: '1',
relId: '500000001277',
sourcePage: '5'
} as ExtraDTO
} as Params,
};
WDRouterRule.jumpWithAction(taskAction)
this.itemBeanClicked = {} as NewspaperPositionItemBean
}
}
if (event.type === TouchType.Move) {
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)
}
}
})
}
public getArea(x: number, y: number, itemBeans: NewspaperPositionItemBean[]): number[][] {
if (itemBeans && itemBeans.length > 0) {
for (let itemBean of itemBeans) {
if (itemBean.points) {
let area: string[] = itemBean.points.split(';')
if (area && area.length > 0) {
let xys: number[][] = []
let minX: number = -1;
let maxX: number = -1;
let minY: number = -1;
let maxY: number = -1;
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])]
if (minX < 0) {
minX = xy[0]
} else {
if (minX > xy[0]) {
minX = xy[0]
}
}
if (maxX < 0) {
maxX = xy[0]
} else {
if (maxX < xy[0]) {
maxX = xy[0]
}
}
if (minY < 0) {
minY = xy[1]
} else {
if (minY > xy[1]) {
minY = xy[1]
}
}
if (maxY < 0) {
maxY = xy[1]
} else {
if (maxY < xy[1]) {
maxY = xy[1]
}
}
xys.push(xy);
}
}
if (vp2px(x) > minX && vp2px(x) < maxX && vp2px(y) > minY && vp2px(y) < maxY) {
this.itemBeanClicked = itemBean;
return xys;
}
}
}
}
}
return []
}
}