forked from altert/OpenseadragonFabricjsOverlay
-
Notifications
You must be signed in to change notification settings - Fork 11
/
Copy pathdrag_circles.html
106 lines (104 loc) · 3.69 KB
/
drag_circles.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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>osd-spot-viewer</title>
<script src="https://openseadragon.github.io/openseadragon/openseadragon.min.js"></script>
<script src="openseadragon-paperjs-overlay.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/paper.js/0.9.25/paper-full.min.js"></script>
</head>
<body>
<h2>Drag the circles with the mouse!</h2>
The circles are painted by <a href="http://paperjs.org/">Paper.js</a> on top of an
<a href="https://openseadragon.github.io/">OpenSeadragon</a> windows by use of the the plugin
<a href="https://github.com/eriksjolund/OpenSeadragonPaperjsOverlay">OpenSeadragonPaperjsOverlay</a>
<br/>
<br/>
<div id="osd" style="width: 1000px; height:800px;"></div>
<script>
var circles = [];
var paintCircles = function(jsondata, overlay) {
};
var hit_item = null;
var drag_handler = function(event) {
if (hit_item) {
var transformed_point1 = paper.view.viewToProject(new paper.Point(0,0));
var transformed_point2 = paper.view.viewToProject(new paper.Point(event.delta.x, event.delta.y));
hit_item.position = hit_item.position.add(transformed_point2.subtract(transformed_point1));
window.viewer.setMouseNavEnabled(false);
paper.view.draw();
}
};
var dragEnd_handler = function(event) {
if (hit_item) {
window.viewer.setMouseNavEnabled(true);
}
hit_item = null;
};
var press_handler = function(event) {
hit_item = null;
var transformed_point = paper.view.viewToProject(new paper.Point(event.position.x, event.position.y));
var hit_test_result = paper.project.hitTest(transformed_point);
if (hit_test_result) {
hit_item = hit_test_result.item;
}
};
window.onload = function() {
this.viewer = OpenSeadragon({
id: "osd",
prefixUrl: "https://openseadragon.github.io/openseadragon/images/",
debugMode: false,
visibilityRatio: 1.0,
constrainDuringPan: true,
showNavigator: true,
zoomPerScroll: 1.8
});
var overlay = this.viewer.paperjsOverlay();
var paint_circles = function(overlay, event) {
var circles = [
{
"pixel_x": 4000,
"pixel_y": 4000,
"radius": 400
},
{
"pixel_x": 5000,
"pixel_y": 5000,
"radius": 400
}
];
var num_circles = circles.length;
for (var i = 0; i < num_circles; i++) {
var circle = circles[i];
var circle = new paper.Path.Circle(new paper.Point(circle.pixel_x, circle.pixel_y), circle.radius);
circle.fillColor = 'red';
circle.visible = true;
circles.push(circle);
circle.onMouseDown = function (event) {
console.log("circle.onMouseDown" , "event.point.x = ", event.point.x , "event.point.y = ", event.point.y);
};
}
overlay.resize();
overlay.resizecanvas();
}.bind(null, overlay);
new OpenSeadragon.MouseTracker({
element: this.viewer.canvas,
pressHandler: press_handler,
dragHandler: drag_handler,
dragEndHandler: dragEnd_handler
}).setTracking(true);
this.viewer.addTiledImage({
tileSource: "http://openseadragon.github.io/example-images/highsmith/highsmith.dzi",
x: 0,
y: 0,
success: paint_circles
});
window.onresize = function() {
overlay.resize();
overlay.resizecanvas();
console.log("circles[0]=", circles[0]);
};
};
</script>
</body>
</html>