在kineticjs中旋转图层或带有偏移的图像

Question

我有一个由以下内容组成的 kineticjs 应用程序

1. kineticjs 阶段
2. 一个 backgroundLayer 一个 kineticjs 层和
3. 一个 backgroundImage 一个 kineticjs 图片

我的舞台尺寸固定为 800x600

//global variables
var stageWidth = 800;
var stageHeight = 600;

stage = new Kinetic.Stage({
    width: stageWidth,
    height:stageHeight,
    container: 'container',
    x: 0,
    y: 0
});

我的 backgroundLayer 也有固定大小并且在舞台顶部

backgroundLayer = new Kinetic.Layer({
    width:stageWidth,
    height: stageHeight,
    x: 0,
    y: 0,
    draggable: false,
    offset: [stageWidth / 2, stageHeight / 2]

});

我的 Kineticjs 图像的大小取决于图像大小。因此，如果图像是垂直的，它的高度为 600，并根据舞台尺寸的比例调整宽度。当图像是纵向时，它也是这样做的

function initializeImage(id){
    var domImage = $("#"+id);
    var imageSrc = domImage.prop('src');
    imageObj = new Image();
    imageObj.src = imageSrc;
    if (imageWidth > imageHeight){
        imageWidth = stageWidth;
        imageHeight = imageWidth / ratio;
        imageY = (stageHeight - imageHeight) / 2;
    }else{
        imageHeight = stageHeight;
        imageWidth = stageHeight / ratio;
        imageX = (stageWidth - imageWidth) / 2;

    }
    domImage.remove();

}

然后我初始化他们的 kinetijs 图像对象如下

imageObj.onload = function (){
    backgroundImage = new Kinetic.Image({
        image:imageObj,
        width:imageWidth,
        height:imageHeight,
        x:imageX,
        y:imageY

    });

我按以下顺序添加它们

backgroundLayer.add(backgroundImage);        
stage.add(backgroundLayer);

我的问题是当我尝试旋转图像或使用偏移旋转的图层时不起作用。我遇到以下问题

1. background.offset() 返回 {x:0, y:0}，即使我在创建时将其设置为不同
2. 我在图层上手动设置偏移并旋转 10 度，不会在图层中心旋转。相反，图层被淹没到左上角，图像消失。

我的代码有什么问题吗？我没有正确理解某些内容吗？

Answer 1

看起来您需要更改 API（您必须传递对象，而不是数组）：

offset: {
  x : stageWidth / 2,
  y : stageHeight / 2
}