CODEWITHSUNDEEP
htmlcanvashtml5-canvaskineticjskonvajs
nunabi
nunabi

Reputation: 11

How to rotate image using HTML5 canvas library like: KineticJS or KonvaJS?

I am able to rotate a rectangle (shape) using KineticJS library I would like now to rotate an image, How I can do that?

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

I want to Click The rotation

step 1 click button show sticker

step 2 click button rotate

Each time you press + 5

or see web : http://jsfiddle.net/m1erickson/Z6Yg8/

Upvotes: 0

Views: 1097

Answers (1)

Mahdi Alkhatib
Mahdi Alkhatib

Reputation: 1982

As I have understood from you that you want to rotate an image, here is the following:

First I suggest you to use KonvaJS library which is forked from KineticJS but is supported by a community, as now KeniticJS is no longer supported.

In order to rotate in image you need to load it into the layer:

imageObj.onload = function() {

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

And then rotate it:

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

Here is a full example

Upvotes: 3

Related Questions