我需要在我的页面中对一些圆进行动画处理,为了做到这一点,我正在尝试将该圆存储在矩阵中。
var elementWidth = parseInt($('#svg').width()); //Take container element's width
var circleRadius = parseInt(elementWidth/10); //Calculate radius and the distance from a circle to another
var circleMatrix = [[]]; //The 2d matrix
var s = Snap("#svg"); //Initialize Snap (it's a svg framework)
var x,y=0; //My index
for(var i=0; i<=elementWidth; i+=circleRadius){
x=0;
for(var m=0; m<=elementWidth; m+=circleRadius){
console.log("y("+y+"): "+i+" x("+x+"): "+m);
circleMatrix[y][x] = s.circle(m,i,50);
x++;
}
y++;
}
代码非常简单,我不明白为什么它会返回此错误:
未捕获的类型错误: 无法设置未定义的属性"0"
JavaScript 并没有真正的二维数组;而是有数组数组。
这一行:
var circleMatrix = [[]]; //The 2d matrix
创建一个包含一个条目的数组:一个空白数组。所以circleMatrix[1]
(例如)是undefined
.
您必须在外部数组中需要它们的所有位置添加数组。一种方法是添加:
if (!circleMatrix[y]) {
circleMatrix[y] = [];
}
就在这行之前:
circleMatrix[y][x] = s.circle(m,i,50);
例如:
var elementWidth = parseInt($('#svg').width()); //Take container element's width
var circleRadius = parseInt(elementWidth/10); //Calculate radius and the distance from a circle to another
var circleMatrix = []; // *** Changed
var s = Snap("#svg"); //Initialize Snap (it's a svg framework)
var x,y=0; //My index
for(var i=0; i<=elementWidth; i+=circleRadius){
x=0;
for(var m=0; m<=elementWidth; m+=circleRadius){
console.log("y("+y+"): "+i+" x("+x+"): "+m);
if (!circleMatrix[y]) { // *** Added
circleMatrix[y] = []; // *** Added
} // *** Added
circleMatrix[y][x] = s.circle(m,i,50);
x++;
}
y++;
}
要在 JavaScript 中创建 2D 矩阵,您必须执行以下操作:
var circleMatrix = [[],[],[]];
您必须提前知道一个维度是什么,或者计划在迭代外部循环时创建每个"行"。