From b0c601b8f9c52d878589d07f2a3e63a96b3285ec Mon Sep 17 00:00:00 2001
From: tejitak <tejitak@gmail.com>
Date: Tue, 17 Mar 2015 22:23:02 +0900
Subject: [PATCH] implement rotate image

---
 lib/CanvasUtils.js  | 10 +++++++++-
 lib/DrawingUtils.js |  2 +-
 lib/Image.js        |  7 +++++--
 3 files changed, 15 insertions(+), 4 deletions(-)

diff --git a/lib/CanvasUtils.js b/lib/CanvasUtils.js
index 8b4b30d..842012f 100644
--- a/lib/CanvasUtils.js
+++ b/lib/CanvasUtils.js
@@ -88,7 +88,15 @@ function drawImage (ctx, image, x, y, width, height, options) {
   dx = Math.round(x);
   dy = Math.round(y);
 
-  ctx.drawImage(image.getRawImage(), sx, sy, sw, sh, dx, dy, dw, dh);
+  if (options.rotate) {
+    ctx.save();
+    ctx.translate(dx + (dw / 2), dy + (dh / 2));
+    ctx.rotate(options.rotate * Math.PI / 180);
+    ctx.drawImage(image.getRawImage(), sx, sy, sw, sh, - (dw / 2), - (dh / 2), dw, dh);
+    ctx.restore();
+  } else {
+    ctx.drawImage(image.getRawImage(), sx, sy, sw, sh, dx, dy, dw, dh);
+  }
 }
 
 /**
diff --git a/lib/DrawingUtils.js b/lib/DrawingUtils.js
index e2db275..33ba798 100644
--- a/lib/DrawingUtils.js
+++ b/lib/DrawingUtils.js
@@ -372,7 +372,7 @@ function drawImageRenderLayer (ctx, layer) {
     return;
   }
 
-  CanvasUtils.drawImage(ctx, image, layer.frame.x, layer.frame.y, layer.frame.width, layer.frame.height);
+  CanvasUtils.drawImage(ctx, image, layer.frame.x, layer.frame.y, layer.frame.width, layer.frame.height, {rotate: layer.rotate});
 }
 
 /**
diff --git a/lib/Image.js b/lib/Image.js
index 9921e6a..acd08ee 100644
--- a/lib/Image.js
+++ b/lib/Image.js
@@ -19,6 +19,7 @@ var RawImage = createComponent('Image', LayerMixin, {
 
     layer.type = 'image';
     layer.imageUrl = props.src;
+    layer.rotate = props.rotate;
   },
 
   mountComponent: function (rootID, transaction, context) {
@@ -33,6 +34,7 @@ var RawImage = createComponent('Image', LayerMixin, {
     var prevProps = this._currentElement.props;
     var props = nextComponent.props;
     this.applyLayerProps(prevProps, props);
+    this.applyImageProps(prevProps, props);
     this._currentElement = nextComponent;
     this.node.invalidateLayout();
   },
@@ -46,7 +48,8 @@ var Image = React.createClass({
     style: React.PropTypes.object,
     useBackingStore: React.PropTypes.bool,
     fadeIn: React.PropTypes.bool,
-    fadeInDuration: React.PropTypes.number
+    fadeInDuration: React.PropTypes.number,
+    rotate: React.PropTypes.number
   },
 
   getInitialState: function () {
@@ -92,7 +95,7 @@ var Image = React.createClass({
     return (
       React.createElement(Group, {ref: 'main', style: style},
         React.createElement(Layer, {ref: 'background', style: backgroundStyle}),
-        React.createElement(RawImage, {ref: 'image', src: this.props.src, style: imageStyle, useBackingStore: useBackingStore})
+        React.createElement(RawImage, {ref: 'image', src: this.props.src, style: imageStyle, useBackingStore: useBackingStore, rotate: this.props.rotate})
       )
     );
   },