Jak přeskočit předávání kontextu znovu a znovu pro html canvas, zatímco kódování

Question 1

Snažím se, aby něco pomocí html plátno, ale musím projít kontextu ke každé funkci znovu a znovu. Existuje způsob, jak přeskočit nebo automatizovat tento úkol nějak?

Například v p5.js máme jen nastavení a kreslit funkce a žádné další souvislosti atd.. Chci udělat totéž, ale v malém měřítku

 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()

Chci, aby to bylo jako


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))

}

V jednoduchých slov chci jen napodobují stejný účinek jako p5.js zpracování, nebo arduino ide, atd.. jen dvě funkce, jeden pro instalaci a jeden pro smyčce

Nemá někdo nějaký nápad, jak to udělat?

Question 2

Můžete použít vyššího řádu funkce v podstatě dát kontextu jednou, pak jen zavolat, že funkce opakovaně.

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));

V podstatě, můžete vytvořit funkci, která vrátí aktuální drawPoint() funkce, ale s context povinni v rámci své působnosti, takže se nemusíte projít to opakovaně.

Můžete udělat totéž s několika metodami, jak dobře, pokud byste chtěli, jako je tento.

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));

I když, pokud máte více bych asi skupina je do třídy (nebo jen protoypal objekt, konstruktor, pokud se vám nelíbí třídu syntaxe z nějakého důvodu), pokud tento program doslova pouze použití těchto funkcí.

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));

Question 3

vytvořit svůj vlastní funkce?

function myDrawPoint  () {
    drawPoint.apply(null, [context, ...Object.values(arguments)]);
}

samanime · Answer 1 · 2021-11-22T16:07:05

Můžete použít vyššího řádu funkce v podstatě dát kontextu jednou, pak jen zavolat, že funkce opakovaně.

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));

V podstatě, můžete vytvořit funkci, která vrátí aktuální drawPoint() funkce, ale s context povinni v rámci své působnosti, takže se nemusíte projít to opakovaně.

Můžete udělat totéž s několika metodami, jak dobře, pokud byste chtěli, jako je tento.

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));

I když, pokud máte více bych asi skupina je do třídy (nebo jen protoypal objekt, konstruktor, pokud se vám nelíbí třídu syntaxe z nějakého důvodu), pokud tento program doslova pouze použití těchto funkcí.

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));

Okey.. i když to je dost. Chci vědět, že pokud existuje způsob, jak pokud bych zvládnout všechny tyto úkoly, které jste říkala v back-end a ukázat uživateli pouze setup(){} a draw(){} funkce jako v p5.js.. jak je znázorněno zde : klikněte zde https://editor.p5js.org/ , prosím, řekněte mi, pokud máte, bude To ušetří můj čas hodně.
Aktualizoval jsem můj fragment kódu dělat více metod. Pokud si chcete nechat udělat v setup()jen deklarovat funkce proměnných (drawPoint(), etc.) v globálním měřítku, pak je přiřadit v setup(), pak je v render().

fxtrot · Answer 2 · 2021-11-22T15:29:02

vytvořit svůj vlastní funkce?

function myDrawPoint  () {
    drawPoint.apply(null, [context, ...Object.values(arguments)]);
}

Můžete mi to vysvětlit trochu více.. 1 kód segmentu není pro mě dost..
použití nové funkce myDrawPoint místo drawPoint. to je v podstatě stará funkce, bez kontextu

Jak přeskočit předávání kontextu znovu a znovu pro html canvas, zatímco kódování

Otázka

Nejlepší odpověď

V jiných jazycích

Tato stránka je v jiných jazycích

Populární v této kategorii

Oblíbené položky v této kategorii