102 lines
2.5 KiB
HTML
102 lines
2.5 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Document</title>
|
|
|
|
<style>
|
|
.tt {
|
|
font-family: "Consolas", "Courier New", monospace;
|
|
font-size: 20px;
|
|
}
|
|
|
|
.red {
|
|
color: red;
|
|
}
|
|
|
|
</style>
|
|
|
|
</head>
|
|
<body>
|
|
<canvas id="canvas" width="800" height="600"></canvas>
|
|
|
|
<input type="text" id="input" oninput="fnChanged()">
|
|
|
|
<pre class="tt red" id="output"></pre>
|
|
<pre class="tt" id="temp"></pre>
|
|
|
|
<script>
|
|
let drawGraph = null;
|
|
const fnInput = document.getElementById("input");
|
|
|
|
let centerX = 0;
|
|
let centerY = 0;
|
|
let zoom = 10;
|
|
|
|
const canvas = document.getElementById("canvas");
|
|
|
|
Module = {
|
|
onRuntimeInitialized: function() {
|
|
drawGraph = Module.cwrap("draw_graph", "void", ["string", "number", "number", "number", "number"]);
|
|
}
|
|
};
|
|
|
|
function fnChanged() {
|
|
redraw();
|
|
}
|
|
|
|
let lastX = 0;
|
|
let lastY = 0;
|
|
let mouseDown = false;
|
|
|
|
function moveCenter(event) {
|
|
|
|
}
|
|
|
|
canvas.addEventListener("mousedown", function(event) {
|
|
mouseDown = true;
|
|
});
|
|
|
|
canvas.addEventListener("mouseup", function(event) {
|
|
mouseDown = false;
|
|
});
|
|
|
|
canvas.addEventListener("mousemove", function(event) {
|
|
if (mouseDown) {
|
|
const dx = (event.clientX - lastX);
|
|
const dy = (event.clientY - lastY);
|
|
|
|
centerX -= dx * 2 * zoom / canvas.width;
|
|
centerY += dy * 2 * zoom / canvas.width;
|
|
redraw();
|
|
}
|
|
|
|
lastX = event.clientX;
|
|
lastY = event.clientY;
|
|
});
|
|
|
|
canvas.addEventListener("wheel", function(event) {
|
|
event.preventDefault();
|
|
const delta = event.deltaY;
|
|
zoom *= Math.pow(1.1, delta * 0.01);
|
|
redraw();
|
|
});
|
|
|
|
function redraw() {
|
|
if (drawGraph) {
|
|
const fn = fnInput.value;
|
|
const xMin = -zoom + centerX;
|
|
const xMax = zoom + centerX;
|
|
const aspect = canvas.width / canvas.height;
|
|
const yMin = -zoom / aspect + centerY;
|
|
const yMax = zoom / aspect + centerY;
|
|
|
|
drawGraph(fn, xMin, xMax, yMin, yMax);
|
|
}
|
|
}
|
|
</script>
|
|
|
|
{{{ SCRIPT }}}
|
|
</body>
|
|
</html> |