0
177
VistasJavascript - Gráfico, puntos móviles en js puro
Tengo este código, ahora al hacer clic en la línea del gráfico puedo mover el punto en el que hice clic. Se puede mover hacia arriba, abajo, izquierda, derecha y esto es bueno, pero debería poder mover los 20 puntos anteriores y los siguientes 20 puntos para hacerlo.
algo como esto:
pero se parece a esto:
También puede consultar aquí 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>Estoy moviendo solo un punto, ¿cómo solucionarlo? Necesito usar js puro.
·
Juan Pablo Isaza
1 Respuestas
Responde la pregunta0
Esto no es exactamente lo que está buscando, pero debería acercarlo más...
Estoy usando un promedio móvil para mover los 20 puntos anteriores y los siguientes 20 puntos.
Puede usar otras estrategias para mover esos puntos y obtener diferentes tipos de curvas, pero como no ha probado nada, esto le da una idea general de lo que es posible.
El resultado debe verse como:
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: ix, y: iy })) 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>
·
Juan Pablo Isaza
Denunciar
Responde la pregunta