Question

我正在尝试使用KineticJS旋转添加到画布的图像。我得到它几乎工作。我知道我需要设置偏移量来“移动”旋转点，该部分正在工作。但它也正在转移到偏移的位置。做了一些旋转之后，我可以将我的图像拖到画布中的另一个位置，然后继续围绕它自己的中心旋转。我不想旋转整个画布，因为我在一个图层上有多个图像。

相关代码：

function rotateLayer() {
    // Rotate bird image
    var rotation = 15;

    // Set rotation point:
    imageDict[1].setOffsetX(imageDict[1].width() / 2);
    imageDict[1].setOffsetY(imageDict[1].height() / 2);

    // rotation in degrees
    imageDict[1].rotate(rotation);
    imageDict[1].getLayer().draw();
}

工作演示在jsfiddle上：http://jsfiddle.net/kp61vcfg/1/

所以简而言之，我想要轮换而不是动作。

Answer 1

如何在不移动的情况下旋转？ KineticJS相对于它的“起点”旋转物体。例如，Kinetic.Rect起点为{0,0} - 左上角。您可以将这样的“起始点”移动到具有偏移参数的任何位置。

Answer 2

经过大量的追踪和错误后，我找到了解决方案。

诀窍是将加载期间的偏移设置为半宽和高度，将旋转点设置为图像的中间位置，不要调用image.cache：

function initAddImage(imgId, imgwidth, imgheight) {
    var imageObj = new Image();
    imageObj.src = document.getElementById(imgId).src;
    imageObj.onload = function () {
        var image = new Kinetic.Image({
            image: imageObj,
            draggable: true,
            shadowColor: '#787878',
            shadowOffsetX: 2,
            shadowOffsetY: 2,
            width: imgwidth,
            height: imgheight,
            x: 150,  // half width of container
            y: 150,  // half height of container
            offset : {x : imgwidth / 2, y : imgheight / 2}, // Rotation point
            imgId: imgId
        });

        layer.add(image);
        //image.cache();
        layer.draw();
        imageDict[currentLayerHandle] = image;
        currentLayerHandle++;
    };
}

我已将我的演示版更新为工作版： http://jsfiddle.net/kp61vcfg/2/

在其自己的中心kineticJS上旋转图像

2 个答案: