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

fix image landscape drawing 

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,
"colors": {
"back": "#2f3542",
"strokeSize": 1.5,
"buttonFill": "#a4b0be",
"buttonStroke": "#191C23",
"buttonFont": "#000000",

26
js/draw.js
View File

@ -10,29 +10,31 @@ export function clearContext(canvas, color) {
context.fillRect(0, 0, cW, cH);
}
export function placeImage(canvas, area, image) {
export function placeImage(canvas, area, image, colors) {
let context = canvas.getContext('2d');
context.strokeStyle = colors.buttonStroke;
context.lineWidth = colors.strokeSize;
if (image.width >= image.height) {
if (image.width > area.w) {
let newImageW = area.w;
let newImageH = image.height * (area.h / newImageW);
if (newImageH > area.h) {
newImageH = area.h;
// BUG: ...
newImageW = image.width * (area.h / image.height);
context.drawImage(image, getCenterH(canvas.width, newImageW), area.y, newImageW, newImageH);
}
else {
context.drawImage(image, area.x, getCenterV(canvas.height - area.h + area.y, newImageH), newImageW, newImageH);
}
let newImageH = image.height / (image.width / area.w);
context.drawImage(image, getCenterH(canvas.width, newImageW), area.y, newImageW, newImageH);
context.strokeRect(getCenterH(canvas.width, newImageW), area.y, newImageW, newImageH);
}
else {
// 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);
context.strokeRect(getCenterH(canvas.width, image.width), getCenterV(area.y + area.h, image.height), image.width, image.height);
}
}
else {
let newImageH = area.h;
let newImageW = image.width * (area.h / image.height);
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
let i = new 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
context.font = "32px Yanone Kaffeesatz";
@ -276,7 +276,7 @@ function draw() {
// draw answer buttons
context.fillStyle = config.colors.buttonFill;
context.strokeStyle = config.colors.buttonStroke;
context.lineWidth = 2;
context.lineWidth = config.colors.strokeSize;
let answerButtonsArray = [buttons.answerButton0, buttons.answerButton1,
buttons.answerButton2, buttons.answerButton3];
@ -298,7 +298,7 @@ function draw() {
// draw UI buttons
context.fillStyle = config.colors.buttonFill;
context.strokeStyle = config.colors.buttonStroke;
context.lineWidth = 2;
context.lineWidth = config.colors.strokeSize;
for (const [key, value] of Object.entries(buttonsUi)) {
context.fillRect(value.x, value.y, value.w, value.h);