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