Как повернуть изображение с помощью библиотеки холстов HTML5, например: KineticJS или KonvaJS?

Question

Я могу повернуть прямоугольник (форму) с помощью библиотеки KineticJS. Я хотел бы теперь повернуть изображение, как я могу это сделать?

var stage = new Kinetic.Stage({ 
 
\t container: 'container', 
 
\t width: 530, 
 
\t height: 530 
 
}); 
 
var layer = new Kinetic.Layer(); 
 

 
var bg = new Kinetic.Image({ 
 
    x: 0, 
 
    y: 0, 
 
    width: 530, 
 
    height: 530, 
 
    fill: '#D7D7D7', 
 
}); 
 
/****************** image **********************/ 
 
//sticker.setRotationDeg(90); 
 
var imageObj = new Image(); 
 
function sticker(v) { 
 
\t if(!imageObj.src){ 
 
\t \t var sticker = new Kinetic.Image({ 
 
\t \t \t x: 280, 
 
\t \t \t y: 300, 
 
\t \t \t image: imageObj, 
 
\t \t \t draggable: true 
 
\t \t }); 
 
\t \t layer.add(sticker); 
 
\t } 
 
\t imageObj.src = 'http://cdn.sstatic.net/photo/img/apple-touch-icon.png'; 
 
\t layer.draw(); 
 
} 
 
/****************** image **********************/ 
 

 

 
layer.add(bg); 
 
stage.add(layer);

<script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.4.2.min.js"></script> 
 
<div id="container"></div> 
 
<input type="button" value="ShowSticker" onclick="sticker();"> click show sticker 
 
<input type="button" value="rotate"> up + 5

Я хочу Нажмите вращение

шаг 1 нажмите кнопку показать наклейки

шаг 2 нажатия кнопки Rotate

Каждый раз, когда вы нажмете + 5

или смотрите веб: http://jsfiddle.net/m1erickson/Z6Yg8/

Answer 1

Как я понял из вас, что вы хотите, чтобы повернуть изображение, здесь следующее:

Сначала я предлагаю вам использовать KonvaJS библиотеки, которая раздвоенная из KineticJS, но поддерживаются сообществом, поскольку теперь KeniticJS больше не поддерживается.

Для того, чтобы повернуть в изображение, которое необходимо загрузить его в слой:

imageObj.onload = function() { 

    var yoda = new Konva.Image({ 
    x: 50, 
    y: 50, 
    image: imageObj, 
    width: 106, 
    height: 118, 
    name: "yoda" 
    }); 

А затем повернуть его:

$("#rotate").click(function() { 
    layer.find('Image').rotate(500 * Math.PI/180); 
     layer.draw(); 
    }); 

Here является полный пример