Canvas KineticJS等距变换

我正在尝试用KineticJS库制作等距六边形贴图，并在变换层中被卡住。层必须首先旋转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();
}

var canvas=document.getElementById（'main'），
ctx=canvas.getContext（'2d'）；
变量大小=32，
行=12，
cols=10；
变量高度=2*大小，
宽度=高度*数学sqrt（3）/2；
var grass=新图像（）；
grass.src=http://i46.tinypic.com/302cnk6.png';
grass.onload=函数（）{
var pGrass=ctx.createPattern（grass，“repeat”）；
ctx.save（）；
ctx.scale（1，0.5）；//首先缩放
ctx.translate（400100）；//然后移动
ctx.rotate（45*Math.PI/180）；//最后一次旋转
xDisp=0，yDisp=0；
ctx.fillStyle=pGrass；
对于（变量i=0；i

（pureJS:），但在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;
}

var size=32，
行=12，
cols=10；
变量高度=2*大小，
宽度=高度*数学sqrt（3）/2；
var阶段=新的动力学阶段({
容器：'容器'，
宽度：800，
身高：600
});
var lBackground=新的动能层（）；
对于（变量i=0；i

（）

---

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

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

• 把你的多边形放在一个组中
• 旋转组
• 缩放组的图层

大概是这样的：

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);

var组=新的动力学组({
x:200，
y:200
});
层。添加（组）；
对于（变量i=0；i