Рисунок сетки EaselJS странно смещен/масштабирован

Этот код должен рисовать сетку (он предназначен для лабиринта, поэтому мне нужно рисовать только его части):

function drawMaze() {
for (var r = 0; r < Rows.length; r++) {
    var row = Rows[r];
    var sr = new createjs.Shape();
    sr.x = 0;
    sr.y = (r + 1) * offY;
    var gr = sr.graphics.beginStroke("black");
    gr.moveTo(0, (r + 1) * offY);
    for (var i = 0; i < row.length; i++) {
        if (row[i] === true) {
            console.log("r=" + r + ",i=" + i + ",x=" + (i + 1) * offX + ",y=" + (r + 1) * offY);
            gr.lineTo((i + 1) * offX, (r + 1) * offY);
        } else {
            gr.moveTo((i + 1) * offX, (r + 1) * offY);
        }
    }
    stage.addChild(sr);
}
for (var c = 0; c < Cols.length; c++) {
    var col = Cols[c];
    var sc = new createjs.Shape();
    sc.x = (c + 1) * offX;
    sc.y = 0;
    var gc = sc.graphics.beginStroke("black");
    gc.moveTo((c + 1) * offX, 0);
    for (var i = 0; i < col.length; i++) {
        if (col[i] === true) {
            console.log("c=" + c + ",i=" + i + ",x=" + (c + 1) * offX + ",y=" + (i + 1) * offY);
            gc.lineTo((c + 1) * offX, (i + 1) * offY);
        } else {
            gc.moveTo((c + 1) * offX, (i + 1) * offY);
        }
    }
    stage.addChild(sc);
}
var sd = new createjs.Shape();
sd.graphics.s("black").mt(0, 0).lt(offX * Cols.length, offY * Rows.length).f("red").r(175,175,175,175);
stage.addChild(sd);
stage.update();
}

Диагональная линия/красный квадрат только для визуализации. При этом расстояние между строками/столбцами удваивается, поэтому только половина строк образуют сетку. Вот полный код: http://jsfiddle.net/vyLRT/9/


person timedt    schedule 18.09.2013    source источник


Ответы (1)


Я только что узнал, что было не так! Я просто дважды переместил строки.

Итак, вместо

sr.x = 0;
sr.y = (r + 1) * offY;

sc.x = (c + 1) * offX;
sc.y = 0;

все значения просто должны быть установлены на 0.

person timedt    schedule 27.09.2013