Initial commit
This commit is contained in:
commit
1acef216b6
22
index.html
Normal file
22
index.html
Normal file
|
@ -0,0 +1,22 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Graph.js</title>
|
||||
|
||||
<style>
|
||||
#canvas {
|
||||
width: 100%;
|
||||
height: calc(100vh - 100px);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h1 id="equation" contenteditable>x^2</h1>
|
||||
|
||||
<canvas width="500" height="500" id="canvas"></canvas>
|
||||
|
||||
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
|
||||
<script src="main.js"></script>
|
||||
</body>
|
||||
</html>
|
183
main.js
Normal file
183
main.js
Normal file
|
@ -0,0 +1,183 @@
|
|||
const canvas = $('#canvas');
|
||||
const ctx = canvas[0].getContext('2d');
|
||||
const equationField = document.getElementById('equation');
|
||||
|
||||
let width = 500;
|
||||
let height = 500;
|
||||
|
||||
let originX = width / 2;
|
||||
let originY = height / 2;
|
||||
let scaleFactorX = 100;
|
||||
let scaleFactorY = 100;
|
||||
|
||||
let equation = "x ** 2";
|
||||
equationField.innerText = equation;
|
||||
|
||||
function fun(x) {
|
||||
return eval(equation);
|
||||
}
|
||||
|
||||
function parseFunction(string) {
|
||||
|
||||
}
|
||||
|
||||
function drawGrid() {
|
||||
ctx.strokeStyle = '#bbb';
|
||||
ctx.lineWidth = 1;
|
||||
ctx.beginPath();
|
||||
|
||||
let sizeX = Math.max(scaleFactorX, 25);
|
||||
let sizeY = Math.max(scaleFactorY, 25);
|
||||
|
||||
const startX = originX % sizeX;
|
||||
const endX = startX + width * 1.1;
|
||||
const startY = originY % sizeY;
|
||||
const endY = startY + height * 1.1;
|
||||
|
||||
|
||||
for (let i = startX; i <= endX; i += sizeX) {
|
||||
ctx.moveTo(i, 0);
|
||||
ctx.lineTo(i, height);
|
||||
}
|
||||
for (let i = startY; i <= endY; i += sizeY) {
|
||||
ctx.moveTo(0, i);
|
||||
ctx.lineTo(width, i);
|
||||
}
|
||||
|
||||
ctx.stroke();
|
||||
ctx.closePath();
|
||||
}
|
||||
|
||||
function drawAxis() {
|
||||
ctx.strokeStyle = '#000';
|
||||
ctx.lineWidth = 2;
|
||||
ctx.beginPath();
|
||||
|
||||
ctx.moveTo(0, originY);
|
||||
ctx.lineTo(width, originY);
|
||||
ctx.moveTo(originX, 0);
|
||||
ctx.lineTo(originX, height);
|
||||
|
||||
ctx.stroke();
|
||||
ctx.closePath();
|
||||
}
|
||||
|
||||
function drawFunction(ctx) {
|
||||
ctx.strokeStyle = '#000';
|
||||
ctx.lineWidth = 4;
|
||||
ctx.beginPath();
|
||||
|
||||
const startX = -originX / scaleFactorX;
|
||||
const endX = (width - originX) / scaleFactorX;
|
||||
|
||||
for (let i = startX - 1; i < endX + 1; i += 0.01) {
|
||||
const valX = i;
|
||||
const valY = fun(i);
|
||||
|
||||
const posX = originX + valX * scaleFactorX;
|
||||
const posY = originY - valY * scaleFactorY;
|
||||
|
||||
ctx.lineTo(posX, posY);
|
||||
}
|
||||
ctx.stroke();
|
||||
ctx.closePath();
|
||||
}
|
||||
|
||||
function redraw() {
|
||||
ctx.clearRect(0, 0, width, height);
|
||||
drawGrid();
|
||||
drawAxis();
|
||||
drawFunction(ctx);
|
||||
}
|
||||
|
||||
equationField.addEventListener('keyup', function () {
|
||||
console.log(this);
|
||||
equation = this.innerText;
|
||||
|
||||
redraw();
|
||||
});
|
||||
|
||||
let mouseDown = false;
|
||||
let mouseDragging = false;
|
||||
let mouseAxisResizing = false;
|
||||
let mouseStart = null;
|
||||
|
||||
canvas.on('mousedown', function (e) {
|
||||
mouseDown = true;
|
||||
mouseStart = calcMousePos(e);
|
||||
});
|
||||
|
||||
canvas.on('mouseup mouseout', function () {
|
||||
mouseDown = false;
|
||||
mouseDragging = false;
|
||||
mouseAxisResizing = false;
|
||||
});
|
||||
|
||||
canvas.on('mousemove', function (e) {
|
||||
if (mouseDown) {
|
||||
const pos = calcMousePos(e);
|
||||
const deltaX = pos.x - mouseStart.x;
|
||||
const deltaY = pos.y - mouseStart.y;
|
||||
|
||||
if (mouseAxisResizing) {
|
||||
|
||||
} else if (mouseDragging) {
|
||||
|
||||
} else {
|
||||
|
||||
}
|
||||
|
||||
if (!mouseDragging && Math.abs(pos.x - originX) < 15 && (Math.abs(deltaY) > Math.abs(deltaX) || mouseAxisResizing)) {
|
||||
mouseAxisResizing = true;
|
||||
|
||||
if (mouseStart.y < originY)
|
||||
scaleFactorY -= deltaY;
|
||||
else
|
||||
scaleFactorY += deltaY;
|
||||
|
||||
} else if (!mouseDragging && Math.abs(pos.y - originY) < 15 && (Math.abs(deltaX) > Math.abs(deltaY) || mouseAxisResizing)) {
|
||||
mouseAxisResizing = true;
|
||||
|
||||
if (mouseStart.x < originX)
|
||||
scaleFactorX -= deltaX;
|
||||
else
|
||||
scaleFactorX += deltaX;
|
||||
|
||||
} else if (!mouseAxisResizing) {
|
||||
mouseDragging = true;
|
||||
originX += deltaX;
|
||||
originY += deltaY;
|
||||
}
|
||||
|
||||
mouseStart = pos;
|
||||
|
||||
redraw();
|
||||
}
|
||||
});
|
||||
|
||||
function calcMousePos(e) {
|
||||
const x = e.clientX - canvas.offset().left;
|
||||
const y = e.clientY - canvas.offset().top;
|
||||
return {x, y};
|
||||
}
|
||||
|
||||
function onResize() {
|
||||
const relOriginX = originX / width;
|
||||
const relOriginY = originY / height;
|
||||
|
||||
width = canvas.width();
|
||||
height = canvas.height();
|
||||
canvas[0].width = width;
|
||||
canvas[0].height = height;
|
||||
|
||||
originX = relOriginX * width;
|
||||
originY = relOriginY * height;
|
||||
|
||||
redraw();
|
||||
}
|
||||
|
||||
$(window).on('resize', onResize);
|
||||
|
||||
$(function () {
|
||||
onResize();
|
||||
});
|
Loading…
Reference in New Issue
Block a user