Question

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

kineticjs阶段
one backgroundLayer a kineticjs layer and
a backgroundImage a kineticjs image

我的舞台已修复尺寸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();

}

然后我按如下方式初始化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);

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

background.offset（）返回{x：0，y：0}，即使我在创建时将其设置为不同
我在图层上手动设置偏移并旋转10度，并且不会在图层的中心旋转。相反，图层被淹没在左上角，图像消失了。

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

Answer 1

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

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

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

1 个答案: