implement rotate image

Author: tejitak

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);
+  }
 }
 
 /**

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});
 }
 
 /**

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