184 lines
3.9 KiB
JavaScript
184 lines
3.9 KiB
JavaScript
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();
|
|
});
|