Javascript 使用kineticjs中的偏移旋转层或图像

我有一个kineticjs应用程序，它包含以下内容

运动学阶段

一个背景层一个kineticjs层和

背景图片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 = 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();

}

然后我初始化I-kinetijs图像对象，如下所示

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

    });

我按以下顺序添加它们

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

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

offset（）返回{x:0，y:0}，即使我在创建时将其设置为不同的

我在图层上手动设置偏移，旋转10度，不会在图层中心旋转。相反，图层被淹没在左上角，图像显示

---

我的代码有问题吗？我没有正确理解吗？

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

---

确实如此。现在，图像几乎已退出舞台（左上角）

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