Rotate image

[tejitak]

It is an enhancement that image component accepts a specified rotate (angle) value.
Usages is a just setting rotate as a prop like below.

e.g. jsx in css-layout example
<Image src='http://lorempixel.com/360/420/cats/1/' style={this.getImageStyle()} fadeIn={true} rotate={20} />

I need this capability to implement a rotating jump action in a simple game by using React state.
e.g. <Image src="..." rotate={this.state.rotate} />

[Mickey-]

is there any method to scale image instead of using html?

    <img src="xxx-400x200.png"  style="width:200px;height:100px" />

[tejitak]

Hi @Mickey- ,
You can specify the image size in React component.
e.g. (modify on "examples/css-layout/app.js")

  render: function () {
    return (
      <Surface top={0} left={0} width={400} height={400} enableCSSLayout={true}>
            <Image src='http://lorempixel.com/360/420/cats/1/' style={this.getImageStyle()} fadeIn={true} rotate={20} />
      </Surface>
    );
  },

  getImageStyle: function () {
    return {
      width: 200,
      height: 100
    };
  },

The image size will be dynamically changed according to the returned value of getImageStyle() in this case.

[Mickey-]

Sorry,Maybe I didn't speak clearly @tejitak
For example, when I use

    <Image src='https://d2eip9sf3oo6c2.cloudfront.net/series/covers/000/000/005/full/react_flux_series_banner_2.png?1404147531' style={this.getImageStyle()}  />

I get

But what I need is scale image, not crop it,just like

What should I do? whatever, thank you very much: )

P.S. Where can I get full documentation?

[tejitak]

Hi @Mickey- ,
I think It can not be done without any code changes.

I modified the code and added an attributed 'imageScale' in my new forked branch. Please try the following procedure.

1. apply the following changes to your repository
   tejitak@bd713f1
2. use 'imageScale={true}' on image component
   e.g.
   <Image src='https://d2eip9sf3oo6c2.cloudfront.net/series/covers/000/000/005/full/react_flux_series_banner_2.png?1404147531' style={this.getImageStyle()} fadeIn={true} imageScale={true} />

Note that it is just a temporary patch and not fully tested.
Thanks

[adamellsworth]

+1 on this.

Ideally it'd be great to just pass the drawImage properties down via <Image sx={0} sy={10} /> etc:

sx, sy, swidth, sheight, dx, dy, dwidth, dheight

[adamellsworth]

@tejitak does the drawImage event support appending options (focusPoint) like that? I can't find docs on the function where it accepts the extra object after dHeight.

[tejitak]

Hi @adamellsworth ,
Thank you for your comment. Passing these properties looks nice feature.

Regarding the extra object, there is no docs. Also, there looks no functions to execute with them despite some options (focusPoint) exist in CanvasUtil.js. I'm not sure what the options exactly mean. I think we need tweak the codes to pass these params.

[adamellsworth]

drawImage is a very exact function which, to most users, require the ancillary options (sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight. I opted-out of react-canvas in lieu of managing our own canvas(es) as required by our components which need the source x, source y, source Width etc. on each redraw (via componentDidUpdate). I've looked through the source on react-canvas and cant' rightly see an easy way to integrate such props.

Thanks for looking into this and keep up the branches! Yours in particular helped me understand what we needed to do in order to accomplish our desired ends.

[asennikov]

Any news on that? Looks like a valuable feature, any chance it could be merged?