ENewspaperItemComponent.ets
3.51 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
import { NewspaperListItemBean, NewspaperPositionItemBean } from 'wdBean';
import { StringUtils } from 'wdKit';
@Component
export struct ENewspaperItemComponent {
private newspaperListItemBean: NewspaperListItemBean = {} as NewspaperListItemBean
private settings: RenderingContextSettings = new RenderingContextSettings(true);
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
build() {
Stack() {
Image(this.newspaperListItemBean.pagePic)
.width('100%')
.height('100%')
.objectFit(ImageFit.Contain)
Canvas(this.context)
.width('100%')
.height('100%')
.backgroundColor(Color.Transparent)
.onReady(() => {
})
}
.width('100%')
.aspectRatio(0.7)
.onTouch((event: TouchEvent) => {
if (event.type === TouchType.Down) {
let x = event.touches[0].x;
let y = event.touches[0].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 (event.type === TouchType.Move) {
// 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) {
return xys;
}
}
}
}
}
return []
}
}