Estoy tratando de hacer algo usando el lienzo html, pero tengo que pasar el contexto a cada función una y otra vez. ¿Hay alguna manera de omitir o automatizar esta tarea de alguna manera?
Por ejemplo, en p5.js solo tenemos funciones de configuración y dibujo y ningún contexto adicional, etc. Quiero hacer lo mismo pero a pequeña escala.
function render() { console.log(data) // i have to pass context again and again to each function drawPoint(context, new Vector(mousex, mousey), 6) drawPoint(context, new Vector(100, 100), 5, "red") drawPoint(context, new Vector(100, 100), 5, "red") drawPoint(context, new Vector(100, 100), 5, "red") drawPoint(context, new Vector(100, 100), 5, "red") requestAnimationFrame(render) } render()quiero que sea como
function start(){ // some global variables that may be accessed in // the render function directly } function render(){ // some code without passing any context drawpoint(new Vector(100, 100)) }En palabras simples, solo quiero imitar el mismo efecto que el procesamiento p5.js, o arduino ide, etc. solo dos funciones, una para configuración y otra para bucle
¿Alguien tiene alguna idea de cómo hacerlo?
hacer su propia función?
function myDrawPoint () { drawPoint.apply(null, [context, ...Object.values(arguments)]); }Podría usar una función de orden superior para dar básicamente el contexto una vez, luego simplemente llame a esa función repetidamente.
class Vector { constructor(x, y) { this.x = x; this.y = y; } } function createDrawPoint(context) { return (vector) => { console.log('drawPoint called with context', vector); // do something with context here }; } const canvas = document.createElement('canvas'); const context = canvas.getContext('2d'); const drawPoint = createDrawPoint(context); drawPoint(new Vector(100, 100)); drawPoint(new Vector(100, 150)); drawPoint(new Vector(150, 100)); Básicamente, crea una función que devolverá la función drawPoint() real, pero con el context vinculado dentro de su alcance, por lo que no tiene que pasarla repetidamente.
También podría hacer lo mismo con múltiples métodos, si quisiera, como este.
class Vector { constructor(x, y) { this.x = x; this.y = y; } } function createDrawPoint(context) { return { drawPoint: (vector) => { console.log('drawPoint called with context', vector); // do something with context here }, drawLine: (vectorA, vectorB) => { console.log('drawLine called with context', vector); } }; } const canvas = document.createElement('canvas'); const context = canvas.getContext('2d'); const { drawPoint, drawLine } = createDrawPoint(context); drawPoint(new Vector(100, 100)); drawPoint(new Vector(100, 150)); drawPoint(new Vector(150, 100)); drawLine(new Vector(200, 200), new Vector(300, 300));Aunque si tiene varios, probablemente los agruparía en una clase (o simplemente en un constructor de objetos protoypal si no le gusta la sintaxis de la clase por alguna razón), a menos que este programa literalmente solo use estas funciones.
class DrawHelper { constructor(context) { this.context = context; } drawPoint(vector) { console.log('drawPoint'); } drawLine(a, b) { console.log('drawLine'); } } class Vector {} const canvas = document.createElement('canvas'); const context = canvas.getContext('2d'); const drawHelper = new DrawHelper(context); drawHelper.drawPoint(new Vector(100, 100)); drawHelper.drawPoint(new Vector(100, 200)); drawHelper.drawLine(new Vector(300, 300), new Vector(400, 400));