我有这段代码,现在通过点击图表线我可以移动点击点。它可以向上、向下、向左、向右移动,这很好,但我应该能够移动之前的 20 个点和接下来的 20 个点
您也可以在这里查看https://jsbin.com/qumihizoje/1/edit?html,js,output
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
var cw = canvas.width;
var ch = canvas.height;
var mouse = {};
var draggable = false;
context.lineWidth = 2;
context.strokeStyle = "blue";
var coordinates = [];
for (let i = 0; i < 300; i++) {
coordinates.push({ x: i, y: getRandomInt(80, 85) });
}
function getRandomInt(min, max) {
min = Math.ceil(min);
max = Math.floor(max);
return Math.floor(Math.random() * (max - min)) + min;
}
canvas.addEventListener("mousedown", function(e) {
handleMouseDown(e);
});
function handleMouseDown(e) {
mouse = oMousePos(canvas, e);
for (index = 0; index < coordinates.length; index++) {
context.beginPath();
context.arc( coordinates[index].x, coordinates[index].y, 5, 0, 2 * Math.PI );
if (context.isPointInPath(mouse.x, mouse.y)) {
draggable = index + 1;
break;
}
}
}
function drawPolygon() {
context.clearRect(0, 0, cw, ch);
context.beginPath();
context.moveTo(coordinates[0].x, coordinates[0].y);
for (index = 1; index < coordinates.length; index++) {
context.lineTo(coordinates[index].x, coordinates[index].y);
}
context.stroke();
}
canvas.addEventListener("mousemove", function(e) {
if (draggable) {
mouse = oMousePos(canvas, e);
coordinates[draggable - 1].x = mouse.x;
coordinates[draggable - 1].y = mouse.y;
drawPolygon();
}
});
canvas.addEventListener("mouseup", function(e) {
if (draggable) {
draggable = false;
}
});
function oMousePos(canvas, evt) {
var ClientRect = canvas.getBoundingClientRect();
return {
x: Math.round(evt.clientX - ClientRect.left),
y: Math.round(evt.clientY - ClientRect.top)
};
}
drawPolygon();
<canvas id="canvas"></canvas>
我只移动了一点,如何解决?我需要使用纯 js。
最佳答案
这不是您要找的东西,但应该让您更接近...
我使用滚动平均值来移动前 20 个点和后 20 个点。
您可以使用其他策略来移动这些点并获得不同类型的曲线,但由于您还没有尝试过任何东西,这让您大致了解可能发生的情况。
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
var cw = canvas.width;
var ch = canvas.height;
var mouse = {};
var draggable = false;
context.lineWidth = 2;
context.strokeStyle = "blue";
canvas.addEventListener("mousemove", function(e) {
if (draggable) {
mouse = oMousePos(canvas, e);
coordinates[draggable - 1].y = mouse.y;
var max = Math.min(draggable + 20, coordinates.length)
var min = Math.max(draggable - 20, 0)
var ra = []
ra.push(mouse.y)
for (index = draggable; index < max; index++) {
if (ra.length > 20) ra.shift()
ra.push(clone[index].y)
coordinates[index].y = ra.reduce((a, b) => a + b, 0)/ra.length
}
ra = []
ra.push(mouse.y)
for (index = (draggable-2); index > min; index--) {
if (ra.length > 20) ra.shift()
ra.push(clone[index].y)
coordinates[index].y = ra.reduce((a, b) => a + b, 0)/ra.length
}
drawPolygon();
}
});
canvas.addEventListener("mousedown", function(e) {
handleMouseDown(e);
});
canvas.addEventListener("mouseup", function(e) {
if (draggable) {
draggable = false;
}
});
var coordinates = [];
for (let i = 0; i < 300; i++) {
coordinates.push({ x: i, y: getRandomInt(80, 85) });
}
var clone = coordinates.map((i) => ({ x: i.x, y: i.y }))
function getRandomInt(min, max) {
min = Math.ceil(min);
max = Math.floor(max);
return Math.floor(Math.random() * (max - min)) + min;
}
function handleMouseDown(e) {
mouse = oMousePos(canvas, e);
for (index = 0; index < coordinates.length; index++) {
context.beginPath();
context.arc( coordinates[index].x, coordinates[index].y, 5, 0, 2 * Math.PI );
if (context.isPointInPath(mouse.x, mouse.y)) {
draggable = index + 1;
break;
}
}
}
function drawPolygon() {
context.clearRect(0, 0, cw, ch);
context.beginPath();
context.moveTo(coordinates[0].x, coordinates[0].y);
for (index = 1; index < coordinates.length; index++) {
context.lineTo(coordinates[index].x, coordinates[index].y);
}
context.stroke();
}
function oMousePos(canvas, evt) {
var ClientRect = canvas.getBoundingClientRect();
return {
x: Math.round(evt.clientX - ClientRect.left),
y: Math.round(evt.clientY - ClientRect.top)
};
}
drawPolygon();
<canvas id="canvas"></canvas>
关于Javascript - 纯js中的图表,移动点,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/69477160/