Я использую тепловую карту. js в Google Apps Script и пытаюсь изменить размер холста тепловой карты (где я могу на самом деле наносить точки), чтобы соответствовать изображению. Как я могу изменить javascript или стиль, чтобы сделать эту работу?
КОД: https://jsfiddle.net/nateomardavis/51h2guL9/
-
wrapper имеет черную рамку. - Тепловая карта
div имеет синюю рамку. canvas имеет красную рамку.
Как это должно работать: Я должен пометить тепловую карту в любом месте на изображении. Оболочка, div карты тепла и холст должны иметь размер в зависимости от размера изображения.
Как это работает в настоящее время: Я могу отметить только карту тепла внутри сине-черной границы. Моя javascript изменяет размер холста, чтобы соответствовать изображению, но не границам тепловой карты.
То, что я пробовал: Вы можете увидеть в скрипте, как я пытался изменить то, что javascript изменяет размер (строки 88-90). Я также подумал об использовании использование изображения в качестве background-image для heatmap div, но размер был неправильный, и я хотел иметь возможность сохранить тепловую карту и изображение как один слой (для печати / сохранения). Я также попытался изменить размер изображения (строка 101), но все, что выше 55%, обрезало изображение.
Скриншот ниже приведен только для справки, но полный рабочий код находится на скрипке. У меня все это под HTML, потому что так работает в скрипте Google Apps.
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<script type="text/javascript" src="https://www.patrick-wied.at/static/heatmapjs/assets/js/heatmap.min.js"></script>
<style>
html, body {
width: 100%;
height: 100%;
}
html {
color: #333;
font-family: sans-serif;
font-size: 16pt;
font-weight: 100;
line-height: 1.5em;
}
.wrapper {
width: 100%;
height:100%;
background:rgba(0,0,0,.03);
border:3px solid black;
}
.heatmap {
width:100%;
height:100%;
background-position: top;
background-repeat: no-repeat;
background-size: contain;
position: relative;
border:3px solid blue;
}
.canvas {
border:3px solid red;
}
</style>
</head>
<body>
<button class="clear">Clear</button>
<button onclick="printPage()" class="print-btn no-print" style="">Print</button>
<p id="coords"></p>
<div id="wrapper" class="wrapper"> <!-- black box on web app-->
<div id="heatmap" class = "heatmap" style="position: relative;"> <!-- blue box on web app-->
<canvas id="canvas" class="canvas"></canvas> <!-- red box on web app-->
</div>
</div>
<script>
//CREATE HEATMAP
window.onload = function() {
var heatmapInstance = h337.create({
container: document.querySelector('.heatmap'),
gradient: {
'.25': 'black',
'.5': 'red',
'.75': 'white'
},
radius: 20
});
document.querySelector('.wrapper').onclick = function(ev) {
heatmapInstance.addData({
x: ev.layerX,
y: ev.layerY,
value: 1
});
};
document.querySelector('.clear').onclick = function() {
//heatmapInstance._renderer._clear();
heatmapInstance.setData({data:[]});
};
//RESIVE CANVAS TO FIT IMAGE
//http://jsfiddle.net/6ZsCz/1135/
var canvas = document.getElementById('canvas'); //v1
//var canvas = document.getElementById('heatmap'); //v2
//var canvas = document.getElementById('wrapper'); //v3
var ctx = canvas.getContext('2d');
ctx.canvas.width = window.innerWidth;
ctx.canvas.height = window.innerHeight;
var imageObj = new Image();
imageObj.onload = function() {
canvas.width = imageObj.width; // version 2
canvas.height = imageObj.height; // version 2
ctx.drawImage(imageObj,0,0); // version 2
//ctx.drawImage(imageObj, 0, 0, imageObj.width * 0.5, imageObj.height * 0.5); //version 1
};
imageObj.src = 'https://upload.wikimedia.org/wikipedia/commons/thumb/8/82/Soccer_Field_Transparant.svg/1200px-Soccer_Field_Transparant.svg.png';
};
//MOUSE COORDINATES
//works inside heatmap
function getCursorPosition(canvas, event) {
const rect = canvas.getBoundingClientRect()
const x = event.clientX - rect.left
const y = event.clientY - rect.top
var coor = "X coords: " + x + ", Y coords: " + y;
document.getElementById("coords").innerHTML = coor;
}
const canvas = document.querySelector('.heatmap')
canvas.addEventListener('mousedown', function(e) {
getCursorPosition(canvas, e)
})
function printPage() {
window.print();
}
</script>
</body>
</html>