html - 如何使用 HTML5 画布库旋转图像，例如：KineticJS 或 KonvaJS？

Question

我可以使用 KineticJS 库旋转一个矩形（形状）我现在想旋转一个图像，我该怎么做？

var stage = new Kinetic.Stage({
	container: 'container',
	width: 530,
	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) {
	if(!imageObj.src){
		var sticker = new Kinetic.Image({
			x: 280,
			y: 300,
			image: imageObj,
			draggable: true
		});
		layer.add(sticker);
	}
	imageObj.src = 'http://cdn.sstatic.net/photo/img/apple-touch-icon.png';
	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步单击按钮旋转

每次按 + 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();
  });

这是一个完整的例子