49 lines
1.4 KiB
JavaScript
49 lines
1.4 KiB
JavaScript
window.balloonCanvas = {
|
|
|
|
resizeToIframe: function () {
|
|
const iframe = document.querySelector("iframe");
|
|
const canvas = document.getElementById("balloonCanvas");
|
|
if (!iframe || !canvas) return;
|
|
|
|
const rect = iframe.getBoundingClientRect();
|
|
|
|
canvas.width = rect.width;
|
|
canvas.height = rect.height;
|
|
},
|
|
|
|
clear: function () {
|
|
const canvas = document.getElementById("balloonCanvas");
|
|
if (!canvas) return;
|
|
|
|
const ctx = canvas.getContext("2d");
|
|
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
|
},
|
|
|
|
draw: function (balloons) {
|
|
const canvas = document.getElementById("balloonCanvas");
|
|
if (!canvas) return;
|
|
|
|
const ctx = canvas.getContext("2d");
|
|
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
|
|
|
balloons.forEach(b => {
|
|
const x = b.x * canvas.width;
|
|
const y = b.y * canvas.height;
|
|
|
|
ctx.beginPath();
|
|
ctx.arc(x, y, 12, 0, 2 * Math.PI);
|
|
ctx.fillStyle = b.selected ? "#ffe5e5" : "#ffffff";
|
|
ctx.strokeStyle = "#000000";
|
|
ctx.lineWidth = 2;
|
|
ctx.fill();
|
|
ctx.stroke();
|
|
|
|
ctx.fillStyle = "#000000";
|
|
ctx.font = "12px Arial";
|
|
ctx.textAlign = "center";
|
|
ctx.textBaseline = "middle";
|
|
ctx.fillText(b.number.toString(), x, y);
|
|
});
|
|
}
|
|
};
|