how to make circular images with decorator/CSS

classic Classic list List threaded Threaded
4 messages Options
Reply | Threaded
Open this post in threaded view
|

how to make circular images with decorator/CSS

slah
This post was updated on .
Hello,
I'm trying to show an image in a circular shape like google+ do for avatars, etc.
here's a working example in CSS http://jsfiddle.net/cm2uunz5/

seems I've to use CSS  border-radius: 50%;
trying to use decorator for this purpose fails because  qx.ui.decoration.Decorator().setRadius() only accepts integers and not %.

Can someone show me how to use CSS or Decorator() to achieve this purpose.

Regards,
Reply | Threaded
Open this post in threaded view
|

Re: how to make circular images with decorator/CSS

Vincent Vandenschrick
Hi Slah,
I would go for a decorator mixin in order to deal with a percentRadius property that you can later handle in a stylePercentRadius method.
Take the following mixin as an example and this should be quite straightforward :
https://github.com/jspresso/jspresso-ce/blob/master/qooxdoo/client/src/main/js/org/jspresso/framework/patch/MTransition.js

HTH,
Vincent

> Le 27 mai 2015 à 17:42, slah <[hidden email]> a écrit :
>
> Hello,
> I'm trying to show an image in a circular shape like google+ do for avatars,
> etc.
>
> seems I've to use CSS * border-radius: 50%;*
> trying to use decorator for this purpose fails because
> *qx.ui.decoration.Decorator().setRadius()* only accepts integers and not %.
>
> Can someone show me how to use CSS or Decorator() to achieve this purpose.
>
> Regards,
>
>
>
> --
> View this message in context: http://qooxdoo.678.n2.nabble.com/how-to-make-circular-images-with-decorator-CSS-tp7587190.html
> Sent from the qooxdoo mailing list archive at Nabble.com.
>
> ------------------------------------------------------------------------------
> _______________________________________________
> qooxdoo-devel mailing list
> [hidden email]
> https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel

------------------------------------------------------------------------------
_______________________________________________
qooxdoo-devel mailing list
[hidden email]
https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel
Reply | Threaded
Open this post in threaded view
|

Re: how to make circular images with decorator/CSS

MartinWittemann
Administrator
In reply to this post by slah
Hey,
you could use an incredible high integer value to get that done. Usually the browser do not care of the radius is higher than it could be.
Regards,
Martin


> Am 27.05.2015 um 17:42 schrieb slah <[hidden email]>:
>
> Hello,
> I'm trying to show an image in a circular shape like google+ do for avatars,
> etc.
>
> seems I've to use CSS * border-radius: 50%;*
> trying to use decorator for this purpose fails because
> *qx.ui.decoration.Decorator().setRadius()* only accepts integers and not %.
>
> Can someone show me how to use CSS or Decorator() to achieve this purpose.
>
> Regards,
>
>
>
> --
> View this message in context: http://qooxdoo.678.n2.nabble.com/how-to-make-circular-images-with-decorator-CSS-tp7587190.html
> Sent from the qooxdoo mailing list archive at Nabble.com.
>
> ------------------------------------------------------------------------------
> _______________________________________________
> qooxdoo-devel mailing list
> [hidden email]
> https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel


------------------------------------------------------------------------------
_______________________________________________
qooxdoo-devel mailing list
[hidden email]
https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel
Reply | Threaded
Open this post in threaded view
|

Re: how to make circular images with decorator/CSS

slah
MartinWittemann wrote
Hey,
you could use an incredible high integer value to get that done. Usually the browser do not care of the radius is higher than it could be.
Regards,
Martin


> Am 27.05.2015 um 17:42 schrieb slah <[hidden email]>:
>
> Hello,
> I'm trying to show an image in a circular shape like google+ do for avatars,
> etc.
>
> seems I've to use CSS * border-radius: 50%;*
> trying to use decorator for this purpose fails because
> *qx.ui.decoration.Decorator().setRadius()* only accepts integers and not %.
>
> Can someone show me how to use CSS or Decorator() to achieve this purpose.
>
> Regards,
>
>
>
> --
Hi Martin,
seems that giving very high radius (1000px) did the trick: http://jsfiddle.net/8yse3owL/.
So in my app, I need just to apply this decorator to any element to make it circular:
var deco = new qx.ui.decoration.Decorator().set({
                                radius : 1000, //1000 to get the rounded effect
                        });
myImg.setDecorator(deco);

I'll try Stephan's mixin too.

Thank you all

> View this message in context: http://qooxdoo.678.n2.nabble.com/how-to-make-circular-images-
with-decorator-CSS-tp7587190.html
> Sent from the qooxdoo mailing list archive at Nabble.com.
>
> ------------------------------------------------------------------------------
> _______________________________________________
> qooxdoo-devel mailing list
> [hidden email]
> https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel


------------------------------------------------------------------------------
_______________________________________________
qooxdoo-devel mailing list
[hidden email]
https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel