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

how to rotate image in kinectjs keeping image aligned to top left

本文关键字：图像 左上角 对齐 旋转 kinectjs      更新时间：2023-09-26

我试图在画布内旋转图像，但每次旋转都要将图像保持在左上角，这是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';

图像会旋转，但在画布外，我尝试过使用偏移，但似乎无法准确地弄清楚我需要什么。

您可以通过将图像的偏移量设置为其大小的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}
});
相关文章：