javascript - 请问这个能 for 出来吗?我手动写的代码,但是因为脑子不够用,不会简化了...

问题描述

问 题

这个是个 3 * 3 的图片排版;
以后可能要做 100*100 的图片排版....

我想定义俩变量,一个 row , 一个Column,然后自动 for 出来 ,
因为我这个脑子不怎么够用,所以请大家帮帮了..

这是 x , 由 border 和 width 组成的 , 简称 b 和 w...
y 也同理...

x[0] = b ;

x[1] = b + w ;
x[2] = b * 3 + w ;

x[3] = b * 3 + w * 2;
x[4] = b * 5 + w * 2;

x[5] = b * 5 + w * 3;
x[6] = b * 7 + w * 3;

x[7] = b * 7 + w * 4;

上面的已经简化了:

for(var i=0;i<7;i++)
{
  x[i]=b*(i%2==0?i+1:i)+w*Math.ceil(i/2)
}


for(var i=0;i<7;i++)
{
  y[i]=b*(i%2==0?i+1:i)+h*Math.ceil(i/2)
}

这是图片左上角的坐标

var RightTop = 
[
    [x[0],y[0]],    //第1行第1张图片 左上角
    [x[2],y[0]],    //第1行第2张图片 左上角
    [x[4],y[0]],    //第1行第3张图片 左上角

    [x[0],y[2]],    //第2行第1张图片 左上角
    [x[2],y[2]],    //第2行第2张图片 左上角
    [x[4],y[2]],

    [x[0],y[4]],
    [x[2],y[4]],
    [x[4],y[4]]

];

这是按照顺时针的四个点...

var aSelection = 
[
    [ [x[0],y[0]] , [x[1],y[0]] , [x[1],y[1]] , [x[0],y[1]] ],    //第1行第1张图片 点[0],点[1],点[2],点[3]
    [ [x[2],y[0]] , [x[3],y[0]] , [x[3],y[1]] , [x[2],y[1]] ],    //第1行第2张图片 点[0],点[1],点[2],点[3]
    [ [x[4],y[0]] , [x[5],y[0]] , [x[5],y[1]] , [x[4],y[1]] ],    //第1行第3张图片 点[0],点[1],点[2],点[3]
    
    [ [x[0],y[2]] , [x[1],y[2]] , [x[1],y[3]] , [x[0],y[3]] ],    //第2行第1张图片 点[0],点[1],点[2],点[3]
    [ [x[2],y[2]] , [x[3],y[2]] , [x[3],y[3]] , [x[2],y[3]] ],    //第2行第2张图片 点[0],点[1],点[2],点[3]
    [ [x[4],y[2]] , [x[5],y[2]] , [x[5],y[3]] , [x[4],y[3]] ],    //第2行第3张图片 点[0],点[1],点[2],点[3]
    
    [ [x[0],y[4]] , [x[1],y[4]] , [x[1],y[5]] , [x[0],y[5]] ],
    [ [x[2],y[4]] , [x[3],y[4]] , [x[3],y[5]] , [x[2],y[5]] ],
    [ [x[4],y[4]] , [x[5],y[4]] , [x[5],y[5]] , [x[4],y[5]] ]

];

解决方案

我用js写了

var border = 10;
var width = 30;
var height = 40;

// 生成指定位置数据
function genPosition (row, col) {
    var fullWidth = border * 2 + width;
    var fullHeight= border * 2 + height;
    return {
        point1: {x: col * fullWidth + border, y: row * fullHeight + border},
        point2: {x: col * fullWidth + border + width, y: row * fullWidth + border},
        point3: {x: col * fullWidth + border + width, y: row * fullWidth + height + border},
        point4: {x: col * fullWidth + border, y: row * fullHeight + height + border}
    };
}

for (var i = 0; i < 3; i++) {
    for (var j = 0; j < 3; j++) {
        var pos = genPosition(i, j);
        // 随便用pos
    }
}

这篇关于javascript - 请问这个能 for 出来吗?我手动写的代码,但是因为脑子不够用,不会简化了...的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！