Question

我正在尝试在画布内旋转图像，但是将图像保持在左上角，每次旋转都是1/4揭示。

我的代码是： -

  var layer = new Kinetic.Layer();
  var imageObj = new Image();

  imageObj.onload = function(){
    var stage = new Kinetic.Stage({
    container: 'container',
    width: imageObj.width,
    height: imageObj.height
  });

  var img = new Kinetic.Image({
      x: padding,
      y: padding,
      image: imageObj,
      width: imageObj.width,
      height: imageObj.height,
    });

  layer.add(img);
    stage.add(layer);
   layer.draw();

   });

   $('#rotate-right').on('click', function(){
   img.rotate(90);
   layer.draw();
   });

   });
   imageObj.src = 'img/flippimage3.jpg';

图像在画布上旋转但是我尝试使用偏移但是似乎无法弄清楚我需要什么。

Answer 1

您可以通过将图像的偏移设置为其大小的1/2来使图像围绕其自身的中心点旋转：

var img = new Kinetic.Image({
    x: padding,
    y: padding,
    image: imageObj,
    width: imageObj.width,
    height: imageObj.height,
    offset:{x:imageObj.width/2,y:imageObj.height/2}
});

如何在kinectjs中旋转图像，使图像保持左上角对齐

1 个答案: