Jak poradzić sobie z odwróconym układem współrzędnym w Canvas

Question

Witam,

Mam problem z którym nie umiem sobie poradzić. 

Mój problem polega na tym, że na podstawie danych widocznych poniżej mam narysować linie łączące te punkty. Oś X i Y jak wiadomo jest w lewym górnym rogu zamiast w dolnym co uniemożliwia mi podstawienie po prostu danych bo linia wyjdzie na odwrót :/

Czy ma ktoś na to jakiś pomysł albo jakiś super wzór.

Z góry dziękuję za wszelką pomoc

const Canvas = () => {

    const canvasRef = useRef(null)

    const draw = (ctx, w, h, a, b) => {

        ctx.lineTo(a, b)
    }
    
    useEffect(() => {
      
        const canvas = canvasRef.current
        const context = canvas.getContext('2d')

        const w = canvas.width
        const h = canvas.height

        const path = {x: (w/2)+2, y: (h/2)+9}

        for (var y = 0.5; y < h; y += 10) {
            context.moveTo(0, y);
            context.lineTo(w, y);
        }

        for (var x = 0.5; x < w; x += 10) {
            context.moveTo(x, 0);
            context.lineTo(x, h);
          }


        context.stroke()
      context.closePath()
    }, [draw])
    
    return <canvas ref={canvasRef} width={500} height={375} />
}
 
export default Canvas;

 

Comments

To powinno wystarczyć https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/scale https://developer.mozilla.org/en-US/docs/Web/API/Element/clientWidth ////// lub jeszcze https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/transform https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/transform Ale o szczegłóy nie pytaj bo nie mam kompa tylko internet i nie gdzie odpalić js

Answer 1

Ustal sobie jakiś punkt od którego będziesz zaczynał rysowanie (może to być prawy dolny róg jeśli Ci na nim zależy). Następnie do tego punktu dodawaj wartości punktów które chcesz narysować. Warto też dodać skale aby zwiększyć nieco rozmiar w razie potrzeby. 

const START_POINT = [200,200]; // możesz użyć szerokości canvas i innych rzeczy do obliczenia
const SCALE = 10;

a potem tylko lista punktów i jedziesz ;) 

const points = [
[2,9],
[1,12]
];

points.forEach([x,y] => {
     y = y * -1; // odwracanie osi y jeśli potrzebujesz
     // x = x * -1; // odwracanie osi x jeśli potrzebujesz
     context.lineTo(x * SCALE + START_POINT[0], y * SCALE + START_POINT[1]);
})

 

Comments

Dziękuję bardzo za pomoc :D