Как повернуть это изображение в IDE smartface,io с помощью javascript?

Мне нужно, чтобы это изображение при нажатии кнопки поворачивалось на 90 градусов влево, а при нажатии другой кнопки поворачивалось на 90 градусов вправо. вот мой код. Любая помощь будет принята с благодарностью!

var pinWheel = new SMF.UI.Image({
    name :"Pin Wheel",
    image : "assets://pin_wheel.png",
    positionBackgroundImage : "CENTER",
    top : "60%",
    imageFillType: SMF.UI.ImageFillType.ASPECTFIT
});

javascript user-interface smartface.io
person Binary111    schedule 09.01.2017    source источник

Ответы (1)


arrow_upward
2
arrow_downward

SMF.Bitmap имеет статические функции для обработки изображений. Функция rotate поможет вам с вашим вопросом.

Вот пример кода для вас:

var img = new SMF.UI.Image({
  name: "img",
  image: "smartface.png",
  left: "15%",
  top: "20%",
  width: "70%",
  height: "10%",
  imageFillType: SMF.UI.ImageFillType.ASPECTFIT
});

var btn = new SMF.UI.TextButton({
  name: "btn",
  text: "Rotate!",
  onPressed: function() {
    var myImageUri = "smartface.png";
    var im = new SMF.Bitmap({
      imageUri: myImageUri,
      onSuccess: function(e) {
        im.rotate({
          angle: 90,
          format: SMF.ImageFormat.PNG,
          compressionRate: 0.7,
          onSuccess: function(e) {
            img.image = e.image;
          },
          onError: function(e) {
            alert("Error: " + e.message);
          }
        });
      },
      onError: function(e) {
        alert("Error: " + e.message);
      }
    });
  },
  left: "15%",
  top: "70%",
  width: "70%",
  height: "10%"
});
person halit    schedule 11.01.2017
comment
Итак, это работает, что совершенно потрясающе, но, похоже, есть какое-то отставание или переход, который я хотел бы удалить. Я ценю всю помощь до сих пор, но есть идеи, как я могу это сделать? - person Binary111; 12.01.2017
comment
@ Binary111 Функции SMF.Bitmap работают асинхронно, скорее всего, это кажется вам отставанием, и я не думаю, что вы можете что-то для этого сделать. Вы можете показать индикатор активности (если вращение занимает так много времени) для лучшего UX. - person halit; 13.01.2017
comment
ок, спасибо за помощь! Это игра, поэтому мне нужен быстрый ответ, но я думаю, что могу добавить новое изображение, которое ранее было повернуто, и удалить изображение под ним. - person Binary111; 13.01.2017