-
-
Notifications
You must be signed in to change notification settings - Fork 0
/
positionalgrid.html
78 lines (64 loc) · 2.39 KB
/
positionalgrid.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
<html>
<head>
<title>Positional Grid</title>
<style>
#div1 {
width: 300px;
height: 300px;
background: red
}
</style>
</head>
<body>
<div style="width:300px;height:100px"></div>
<div id="div1">
<canvas id="div2"></canvas>
</div>
<script>
var scale, x, y;
var markerX = 118;
var markerY = 94;
var div = document.getElementById("div1");
var canvas = document.getElementById("div2");
canvas.onmousemove = function (event) {
var inside = markerRect.top <= event.offsetY && event.offsetY <= markerRect.bottom && markerRect.left <= event.offsetX && event.offsetX <= markerRect.right;
canvas.style.cursor = inside ? "move" : "default";
//canvas.style.cursor = inside ? "pointer" : "default";
var rect = event.target.getBoundingClientRect();
markerX = (event.pageX - rect.left - x) / scale;
markerY = (event.pageY - rect.top - y) / scale;
console.log(markerX + "," + markerY);
drawPlanimetria();
};
var background = new Image();
background.onload = loadMarker;
var markerRect = {top: 0, left: 0, bottom: 0, right: 0};
var marker = new Image();
marker.onload = drawPlanimetria;
//background.src = 'Casa.PNG';
background.src = 'ninfeeNotDetailed.svg';
function loadMarker() {
//marker.src = 'upload.png';
marker.src = 'Freesample.svg';
}
function drawPlanimetria() {
canvas.width = div.offsetWidth;
canvas.height = div.offsetHeight;
var ctx = canvas.getContext('2d');
scale = Math.min(canvas.width / background.width, canvas.height / background.height);
var drawW = scale * background.width;
var drawH = scale * background.height;
x = canvas.width > drawW ? (canvas.width - drawW) / 2 : 0;
y = canvas.height > drawH ? (canvas.height - drawH) / 2 : 0;
ctx.drawImage(background, x, y, drawW, drawH);
drawW = scale * marker.width;
drawH = scale * marker.height;
var xx = x + scale * markerX - drawW / 2;
var yy = y + scale * markerY - drawH / 2;
ctx.drawImage(marker, xx, yy, drawW, drawH);
markerRect = {top: yy, left: xx, bottom: yy + drawH, right: xx + drawW};
}
new ResizeObserver(drawPlanimetria).observe(div);
</script>
</body>
</html>