emilecok/quizEngine
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

fix image landscape drawing

Browse Source 
add strokeSize parameter
This commit is contained in:
Alexander Popov 2021-07-07 13:59:12 +03:00
parent 051121e5b2
commit 108064b0db
Signed by: iiiypuk
GPG Key ID: 398FC73478D97286
3 changed files with 18 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
app/config.json
View File

@ -5,6 +5,7 @@
"loaderWidth": 200, "loaderWidth": 200,
"colors": { "colors": {
"back": "#2f3542", "back": "#2f3542",
"strokeSize": 1.5,
"buttonFill": "#a4b0be", "buttonFill": "#a4b0be",
"buttonStroke": "#191C23", "buttonStroke": "#191C23",
"buttonFont": "#000000", "buttonFont": "#000000",

26
js/draw.js
View File

@ -10,29 +10,31 @@ export function clearContext(canvas, color) {
context.fillRect(0, 0, cW, cH); context.fillRect(0, 0, cW, cH);
} }
export function placeImage(canvas, area, image) { export function placeImage(canvas, area, image, colors) {
let context = canvas.getContext('2d'); let context = canvas.getContext('2d');
context.strokeStyle = colors.buttonStroke;
context.lineWidth = colors.strokeSize;
if (image.width >= image.height) { if (image.width >= image.height) {
if (image.width > area.w) { if (image.width > area.w) {
let newImageW = area.w; let newImageW = area.w;
let newImageH = image.height * (area.h / newImageW); let newImageH = image.height / (image.width / area.w);
if (newImageH > area.h) { context.drawImage(image, getCenterH(canvas.width, newImageW), area.y, newImageW, newImageH);
newImageH = area.h; context.strokeRect(getCenterH(canvas.width, newImageW), area.y, newImageW, newImageH);
// BUG: ... }
newImageW = image.width * (area.h / image.height); else {
context.drawImage(image, getCenterH(canvas.width, newImageW), area.y, newImageW, newImageH); // TODO: getCenterV({this}) <= need plus progressBar sizes
} context.drawImage(image, getCenterH(canvas.width, image.width), getCenterV(area.y + area.h, image.height), image.width, image.height);
else { context.strokeRect(getCenterH(canvas.width, image.width), getCenterV(area.y + area.h, image.height), image.width, image.height);
context.drawImage(image, area.x, getCenterV(canvas.height - area.h + area.y, newImageH), newImageW, newImageH);
}
} }
} }
else { else {
let newImageH = area.h; let newImageH = area.h;
let newImageW = image.width * (area.h / image.height); let newImageW = image.width * (area.h / image.height);
context.drawImage(image, getCenterH(canvas.width, newImageW), area.y, newImageW, newImageH); context.drawImage(image, getCenterH(canvas.width, newImageW), area.y, newImageW, newImageH);
context.strokeRect(getCenterH(canvas.width, newImageW), area.y, newImageW, newImageH);
} }
} }

6
js/index.js
View File

@ -265,7 +265,7 @@ function draw() {
// draw quest image // draw quest image
let i = new Image(); let i = new Image();
i.src = `assets/images/${gameData.questions[game.currentQuest].image}`; i.src = `assets/images/${gameData.questions[game.currentQuest].image}`;
placeImage(canvas, areas.game.questImage, i); placeImage(canvas, areas.game.questImage, i, config.colors);
// draw question label // draw question label
context.font = "32px Yanone Kaffeesatz"; context.font = "32px Yanone Kaffeesatz";
@ -276,7 +276,7 @@ function draw() {
// draw answer buttons // draw answer buttons
context.fillStyle = config.colors.buttonFill; context.fillStyle = config.colors.buttonFill;
context.strokeStyle = config.colors.buttonStroke; context.strokeStyle = config.colors.buttonStroke;
context.lineWidth = 2; context.lineWidth = config.colors.strokeSize;
let answerButtonsArray = [buttons.answerButton0, buttons.answerButton1, let answerButtonsArray = [buttons.answerButton0, buttons.answerButton1,
buttons.answerButton2, buttons.answerButton3]; buttons.answerButton2, buttons.answerButton3];
@ -298,7 +298,7 @@ function draw() {
// draw UI buttons // draw UI buttons
context.fillStyle = config.colors.buttonFill; context.fillStyle = config.colors.buttonFill;
context.strokeStyle = config.colors.buttonStroke; context.strokeStyle = config.colors.buttonStroke;
context.lineWidth = 2; context.lineWidth = config.colors.strokeSize;
for (const [key, value] of Object.entries(buttonsUi)) { for (const [key, value] of Object.entries(buttonsUi)) {
context.fillRect(value.x, value.y, value.w, value.h); context.fillRect(value.x, value.y, value.w, value.h);