PDA

View Full Version : Rotate Button // Icon



Yannickdl
22 Apr 2011, 12:32 AM
I'm creating a interactive map (own PNG) on which the user has to be able to add a point (a marker).

This marker is a button element, that (when the users taps on it) gets a badge added to itself.

Now a wanted feature is that the user also is able to 'rotate' to object to point an arrow to an exact location on the map.

Does anyone know if it possible to rotate a button element? With something like a .rotate?

Perhaps an alternative would be to use a canvas element (I believe a canvas has a standard rotate element) - But then I would have to find an alternative for the badge icon...

Yannickdl
27 Apr 2011, 3:57 AM
Gentle Bump. Maybe somebody is browsing this forum today who has an idea? :-)

vishalnnsingh
27 Apr 2011, 4:28 AM
There is nothing with which you can rotate, what you can do is use, other images, and just play wit hide show. You can also add and remove styles dynamically, which i think is one of the best option...

realjax
27 Apr 2011, 4:46 AM
Of course you can.

Use a css3 transformation.

Yannickdl
27 Apr 2011, 5:24 AM
@realjax,

Thanks for the response!

I have thought about using some css3-magic myself but can't seem to find a solution to force the beneath style (dynamically) onto a button.

-webkit-transform: rotate(7deg);

The problem with the map is that it will need to contain several different 'buttons' with each a different rotation.

So the CSS has to be applied dynamically (on drag or tap) (pointing it to a css class in my style.css would be static). But how do I add the above mentioned line to the button? Forcing it through .style() doesn't seem to work.

(Hmm, just a seperate mindspin, if I can't add it dynamically, maybe I can make a subset of different CSS classes (1 to rotate 30, 1 to rotate 60) and change the css class the button points to..)

@vishalnnsingh,

If rotation indeed proves to be 'impossible' I think the solution you mention, change the style//icon on rotate/drag, would be the best option. Thanks.

[edit]

Rotating the button via a seperate CSS class works. Only the dynamic adding of the style remains (ideally I want to be able to force a style directly on to the button (so I don't have to point the button to a seperate style in my CSS file with fixed rotation values).

[edit 2]

Cheered to soon. The rotation of the button, via a css class with: -webkit-transform: rotate(13deg);, does works in Chrome but not on the iPad (or atleast not in the iOS Simulator)...

Yannickdl
8 May 2011, 11:42 PM
I have tested some more with the 'rotate' transform option of CSS3 (+ Sencha Touch).

[Example - Works in Chrome but NOT on iOS]



var imageP = {

xtype: 'button',
iconMask: true,
width: 30,
height: 20,
iconCls: '',
cls: 'rotate30',
ui: 'confirm',
style: {
position: 'absolute',
left: 0,
top: 0,
},

//ui: 'plain'
}


And for the CSS class:



.rotate30 {

-webkit-transform: rotate(13deg);

}


[Example - Works in Chroma AND on iOS]




var imageP = {

xtype: 'button',
iconMask: true,
width: 30,
height: 20,
iconCls: '',
//cls: 'rotate30',
ui: 'confirm',
style: {
position: 'absolute',
left: 0,
top: 0,
'-webkit-transform': 'rotate(12deg)',
},

//ui: 'plain'
}


As to why the rotate does work when applied directly via the style: {} and not when used in a seperate CSS class, I have no clue..

Now I just have to make it dynamic somehow.