init
This commit is contained in:
parent
f53164a79c
commit
3d5c0a18f0
222
src/App.tsx
222
src/App.tsx
@ -4,108 +4,186 @@ import './App.css';
|
||||
|
||||
|
||||
function App() {
|
||||
const yMax = 490;
|
||||
const yMin = 10;
|
||||
|
||||
const xMin = 10;
|
||||
const xMax = 990;
|
||||
|
||||
// let resData: number[] = [30, 160, 30, 160, 30, 160, 30, 160, 30, 160];
|
||||
let resData: number[] = [50, 16, 10, 160, 90, 160, 30, 160, 30, 160];
|
||||
let fullState = true;
|
||||
|
||||
const [canvas, setCanvas] = useState<HTMLCanvasElement | null>(null);
|
||||
|
||||
|
||||
useEffect(() => {
|
||||
|
||||
|
||||
setCanvas(refCanvas.current!);
|
||||
}, []);
|
||||
|
||||
const refCanvas = useRef<HTMLCanvasElement>(null);
|
||||
|
||||
|
||||
const ctx: CanvasRenderingContext2D = canvas?.getContext('2d')!;
|
||||
useEffect(() => {
|
||||
|
||||
useEffect(() => {
|
||||
resData = resData.map((value) => value + (yMax / 2))
|
||||
|
||||
if (ctx && canvas) {
|
||||
|
||||
ctx.clearRect(0, 0, canvas?.width, canvas?.height)
|
||||
// ctx.fillRect(1, 2, 50, 50);
|
||||
ctx.fillStyle = "black"; // Задаём чёрный цвет для линий
|
||||
ctx.lineWidth = 2.0; // Ширина линии
|
||||
|
||||
ctx.beginPath(); // Запускает путь
|
||||
ctx.moveTo(100, 10); // Указываем начальный путь
|
||||
ctx.lineTo(100, 400); // Перемешаем указатель
|
||||
ctx.lineTo(800, 400); // Ещё раз перемешаем указатель
|
||||
ctx.stroke(); // Делаем контур
|
||||
|
||||
// ctx.strokeRect(150, 200, 300, 200)
|
||||
|
||||
// Цвет для рисования
|
||||
ctx.fillStyle = "black";
|
||||
// Цикл для отображения значений по Y
|
||||
for (let i = 0; i < 6; i++) {
|
||||
ctx.fillText((5 - i) * 20 + "", 4, i * 100 + 60);
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(25, i * 80 + 60);
|
||||
ctx.lineTo(30, i * 80 + 60);
|
||||
ctx.stroke();
|
||||
}
|
||||
//
|
||||
// Массив с меткам месяцев
|
||||
let labels = ["JAN", "FEB", "MAR", "APR", "MAY", "JUN", "JUL",];
|
||||
|
||||
// // Выводим метки
|
||||
for (let i = 0; i < labels.length; i++) {
|
||||
ctx.fillText(labels[i], 50 + i * 100, 475);
|
||||
}
|
||||
|
||||
// Назначаем зелёный цвет для графика
|
||||
ctx.fillStyle = "green";
|
||||
// Цикл для от рисовки графиков
|
||||
// for (var i = 0; i < data.length; i++) {
|
||||
// var dp = data[i];
|
||||
// ctx.fillRect(40 + i * 100, 460 - dp * 5, 50, dp * 5);
|
||||
// }
|
||||
print(resData);
|
||||
printCoords();
|
||||
printDots(resData);
|
||||
printLines(resData);
|
||||
}
|
||||
|
||||
}, [canvas]);
|
||||
|
||||
const resData: number[] = [20, 30, 40, 50, 90, 10, 6, 44, 90, 10];
|
||||
|
||||
|
||||
|
||||
const print = (array: number[]) => {
|
||||
|
||||
const countArrValue = array.length;
|
||||
const gap = 800 / countArrValue;
|
||||
|
||||
ctx.fillStyle = "red"; // Задаём чёрный цвет для линий
|
||||
function printCoords() {
|
||||
ctx.fillStyle = "black"; // Задаём чёрный цвет для линий
|
||||
ctx.lineWidth = 2.0; // Ширина линии
|
||||
|
||||
ctx.beginPath(); // Запускает путь
|
||||
ctx.moveTo(xMin, yMin);
|
||||
ctx.lineTo(xMin, yMax);
|
||||
ctx.lineTo(xMax, yMax);
|
||||
ctx.stroke(); // Делаем контур
|
||||
// ctx.closePath()
|
||||
|
||||
|
||||
}
|
||||
|
||||
function printDots(array: number[]) {
|
||||
|
||||
|
||||
const countArrValue = array.length;
|
||||
const gap = 800 / countArrValue;
|
||||
let x = xMin;
|
||||
|
||||
ctx.lineWidth = 2.0; // Ширина линии
|
||||
ctx.strokeStyle = 'blue';
|
||||
|
||||
for (let i = 0; i < countArrValue; i++) {
|
||||
|
||||
for (let i = 0; i <= 0 ; i++) {
|
||||
let value = array[i];
|
||||
if (i == 0) {
|
||||
ctx.moveTo(200, 400);
|
||||
// ctx.lineTo(30, 460 - value);
|
||||
ctx.arc(200, 350 - value, 5, 0, 2 * Math.PI, false);
|
||||
ctx.fillStyle = 'black';
|
||||
ctx.fill();
|
||||
ctx.beginPath();
|
||||
|
||||
ctx.arc(x += gap, value, 5, 0, 2 * Math.PI, false);
|
||||
ctx.fill()
|
||||
ctx.stroke();
|
||||
// ctx.closePath()
|
||||
}
|
||||
}
|
||||
|
||||
function sleep(ms: number) {
|
||||
ms += new Date().getTime();
|
||||
while (new Date().getTime() < ms) {
|
||||
}
|
||||
}
|
||||
|
||||
function printLines(array: number[]) {
|
||||
|
||||
const countArrValue = array.length;
|
||||
const gap = 800 / countArrValue;
|
||||
let x = xMin + gap;
|
||||
|
||||
ctx.lineWidth = 2.0; // Ширина линии
|
||||
ctx.strokeStyle = 'black';
|
||||
|
||||
ctx.beginPath();
|
||||
for (let i = 0; i < countArrValue; i++) {
|
||||
let value = array[i];
|
||||
|
||||
if (i === 0) {
|
||||
ctx.moveTo(x, value);
|
||||
continue;
|
||||
}
|
||||
|
||||
ctx.lineTo(x += gap, value);
|
||||
}
|
||||
ctx.stroke();
|
||||
// ctx.closePath()
|
||||
}
|
||||
|
||||
function clickHandle() {
|
||||
fullState = !fullState;
|
||||
// 20
|
||||
// 30
|
||||
//
|
||||
//
|
||||
// x30-y20 = z10
|
||||
// z/2 = v5
|
||||
let requestId = window.requestAnimationFrame(animate)
|
||||
|
||||
|
||||
function animate() {
|
||||
|
||||
if (fullState) {
|
||||
window.cancelAnimationFrame(requestId);
|
||||
} else {
|
||||
// ctx.lineTo(30 + i * gap, 400 - value);
|
||||
// ctx.arc(30 + i * gap, 460 - value, 5, 0, 2 * Math.PI, false);
|
||||
for (let i = 0; i < 60; i++) {
|
||||
let resTime: number[] = [];
|
||||
let buff: number[] = [...resData];
|
||||
while (buff.length > 1) {
|
||||
let a = buff.shift()!;
|
||||
let b = buff.shift()!;
|
||||
|
||||
let delta = 0;
|
||||
if (a > b) {
|
||||
delta = a - b;
|
||||
let deltaIt = delta / 100;
|
||||
resTime.push(a - deltaIt * i);
|
||||
resTime.push(b + deltaIt * i);
|
||||
} else {
|
||||
delta = b - a;
|
||||
let deltaIt = delta / 100;
|
||||
resTime.push(a + deltaIt * i);
|
||||
resTime.push(b - deltaIt * i);
|
||||
}
|
||||
}
|
||||
window.requestAnimationFrame(async function () {
|
||||
|
||||
sleep(7);
|
||||
|
||||
setTimeout(() => {
|
||||
ctx.clearRect(20, 20, 960, 450);
|
||||
// console.log(resTime)
|
||||
printDots(resTime);
|
||||
printLines(resTime);
|
||||
}, 500)
|
||||
|
||||
|
||||
})
|
||||
}
|
||||
let res: number[] = [];
|
||||
let buff: number[] = [...resData];
|
||||
while (buff.length > 1) {
|
||||
|
||||
let a = buff.shift()!;
|
||||
let b = buff.shift()!;
|
||||
res.push((a + b) / 2)
|
||||
}
|
||||
window.requestAnimationFrame(function () {
|
||||
|
||||
sleep(10);
|
||||
setTimeout(() => {
|
||||
ctx.clearRect(20, 20, 960, 450);
|
||||
printDots(res);
|
||||
printLines(res);
|
||||
}, 500)
|
||||
|
||||
});
|
||||
|
||||
window.cancelAnimationFrame(requestId);
|
||||
}
|
||||
|
||||
// ctx.stroke();
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="App">
|
||||
<header className="App-header">
|
||||
<canvas width="1000" height="500" ref={refCanvas}/>
|
||||
</header>
|
||||
<div className="App" id={'app'}>
|
||||
<canvas id="canvas" onClick={clickHandle} width="1000" height="500" ref={refCanvas}/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default App;
|
||||
export default App
|
||||
Loading…
Reference in New Issue
Block a user