Vue.js 和 HTML5 画布中的动态圆点布局坐标映射疑难解答

javascript

2024-03-05 03:44:42

Vue.js 和 HTML5 画布：动态圆点布局中的坐标映射疑难解答

概述

使用 Vue.js 和 HTML5 画布绘制具有动态圆点布局的应用程序时，可能会遇到坐标映射问题。本文深入探讨此问题，提供解决方法并分享相关见解，旨在帮助您克服此挑战。

问题：坐标映射不准确

根源：

无序的圆点 ID
错误的分组和列号信息

解决方法：

对圆点 ID 进行排序以确保正确记录顺序。
根据圆点在画布上的实际位置更新分组和列号信息。

代码示例：

for (let col = 0; col < question.length; col++) { //Column
    let Column_ID = 1
    this.Group = 1       
    for (let Dot_Row_ID = 0; Dot_Row_ID < question[col].length; Dot_Row_ID++) { //Row
        if (col == 0) {
            // add on right
            this.DotLocation.push([[(Dot_Row_ID,Column_ID,this.Group],[x+Img_Size.New_Width+this.Min_border, y+Img_Size.New_Height/2]].sort());
        }
        else if (col == Column_Amount-1) {
            // add on left
            this.DotLocation.push([[Dot_Row_ID,Column_ID,this.Group],[x-this.Min_border, y+Img_Size.New_Height/2]].sort());
        }
        else{
            //Right
            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]].sort());
            //Left
            this.DotLocation.push([[Dot_Row_ID,Column_ID,this.Group],[x-this.Min_border, y+Img_Size.New_Height/2]].sort());
        }
    }
    if (col != 0) {
        this.Group++;
        Column_ID +2 ;
    }
}