-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
112 lines (104 loc) · 2.62 KB
/
index.html
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>canvas图片实现拖拽缩放功能</title>
<style>
body,
div {
margin: 0;
padding: 0;
}
html,
body {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div style="width: 100%;height: 100%;">
<div style="width: 100%;height: 80px;background-color: antiquewhite;font-size: 24px;font-weight: 600;">
canvasPlot批注绘制-鼠标绘制矩形，拖动，按住右键画布整体拖动，滚轮整体缩放
</div>
<div style="width: 100%;height: calc(100% - 40px);display: flex;">
<div style="width:300px;height:100%;background-color: #cccccc;font-size: 24px;font-weight: 600;">
未来会增加文字，直线，云线，箭头，圆形等等功能
</div>
<div style="width:calc(100% - 300px);height:100%;">
<div style="width:100%;height:100px;background-color:wheat;">
</div>
<div id="container" style="height:calc(100% - 100px);width:100%;position: relative;">
</div>
</div>
</div>
</div>
<script src="canvasPlot.js"></script>
<script>
console.log(document.querySelector("#container").offsetTop, document.querySelector("#container").offsetLeft)
//lightskyblue
var canvasPlot = new CanvasPlot({
parentNode: document.querySelector("#container"),
imagePath: '3.jpg',
deleteBtnText: "删除",
showMenu: true,
rectBgColor: "rgba(255, 255, 255, 0.6)",
dragMoveButton: "middleClick" //rightClick middleClick
});
canvasPlot.setData({
"offset": {
"scale": 2,
"x": 415.9,
"y": 220.1
},
"data": [
{
"params": ["111", "2222"],
"x": 212,
"y": 119,
"w": 50,
"h": 50,
"fill": "rgba(255, 255, 255, 0)",
"strokeColor": "#0d0efd",
"lineWidth": 1,
"selected": false,
"delselected": false,
"sideLength": 10,
"rectColor": "#00ff00",
"fillColor": "#ffffff",
"disabled": false,
"dragging": false,
"resizing": false,
"index": 0,
"type": "rect",
"uuid": "98849a3e-14c8-5ea0-9847-c829f30a64fa"
},
{
"x": 338,
"y": 135.5,
"w": 60,
"h": 30,
"fill": "rgba(255, 255, 255, 0)",
"strokeColor": "#0d0efd",
"lineWidth": 1,
"selected": true,
"delselected": false,
"sideLength": 10,
"rectColor": "#00ff00",
"fillColor": "#ffffff",
"disabled": false,
"dragging": false,
"resizing": false,
"index": 1,
"type": "rect",
"uuid": "49beb8ac-8825-d01b-a541-cb4050c0bd66"
}
]
})
canvasPlot.drawRectBegin();
canvasPlot.on("select", (selection) => {
console.log("select", selection)
})
</script>
</body>
</html>