KineticJS 等距变换答案

【问题标题】：KineticJS isometric transformsKineticJS 等距变换
【发布时间】：2013-12-07 09:38:06
【问题描述】：

我正在尝试使用 KineticJS lib 制作等距六边形地图，并且卡住了变换层。图层必须先旋转 45 度。然后缩放 (1, 0.5) 以获得正确的结果

var canvas = document.getElementById('main'),
    ctx = canvas.getContext('2d');

var size = 32,
    rows = 12,
    cols = 10;

var height = 2 * size,
    width = height * Math.sqrt(3) / 2;

var grass = new Image();
grass.src = 'http://i46.tinypic.com/302cnk6.png';
grass.onload = function () {
    var pGrass = ctx.createPattern(grass, 'repeat');

    ctx.save();
    ctx.scale(1, 0.5); //Scale first
    ctx.translate(400, 100); //Then moving
    ctx.rotate(45 * Math.PI / 180); // Last rotating

    xDisp = 0, yDisp = 0;
    ctx.fillStyle = pGrass;
    for (var i = 0; i < rows; i++) {
        xDisp = i % 2 === 0 ? 0 : width / 2;
        additional = i * height / 4;
        for (var j = 0; j < cols; j++) {
            drawPoly(30 + j * width + xDisp, 35 + i * height - additional, size, '#000');
            ctx.shadowColor = '#000';
            ctx.shadowBlur = 10;
            ctx.shadowOffsetX = 0;
            ctx.shadowOffsetY = 5;
            ctx.fill();
        }
    }
    ctx.restore();
};
function drawPoly(cX, cY, size, color) {
    ctx.beginPath();
    for (var i = 0; i < 6; i++) {
        angle = 2 * Math.PI / 6 * (i + 0.5);
        x = cX + size * Math.cos(angle);
        y = cY + size * Math.sin(angle);

        if (i === 0) ctx.moveTo(x, y);
        else ctx.lineTo(x, y);
    }
    ctx.closePath();
    ctx.strokeStyle = color;
    ctx.stroke();
}

(pureJS: http://jsfiddle.net/YvwLB/)，但在 KineticJS 中，旋转和缩放操作在原始层上执行

var size = 32,
    rows = 12,
    cols = 10;

var height = 2 * size,
    width = height * Math.sqrt(3) / 2;

var stage = new Kinetic.Stage({
    container: 'container',
    width: 800,
    height: 600
});

var lBackground = new Kinetic.Layer();

for (var i = 0; i < rows; i++) {
    xDisp = i % 2 === 0 ? 0 : width / 2;
    additional = i * height / 4;
    for (var j = 0; j < cols; j++) {
        var _poly = drawPoly(30 + j * width + xDisp, 35 + i * height - additional, size, '#0d0');
        lBackground.add(_poly);
    }
}
stage.add(lBackground);

lBackground.rotateDeg(45);
lBackground.move(400, 100);
lBackground.setScaleY(0.5);

stage.draw();

function drawPoly(cX, cY, rad, color) {
    var poly = new Kinetic.RegularPolygon({
        x: cX,
        y: cY,
        sides: 6,
        radius: rad,
        fill: color,
        stroke: 'black',
        strokeWidth: 1
    });
    poly.on('mouseover', function () {
        this.setFill('#D23333');
        lBackground.draw();
    });
    poly.on('mouseout', function () {
        this.setFill(color);
        lBackground.draw();
    });
    return poly;
}

(http://jsfiddle.net/26ArE/).

如何在 KineticJS 中设置转换操作的优先级？

【问题讨论】：

标签： canvas kineticjs isometric

【解决方案1】：

您可以添加一个组来更好地控制转换顺序：

将你的 poly 放在一个组中
轮换组
缩放组的图层

类似这样的：

var group=new Kinetic.Group({
  x:200,
  y:200
});
layer.add(group);

for (var i = 0; i < rows; i++) {
    xDisp = i % 2 === 0 ? 0 : width / 2;
    additional = i * height / 4;
    for (var j = 0; j < cols; j++) {
        var _poly = drawPoly(
            30 + j * width + xDisp, 35 + i * height - additional, size, '#0d0');
        group.add(_poly);
    }
}

group.rotateDeg(45);
layer.setScale(1, 0.5);

【讨论】：