Szerokość płótna zmienia się w zależności od procentu ukończenia

Question

Mam system XP i mam procent tego, jak daleko ktoś jest do awansowania, i stworzyłem prostokąt. ale nie wiem, jak zmienić szerokość w zależności od procentu ... łatwo mam procent, ale potrzebuję sposobu, aby zakodować ten procent 0 = punkt początkowy 259, a 100 procent to 630

    const rectX = 259;
    const rectY = 182;
    const rectWidth = 630;
    const rectHeight = 38;
    const cornerRadius = 20;

    ctx.lineJoin = 'round';
    ctx.lineWidth = cornerRadius;
    ctx.strokeStyle = '#FF1700';
    ctx.fillStyle = '#FF1700';

    ctx.strokeRect(rectX + (cornerRadius / 2), rectY + (cornerRadius / 2), rectWidth - cornerRadius, rectHeight - cornerRadius);
    ctx.fillRect(rectX + (cornerRadius / 2), rectY + (cornerRadius / 2), rectWidth - cornerRadius, rectHeight - cornerRadius);

node.js canvas discord.js

0

VenomTR 12 marzec 2020, 05:35

Answer 1

Wystarczy pomnożyć szerokość prostokąta przez percentage / 100. Oto, jak by to wyglądało w przypadku Twojego przykładowego kodu.

const rectX = 259;
const rectY = 182;
const rectWidth = 630;
const rectHeight = 38;
const cornerRadius = 20;

const scale = Math.min(1, Math.max(0, percentage / 100));

ctx.lineJoin = 'round';
ctx.lineWidth = cornerRadius;
ctx.strokeStyle = '#FF1700';
ctx.fillStyle = '#FF1700';

ctx.strokeRect(rectX + (cornerRadius / 2), rectY + (cornerRadius / 2), rectWidth - cornerRadius, rectHeight - cornerRadius);
ctx.fillRect(rectX + (cornerRadius / 2), rectY + (cornerRadius / 2), rectWidth * scale - cornerRadius , rectHeight - cornerRadius);

Gdy wartość procentowa wynosi 100%, skala wyniesie 1, a szerokość prostokąta da w wyniku 630. Gdy wartość procentowa wynosi 50%, skala wyniesie 0.5, a szerokość 315 i tak dalej.

0

Barış Uşaklı 12 marzec 2020, 03:12

Answer 2

Więc z tego, co rozumiem, masz dwie liczby, zaczynające się na 259 i kończące na 630, a 50% oznaczałoby punkt środkowy między tymi dwoma liczbami, 100% oznaczałoby 630, a 0% oznaczałoby 259, czy to prawda?

Jeśli tak jest, potrzebujesz czegoś, co nazywa się LERP (interpolacja liniowa),

const lerp = (start: number, end: number, percentage: number): number => {
    return (((end - start) * percentage) / 100) + start;
};

LUB jeśli chcesz javascript, po prostu usuń definicje typów,

Sposób, w jaki to działa, polega na normalizacji twojego startu do 0,

Teraz korzystanie z tego jest dość proste: console.log(lerp(259, 630, 50))

Która zwraca: 444.5

0

user1267177user1267177 12 marzec 2020, 03:14

Szerokość płótna zmienia się w zależności od procentu ukończenia

2 odpowiedzi

Podobne pytania

Nowe pytania

node.js