Question

我能够使用KineticJS库旋转矩形（形状）我想现在旋转图像，我该怎么做？

＆＃13;

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);

＆＃13;

<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

＆＃13;

我想点击轮换

第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();
  });

Here是一个完整的例子

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

1 个答案: