Dynamic Dot Layout Mapping in Vue.js and Canvas: A Problematic Coordinate Issue

Question

Dynamic Dot Layout Mapping in Vue.js and Canvas: A Problematic Coordinate Issue

My current project involves using Vue and HTML canvas to create a responsive "link game". You can view a sample of my work in the image below:

However, I've encountered a strange issue. I'm trying to determine if a line drawn between two dots is considered "legitimate". Here's an illustration of what constitutes a "legitimate" connection:

In order to achieve this goal, I've been utilizing a variable to store information about each dot's location:

this.Dotlocation[[RowID,ColID,GroupID],[x_location,y_location]]

Unfortunately, no matter what I do, the information doesn't seem to be accurate. Here's the output I'm getting:

[ 
 // id,col,group
 [ [ 3, 2, 4 ], [ 631.4, 417.43 ] ], 
 [ [ 3, 1, 3 ], [ 495, 417.43 ] ], 
 ...
 ]

There are a couple of questions that arise from this data:

I don't understand why the IDs are out of order.
The grouping and columns appear to be incorrect; it appears to be related to the final column.

You can find the lengthy code that I've been working with below for reference:

DrawImgOnCanvas(question,context1){
    // Code block here
},

Here is the input data being used:

question:[  
['assets/GamePic/Cat.png','assets/GamePic/Cat.png','assets/GamePic/Cat.png'],
['assets/GamePic/Cat.png','assets/GamePic/Cat.png','assets/GamePic/Cat.png','assets/GamePic/Cat.png','assets/GamePic/Cat.png'],  
['assets/GamePic/Cat.png','assets/GamePic/Cat.png']
],
    
Thank you for taking the time to read through this. I look forward to your response.

[1]: https://i.sstatic.net/MmxjB.png
[2]: https://i.sstatic.net/MoZX6.png

javascript vue.js

Answer 1

Answer №1

The sequencing of the order is not as expected due to the asynchronous nature of loading images. This means that there is no guarantee that all the code within the onload function will execute in the anticipated order.

Furthermore, since the values for col and group may change before the onload event is triggered, it explains why these values are not what was initially expected.

To ensure that the code behaves as intended, the implementation of async/await is necessary. Only a couple of modifications are required, which are denoted by:

// ==========================

It's worth noting that the onload block is now aligned differently, but this does not constitute a change in the code structure.

// ==========================
// make the function "async"
async DrawImgOnCanvas(question, context1) {
    let Column_Amount = question.length;
    var onchangegroup = false;
    let Column_ID = 1;
    this.Group = 1;
    for (let col = 0; col < question.length; col++) {
        const Max_Img_Size = this.CountMaxImgSize(this.QuestionDataStructure[col].length);
        let RWD_Colum_Gap = this.CountRWDYGap(question[col]);
        for (let Dot_Row_ID = 0; Dot_Row_ID < question[col].length; Dot_Row_ID++) {
            let Img = new Image();
            let Image_Url = icon;
            Img.src = Image_Url;
            let Img_Size = this.ResizeRWDImg(Max_Img_Size, Img);
            let x = this.Min_border + Max_Img_Size.Max_Width * col + this.RWD_Gap_Width * col;
            let y = this.Min_border + RWD_Colum_Gap + Max_Img_Size.Max_Height * Dot_Row_ID;

            // ========================================
            // This section waits until the image has finished loading
            //
            await new Promise((resolve) => (Img.onload = resolve));
            context1.drawImage(Img, x, y, Img_Size.New_Width, Img_Size.New_Height);
            context1.beginPath();
            if (col == 0) {
                context1.arc(x + Img_Size.New_Width + this.Min_border, y + Img_Size.New_Height / 2, this.DotRadius, 0, Math.PI * 2, true);
                this.DotLocation.push([[Dot_Row_ID, Column_ID, this.Group], [x + Img_Size.New_Width + this.Min_border,y + Img_Size.New_Height / 2]]);
                context1.fillStyle = "black";
                context1.fill();
            } else if (col == Column_Amount - 1) {
                context1.arc(x - this.Min_border, y + Img_Size.New_Height / 2, this.DotRadius, 0, Math.PI * 2, true);
                this.DotLocation.push([[Dot_Row_ID, Column_ID, this.Group], [x - this.Min_border, y + Img_Size.New_Height / 2]]);
                context1.fillStyle = "black";
                context1.fill();
            } else {
                //Right
                context1.arc(x + Img_Size.New_Width + this.Min_border, y + Img_Size.New_Height / 2, this.DotRadius, 0, Math.PI * 2, true);
                this.DotLocation.push([[Dot_Row_ID, Column_ID + 1, this.Group + 1], [x + Img_Size.New_Width + this.Min_border,y + Img_Size.New_Height / 2]]);
                //Left
                context1.arc(x - this.Min_border, y + Img_Size.New_Height / 2, this.DotRadius, 0, Math.PI * 2, true);
                this.DotLocation.push([[Dot_Row_ID, Column_ID, this.Group], [x - this.Min_border, y + Img_Size.New_Height / 2]]);
                context1.fillStyle = "black";
                context1.fill();
            }
            context1.closePath();
        }
        if (col != 0) {
            this.Group++;
            Column_ID += 2;
        }
    }
},

Answer 2

The sequencing of the order is not as expected due to the asynchronous nature of loading images. This means that there is no guarantee that all the code within the onload function will execute in the anticipated order.

Furthermore, since the values for col and group may change before the onload event is triggered, it explains why these values are not what was initially expected.

To ensure that the code behaves as intended, the implementation of async/await is necessary. Only a couple of modifications are required, which are denoted by:

// ==========================

It's worth noting that the onload block is now aligned differently, but this does not constitute a change in the code structure.

// ==========================
// make the function "async"
async DrawImgOnCanvas(question, context1) {
    let Column_Amount = question.length;
    var onchangegroup = false;
    let Column_ID = 1;
    this.Group = 1;
    for (let col = 0; col < question.length; col++) {
        const Max_Img_Size = this.CountMaxImgSize(this.QuestionDataStructure[col].length);
        let RWD_Colum_Gap = this.CountRWDYGap(question[col]);
        for (let Dot_Row_ID = 0; Dot_Row_ID < question[col].length; Dot_Row_ID++) {
            let Img = new Image();
            let Image_Url = icon;
            Img.src = Image_Url;
            let Img_Size = this.ResizeRWDImg(Max_Img_Size, Img);
            let x = this.Min_border + Max_Img_Size.Max_Width * col + this.RWD_Gap_Width * col;
            let y = this.Min_border + RWD_Colum_Gap + Max_Img_Size.Max_Height * Dot_Row_ID;

            // ========================================
            // This section waits until the image has finished loading
            //
            await new Promise((resolve) => (Img.onload = resolve));
            context1.drawImage(Img, x, y, Img_Size.New_Width, Img_Size.New_Height);
            context1.beginPath();
            if (col == 0) {
                context1.arc(x + Img_Size.New_Width + this.Min_border, y + Img_Size.New_Height / 2, this.DotRadius, 0, Math.PI * 2, true);
                this.DotLocation.push([[Dot_Row_ID, Column_ID, this.Group], [x + Img_Size.New_Width + this.Min_border,y + Img_Size.New_Height / 2]]);
                context1.fillStyle = "black";
                context1.fill();
            } else if (col == Column_Amount - 1) {
                context1.arc(x - this.Min_border, y + Img_Size.New_Height / 2, this.DotRadius, 0, Math.PI * 2, true);
                this.DotLocation.push([[Dot_Row_ID, Column_ID, this.Group], [x - this.Min_border, y + Img_Size.New_Height / 2]]);
                context1.fillStyle = "black";
                context1.fill();
            } else {
                //Right
                context1.arc(x + Img_Size.New_Width + this.Min_border, y + Img_Size.New_Height / 2, this.DotRadius, 0, Math.PI * 2, true);
                this.DotLocation.push([[Dot_Row_ID, Column_ID + 1, this.Group + 1], [x + Img_Size.New_Width + this.Min_border,y + Img_Size.New_Height / 2]]);
                //Left
                context1.arc(x - this.Min_border, y + Img_Size.New_Height / 2, this.DotRadius, 0, Math.PI * 2, true);
                this.DotLocation.push([[Dot_Row_ID, Column_ID, this.Group], [x - this.Min_border, y + Img_Size.New_Height / 2]]);
                context1.fillStyle = "black";
                context1.fill();
            }
            context1.closePath();
        }
        if (col != 0) {
            this.Group++;
            Column_ID += 2;
        }
    }
},

Dynamic Dot Layout Mapping in Vue.js and Canvas: A Problematic Coordinate Issue

Answer №1

Similar questions

The issue I'm facing is that the ng-click functionality in Angular JS is not functioning properly when the

Combine Immer and NgRx reducer for improved state management

Script for running a React app with Prettier and eslint in a looping fashion

How can I attach the input value that has been selected to another div using Ajax AutoComplete for jQuery?

Generate tables and rows dynamically

The YDN-DB plugin for full text search is currently blocking certain queries

I attempted to utilize the prop to transfer an object, but unfortunately, the value was not received

Encountering issues with reading the length property error within the jsonstore function in the MobileFirst

What is the best way to connect an HTML image to effortlessly switch between displaying and hiding an element (specifically, a table) using JavaScript?

How to access a particular tab in Bootstrap 5 using an external link

Enhance the annotation of JS types for arguments with default values

HTTPInterceptor failing to capture incoming HTTP requests from external widget in Angular

What is the reason behind the for of loop breaking within an async function instead of properly awaiting the execution?

What is the best way to retrieve JavaScript Values through Selenium?

Script for Ajax not working properly

Retrieving and securely storing information using fetch() on authenticated REST services

Tips for interacting with a modal using Bootstrap Vue

The RxJS scan operator has the ability to retrieve only the most recently pushed partial data

Issue with React Google Maps persists with StandaloneSearchBox in code causing it to be stuck on "Loading" status

Passing the title of a page as data to a component in Next.js