circular image in flex

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

circular image in flex

FlexCoders mailing list
Hello guys, i am trying to create a circular mask for an image control so that the picture can be circular. Here is my code so far.
 

 <?xml version="1.0" encoding="utf-8"?>
 <mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml"
   width="180"
   height="180"
   initialize="init();">
 

 <mx:Script>
 <![CDATA[
 import mx.events.ResizeEvent;
 

 private var roundedMask:Sprite;
 

 private function init():void
 {
 roundedMask=new Sprite();
 this.rawChildren.addChild(roundedMask);
 }
 

 private function image_resize(evt:ResizeEvent):void
 {
 
 roundedMask.graphics.clear();
 roundedMask.graphics.beginFill(0xFF0000);
 roundedMask.graphics.drawCircle(stage.stageWidth / 2, stage.stageHeight / 2, 90);
 roundedMask.graphics.endFill();
 image.mask=roundedMask;
 
 }
 ]]>
 </mx:Script>
 

 <mx:Image id="image"
  source="http://www.helpexamples.com/flash/images/image1.jpg"
  resize="image_resize(event);">
 </mx:Image>
 

 
 </mx:Canvas>
 
 

 the image is not the way i want it. Could someone please help
 

Reply | Threaded
Open this post in threaded view
|

Re: circular image in flex

FlexCoders mailing list
Any help guys?
Reply | Threaded
Open this post in threaded view
|

Re: circular image in flex

FlexCoders mailing list
Try this one


<?xml version="1.0" encoding="utf-8"?><!--
http://blog.flexexamples.com/2008/09/09/rounding-the-corners-of-an-image-control-in-flex-using-a-mask/
--><mx:Application name="Image_mask_test"
xmlns:mx="http://www.adobe.com/2006/mxml"        layout="vertical"
   verticalAlign="middle"        backgroundColor="white"
initialize="init();">

    <mx:Script>        <![CDATA[            import mx.events.ResizeEvent;
             private var roundedMask:Sprite;
             private function init():void {                roundedMask
= new Sprite();
canvas.rawChildren.addChild(roundedMask);            }
             private function image_resize(evt:ResizeEvent):void {
           var w:Number = evt.currentTarget.width;                var
h:Number = evt.currentTarget.height;                var
cornerRadius:uint = 60;                roundedMask.graphics.clear();
             roundedMask.graphics.beginFill(0xFF0000);
roundedMask.graphics.drawRoundRect(0, 0,                            w,
h,                            cornerRadius, cornerRadius);
   roundedMask.graphics.endFill();                image.mask =
roundedMask;            }        ]]>    </mx:Script>

    <mx:Canvas id="canvas">
        <mx:Image id="image"
source="http://www.helpexamples.com/flash/images/image1.jpg"
     resize="image_resize(event);">
        </mx:Image>
    </mx:Canvas>
 </mx:Application>


___________________________________________________________________
Ernest E. Breau Jr.
Senior Coldfusion Developer
      cell: (508) 264-9856
   email: [hidden email]
resume: http://cfengineers.com
  twitter: http://twitter.com/cfengineers


On Wed, Aug 10, 2016 at 9:09 AM, [hidden email] [flexcoders] <
[hidden email]> wrote:

>
>
> Any help guys?
>
>
Reply | Threaded
Open this post in threaded view
|

Re: circular image in flex

FlexCoders mailing list
In reply to this post by FlexCoders mailing list
The death of this technology was a crime.Oliver Cromwell has his Ireland and Steve Jobs had his flash.
Angular2 is pretty good replacement, eventually they will add a bitmap I predict.They will have to eventually, or a facsimile thereof

When you can't mathematically relate any pixel on the screen to any other and do so over time.You are by definition inferior to flash as a user interface.
 Dan Pride
1-303-800-0900 - Skype No Texting1-360-850-9322 Mobile
http://danielpride.com
www.linkedin.com/in/danielpride/http://archaeolibrary.com/https://headlessuber.com





      From: "[hidden email] [flexcoders]" <[hidden email]>
 To: [hidden email]
 Sent: Wednesday, August 10, 2016 1:20 AM
 Subject: [flexcoders] circular image in flex
   
    Hello guys, i am trying to create a circular mask for an image control so that the picture can be circular. Here is my code so far. 
<?xml version="1.0" encoding="utf-8"?><mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml"    width="180"    height="180"    initialize="init();">
 <mx:Script> <![CDATA[ import mx.events.ResizeEvent;
 private var roundedMask:Sprite;
 private function init():void { roundedMask=new Sprite(); this.rawChildren.addChild(roundedMask); }
 private function image_resize(evt:ResizeEvent):void {  roundedMask.graphics.clear(); roundedMask.graphics.beginFill(0xFF0000);  roundedMask.graphics.drawCircle(stage.stageWidth / 2, stage.stageHeight / 2, 90); roundedMask.graphics.endFill(); image.mask=roundedMask;  } ]]> </mx:Script>
 <mx:Image id="image"   source="http://www.helpexamples.com/flash/images/image1.jpg"   resize="image_resize(event);"> </mx:Image>
</mx:Canvas> 
the image is not the way i want it. Could someone please help
  #yiv1194420150 #yiv1194420150 -- #yiv1194420150ygrp-mkp {border:1px solid #d8d8d8;font-family:Arial;margin:10px 0;padding:0 10px;}#yiv1194420150 #yiv1194420150ygrp-mkp hr {border:1px solid #d8d8d8;}#yiv1194420150 #yiv1194420150ygrp-mkp #yiv1194420150hd {color:#628c2a;font-size:85%;font-weight:700;line-height:122%;margin:10px 0;}#yiv1194420150 #yiv1194420150ygrp-mkp #yiv1194420150ads {margin-bottom:10px;}#yiv1194420150 #yiv1194420150ygrp-mkp .yiv1194420150ad {padding:0 0;}#yiv1194420150 #yiv1194420150ygrp-mkp .yiv1194420150ad p {margin:0;}#yiv1194420150 #yiv1194420150ygrp-mkp .yiv1194420150ad a {color:#0000ff;text-decoration:none;}#yiv1194420150 #yiv1194420150ygrp-sponsor #yiv1194420150ygrp-lc {font-family:Arial;}#yiv1194420150 #yiv1194420150ygrp-sponsor #yiv1194420150ygrp-lc #yiv1194420150hd {margin:10px 0px;font-weight:700;font-size:78%;line-height:122%;}#yiv1194420150 #yiv1194420150ygrp-sponsor #yiv1194420150ygrp-lc .yiv1194420150ad {margin-bottom:10px;padding:0 0;}#yiv1194420150 #yiv1194420150actions {font-family:Verdana;font-size:11px;padding:10px 0;}#yiv1194420150 #yiv1194420150activity {background-color:#e0ecee;float:left;font-family:Verdana;font-size:10px;padding:10px;}#yiv1194420150 #yiv1194420150activity span {font-weight:700;}#yiv1194420150 #yiv1194420150activity span:first-child {text-transform:uppercase;}#yiv1194420150 #yiv1194420150activity span a {color:#5085b6;text-decoration:none;}#yiv1194420150 #yiv1194420150activity span span {color:#ff7900;}#yiv1194420150 #yiv1194420150activity span .yiv1194420150underline {text-decoration:underline;}#yiv1194420150 .yiv1194420150attach {clear:both;display:table;font-family:Arial;font-size:12px;padding:10px 0;width:400px;}#yiv1194420150 .yiv1194420150attach div a {text-decoration:none;}#yiv1194420150 .yiv1194420150attach img {border:none;padding-right:5px;}#yiv1194420150 .yiv1194420150attach label {display:block;margin-bottom:5px;}#yiv1194420150 .yiv1194420150attach label a {text-decoration:none;}#yiv1194420150 blockquote {margin:0 0 0 4px;}#yiv1194420150 .yiv1194420150bold {font-family:Arial;font-size:13px;font-weight:700;}#yiv1194420150 .yiv1194420150bold a {text-decoration:none;}#yiv1194420150 dd.yiv1194420150last p a {font-family:Verdana;font-weight:700;}#yiv1194420150 dd.yiv1194420150last p span {margin-right:10px;font-family:Verdana;font-weight:700;}#yiv1194420150 dd.yiv1194420150last p span.yiv1194420150yshortcuts {margin-right:0;}#yiv1194420150 div.yiv1194420150attach-table div div a {text-decoration:none;}#yiv1194420150 div.yiv1194420150attach-table {width:400px;}#yiv1194420150 div.yiv1194420150file-title a, #yiv1194420150 div.yiv1194420150file-title a:active, #yiv1194420150 div.yiv1194420150file-title a:hover, #yiv1194420150 div.yiv1194420150file-title a:visited {text-decoration:none;}#yiv1194420150 div.yiv1194420150photo-title a, #yiv1194420150 div.yiv1194420150photo-title a:active, #yiv1194420150 div.yiv1194420150photo-title a:hover, #yiv1194420150 div.yiv1194420150photo-title a:visited {text-decoration:none;}#yiv1194420150 div#yiv1194420150ygrp-mlmsg #yiv1194420150ygrp-msg p a span.yiv1194420150yshortcuts {font-family:Verdana;font-size:10px;font-weight:normal;}#yiv1194420150 .yiv1194420150green {color:#628c2a;}#yiv1194420150 .yiv1194420150MsoNormal {margin:0 0 0 0;}#yiv1194420150 o {font-size:0;}#yiv1194420150 #yiv1194420150photos div {float:left;width:72px;}#yiv1194420150 #yiv1194420150photos div div {border:1px solid #666666;min-height:62px;overflow:hidden;width:62px;}#yiv1194420150 #yiv1194420150photos div label {color:#666666;font-size:10px;overflow:hidden;text-align:center;white-space:nowrap;width:64px;}#yiv1194420150 #yiv1194420150reco-category {font-size:77%;}#yiv1194420150 #yiv1194420150reco-desc {font-size:77%;}#yiv1194420150 .yiv1194420150replbq {margin:4px;}#yiv1194420150 #yiv1194420150ygrp-actbar div a:first-child {margin-right:2px;padding-right:5px;}#yiv1194420150 #yiv1194420150ygrp-mlmsg {font-size:13px;font-family:Arial, helvetica, clean, sans-serif;}#yiv1194420150 #yiv1194420150ygrp-mlmsg table {font-size:inherit;font:100%;}#yiv1194420150 #yiv1194420150ygrp-mlmsg select, #yiv1194420150 input, #yiv1194420150 textarea {font:99% Arial, Helvetica, clean, sans-serif;}#yiv1194420150 #yiv1194420150ygrp-mlmsg pre, #yiv1194420150 code {font:115% monospace;}#yiv1194420150 #yiv1194420150ygrp-mlmsg * {line-height:1.22em;}#yiv1194420150 #yiv1194420150ygrp-mlmsg #yiv1194420150logo {padding-bottom:10px;}#yiv1194420150 #yiv1194420150ygrp-msg p a {font-family:Verdana;}#yiv1194420150 #yiv1194420150ygrp-msg p#yiv1194420150attach-count span {color:#1E66AE;font-weight:700;}#yiv1194420150 #yiv1194420150ygrp-reco #yiv1194420150reco-head {color:#ff7900;font-weight:700;}#yiv1194420150 #yiv1194420150ygrp-reco {margin-bottom:20px;padding:0px;}#yiv1194420150 #yiv1194420150ygrp-sponsor #yiv1194420150ov li a {font-size:130%;text-decoration:none;}#yiv1194420150 #yiv1194420150ygrp-sponsor #yiv1194420150ov li {font-size:77%;list-style-type:square;padding:6px 0;}#yiv1194420150 #yiv1194420150ygrp-sponsor #yiv1194420150ov ul {margin:0;padding:0 0 0 8px;}#yiv1194420150 #yiv1194420150ygrp-text {font-family:Georgia;}#yiv1194420150 #yiv1194420150ygrp-text p {margin:0 0 1em 0;}#yiv1194420150 #yiv1194420150ygrp-text tt {font-size:120%;}#yiv1194420150 #yiv1194420150ygrp-vital ul li:last-child {border-right:none !important;}#yiv1194420150

   
Reply | Threaded
Open this post in threaded view
|

Re: circular image in flex

FlexCoders mailing list
In reply to this post by FlexCoders mailing list
The guy who said that killing flex was crime well I will say it was more
than a crime and a pathetic one the technologies should not be shape
shifted this way.

Still there is no camparison to the pixel perfection of the Flash/Flex
platform. JavaScript can't promise the crispness sharpness and clarity of
Flash platform. The killed it simply. There was a time when this group
wasn't such quite now there's nothing like before... Alex(Flex) Haurui was
always there... This thing itself signifys that how much devs moved on to
other web/mobile platforms. It really disappointed Flex devs a lot...

Anyways wish u all the best.

On Aug 10, 2016 1:20 PM, "[hidden email] [flexcoders]" <
[hidden email]> wrote:
>
>
>
> Hello guys, i am trying to create a circular mask for an image control so
that the picture can be circular. Here is my code so far.

>
>
> <?xml version="1.0" encoding="utf-8"?>
>
> <mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml"
>
>   width="180"
>
>   height="180"
>
>   initialize="init();">
>
>
> <mx:Script>
>
> <![CDATA[
>
> import mx.events.ResizeEvent;
>
>
> private var roundedMask:Sprite;
>
>
> private function init():void
>
> {
>
> roundedMask=new Sprite();
>
> this.rawChildren.addChild(roundedMask);
>
> }
>
>
> private function image_resize(evt:ResizeEvent):void
>
> {
>
> roundedMask.graphics.clear();
>
> roundedMask.graphics.beginFill(0xFF0000);
>
> roundedMask.graphics.drawCircle(stage.stageWidth / 2, stage.stageHeight /
2, 90);

>
> roundedMask.graphics.endFill();
>
> image.mask=roundedMask;
>
> }
>
> ]]>
>
> </mx:Script>
>
>
> <mx:Image id="image"
>
>  source="http://www.helpexamples.com/flash/images/image1.jpg"
>
>  resize="image_resize(event);">
>
> </mx:Image>
>
>
> </mx:Canvas>
>
>
>
> the image is not the way i want it. Could someone please help
>
>
>
Reply | Threaded
Open this post in threaded view
|

Re: circular image in flex

FlexCoders mailing list
Whats interesting is most people never even looked at the  motivation.My last Flex project ran beautifully on everything.Flex threatened to completely eliminate the differences between Mac and Windows for the user.It threatened to kill Mac or at least cause a price reduction.THAT'S why Steve Jobs killed flash.and the world as usual, ran off the cliff like a herd of lemmings.
 Dan Pride
1-303-800-0900 - Skype No Texting1-360-850-9322 Mobile
http://danielpride.com
www.linkedin.com/in/danielpride/http://archaeolibrary.com/https://headlessuber.com





      From: "Mr Nobody [hidden email] [flexcoders]" <[hidden email]>
 To: [hidden email]
 Sent: Wednesday, August 10, 2016 5:57 PM
 Subject: Re: [flexcoders] circular image in flex
   
    The guy who said that killing flex was crime well I will say it was more than a crime and a pathetic one the technologies should not be shape shifted this way.Still there is no camparison to the pixel perfection of the Flash/Flex platform. JavaScript can't promise the crispness sharpness and clarity of Flash platform. The killed it simply. There was a time when this group wasn't such quite now there's nothing like before... Alex(Flex) Haurui was always there... This thing itself signifys that how much devs moved on to other web/mobile platforms. It really disappointed Flex devs a lot...Anyways wish u all the best.
On Aug 10, 2016 1:20 PM, "[hidden email] [flexcoders]" <[hidden email]> wrote:

>
>  
>
> Hello guys, i am trying to create a circular mask for an image control so that the picture can be circular. Here is my code so far. 
>
>
> <?xml version="1.0" encoding="utf-8"?>
>
> <mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml"
>
>   width="180"
>
>   height="180"
>
>   initialize="init();">
>
>
> <mx:Script>
>
> <![CDATA[
>
> import mx.events.ResizeEvent;
>
>
> private var roundedMask:Sprite;
>
>
> private function init():void
>
> {
>
> roundedMask=new Sprite();
>
> this.rawChildren.addChild(roundedMask);
>
> }
>
>
> private function image_resize(evt:ResizeEvent):void
>
> {
>
> roundedMask.graphics.clear();
>
> roundedMask.graphics.beginFill(0xFF0000);
>
> roundedMask.graphics.drawCircle(stage.stageWidth / 2, stage.stageHeight / 2, 90);
>
> roundedMask.graphics.endFill();
>
> image.mask=roundedMask;
>
> }
>
> ]]>
>
> </mx:Script>
>
>
> <mx:Image id="image"
>
>  source="http://www.helpexamples.com/flash/images/image1.jpg"
>
>  resize="image_resize(event);">
>
> </mx:Image>
>
>
> </mx:Canvas>
>
>  
>
> the image is not the way i want it. Could someone please help
>
>
>
  #yiv8529288441 #yiv8529288441 -- #yiv8529288441ygrp-mkp {border:1px solid #d8d8d8;font-family:Arial;margin:10px 0;padding:0 10px;}#yiv8529288441 #yiv8529288441ygrp-mkp hr {border:1px solid #d8d8d8;}#yiv8529288441 #yiv8529288441ygrp-mkp #yiv8529288441hd {color:#628c2a;font-size:85%;font-weight:700;line-height:122%;margin:10px 0;}#yiv8529288441 #yiv8529288441ygrp-mkp #yiv8529288441ads {margin-bottom:10px;}#yiv8529288441 #yiv8529288441ygrp-mkp .yiv8529288441ad {padding:0 0;}#yiv8529288441 #yiv8529288441ygrp-mkp .yiv8529288441ad p {margin:0;}#yiv8529288441 #yiv8529288441ygrp-mkp .yiv8529288441ad a {color:#0000ff;text-decoration:none;}#yiv8529288441 #yiv8529288441ygrp-sponsor #yiv8529288441ygrp-lc {font-family:Arial;}#yiv8529288441 #yiv8529288441ygrp-sponsor #yiv8529288441ygrp-lc #yiv8529288441hd {margin:10px 0px;font-weight:700;font-size:78%;line-height:122%;}#yiv8529288441 #yiv8529288441ygrp-sponsor #yiv8529288441ygrp-lc .yiv8529288441ad {margin-bottom:10px;padding:0 0;}#yiv8529288441 #yiv8529288441actions {font-family:Verdana;font-size:11px;padding:10px 0;}#yiv8529288441 #yiv8529288441activity {background-color:#e0ecee;float:left;font-family:Verdana;font-size:10px;padding:10px;}#yiv8529288441 #yiv8529288441activity span {font-weight:700;}#yiv8529288441 #yiv8529288441activity span:first-child {text-transform:uppercase;}#yiv8529288441 #yiv8529288441activity span a {color:#5085b6;text-decoration:none;}#yiv8529288441 #yiv8529288441activity span span {color:#ff7900;}#yiv8529288441 #yiv8529288441activity span .yiv8529288441underline {text-decoration:underline;}#yiv8529288441 .yiv8529288441attach {clear:both;display:table;font-family:Arial;font-size:12px;padding:10px 0;width:400px;}#yiv8529288441 .yiv8529288441attach div a {text-decoration:none;}#yiv8529288441 .yiv8529288441attach img {border:none;padding-right:5px;}#yiv8529288441 .yiv8529288441attach label {display:block;margin-bottom:5px;}#yiv8529288441 .yiv8529288441attach label a {text-decoration:none;}#yiv8529288441 blockquote {margin:0 0 0 4px;}#yiv8529288441 .yiv8529288441bold {font-family:Arial;font-size:13px;font-weight:700;}#yiv8529288441 .yiv8529288441bold a {text-decoration:none;}#yiv8529288441 dd.yiv8529288441last p a {font-family:Verdana;font-weight:700;}#yiv8529288441 dd.yiv8529288441last p span {margin-right:10px;font-family:Verdana;font-weight:700;}#yiv8529288441 dd.yiv8529288441last p span.yiv8529288441yshortcuts {margin-right:0;}#yiv8529288441 div.yiv8529288441attach-table div div a {text-decoration:none;}#yiv8529288441 div.yiv8529288441attach-table {width:400px;}#yiv8529288441 div.yiv8529288441file-title a, #yiv8529288441 div.yiv8529288441file-title a:active, #yiv8529288441 div.yiv8529288441file-title a:hover, #yiv8529288441 div.yiv8529288441file-title a:visited {text-decoration:none;}#yiv8529288441 div.yiv8529288441photo-title a, #yiv8529288441 div.yiv8529288441photo-title a:active, #yiv8529288441 div.yiv8529288441photo-title a:hover, #yiv8529288441 div.yiv8529288441photo-title a:visited {text-decoration:none;}#yiv8529288441 div#yiv8529288441ygrp-mlmsg #yiv8529288441ygrp-msg p a span.yiv8529288441yshortcuts {font-family:Verdana;font-size:10px;font-weight:normal;}#yiv8529288441 .yiv8529288441green {color:#628c2a;}#yiv8529288441 .yiv8529288441MsoNormal {margin:0 0 0 0;}#yiv8529288441 o {font-size:0;}#yiv8529288441 #yiv8529288441photos div {float:left;width:72px;}#yiv8529288441 #yiv8529288441photos div div {border:1px solid #666666;min-height:62px;overflow:hidden;width:62px;}#yiv8529288441 #yiv8529288441photos div label {color:#666666;font-size:10px;overflow:hidden;text-align:center;white-space:nowrap;width:64px;}#yiv8529288441 #yiv8529288441reco-category {font-size:77%;}#yiv8529288441 #yiv8529288441reco-desc {font-size:77%;}#yiv8529288441 .yiv8529288441replbq {margin:4px;}#yiv8529288441 #yiv8529288441ygrp-actbar div a:first-child {margin-right:2px;padding-right:5px;}#yiv8529288441 #yiv8529288441ygrp-mlmsg {font-size:13px;font-family:Arial, helvetica, clean, sans-serif;}#yiv8529288441 #yiv8529288441ygrp-mlmsg table {font-size:inherit;font:100%;}#yiv8529288441 #yiv8529288441ygrp-mlmsg select, #yiv8529288441 input, #yiv8529288441 textarea {font:99% Arial, Helvetica, clean, sans-serif;}#yiv8529288441 #yiv8529288441ygrp-mlmsg pre, #yiv8529288441 code {font:115% monospace;}#yiv8529288441 #yiv8529288441ygrp-mlmsg * {line-height:1.22em;}#yiv8529288441 #yiv8529288441ygrp-mlmsg #yiv8529288441logo {padding-bottom:10px;}#yiv8529288441 #yiv8529288441ygrp-msg p a {font-family:Verdana;}#yiv8529288441 #yiv8529288441ygrp-msg p#yiv8529288441attach-count span {color:#1E66AE;font-weight:700;}#yiv8529288441 #yiv8529288441ygrp-reco #yiv8529288441reco-head {color:#ff7900;font-weight:700;}#yiv8529288441 #yiv8529288441ygrp-reco {margin-bottom:20px;padding:0px;}#yiv8529288441 #yiv8529288441ygrp-sponsor #yiv8529288441ov li a {font-size:130%;text-decoration:none;}#yiv8529288441 #yiv8529288441ygrp-sponsor #yiv8529288441ov li {font-size:77%;list-style-type:square;padding:6px 0;}#yiv8529288441 #yiv8529288441ygrp-sponsor #yiv8529288441ov ul {margin:0;padding:0 0 0 8px;}#yiv8529288441 #yiv8529288441ygrp-text {font-family:Georgia;}#yiv8529288441 #yiv8529288441ygrp-text p {margin:0 0 1em 0;}#yiv8529288441 #yiv8529288441ygrp-text tt {font-size:120%;}#yiv8529288441 #yiv8529288441ygrp-vital ul li:last-child {border-right:none !important;}#yiv8529288441

   
Reply | Threaded
Open this post in threaded view
|

Re: circular image in flex

FlexCoders mailing list
In reply to this post by FlexCoders mailing list
You are right.

But Flex is not dead. It is an Apache project. And still evolving. It
became Apache in version 4.7 and is now version 4.19.



Le 11/08/2016 à 02:57, Mr Nobody [hidden email] [flexcoders] a
écrit :

>
> The guy who said that killing flex was crime well I will say it was
> more than a crime and a pathetic one the technologies should not be
> shape shifted this way.
>
> Still there is no camparison to the pixel perfection of the Flash/Flex
> platform. JavaScript can't promise the crispness sharpness and clarity
> of Flash platform. The killed it simply. There was a time when this
> group wasn't such quite now there's nothing like before... Alex(Flex)
> Haurui was always there... This thing itself signifys that how much
> devs moved on to other web/mobile platforms. It really disappointed
> Flex devs a lot...
>
> Anyways wish u all the best.
>
> On Aug 10, 2016 1:20 PM, "[hidden email]
> <mailto:[hidden email]> [flexcoders]" <[hidden email]
> <mailto:[hidden email]>> wrote:
> >
> >
> >
> > Hello guys, i am trying to create a circular mask for an image
> control so that the picture can be circular. Here is my code so far.
> >
> >
> > <?xml version="1.0" encoding="utf-8"?>
> >
> > <mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml"
> >
> >   width="180"
> >
> >   height="180"
> >
> >   initialize="init();">
> >
> >
> > <mx:Script>
> >
> > <![CDATA[
> >
> > import mx.events.ResizeEvent;
> >
> >
> > private var roundedMask:Sprite;
> >
> >
> > private function init():void
> >
> > {
> >
> > roundedMask=new Sprite();
> >
> > this.rawChildren.addChild(roundedMask);
> >
> > }
> >
> >
> > private function image_resize(evt:ResizeEvent):void
> >
> > {
> >
> > roundedMask.graphics.clear();
> >
> > roundedMask.graphics.beginFill(0xFF0000);
> >
> > roundedMask.graphics.drawCircle(stage.stageWidth / 2,
> stage.stageHeight / 2, 90);
> >
> > roundedMask.graphics.endFill();
> >
> > image.mask=roundedMask;
> >
> > }
> >
> > ]]>
> >
> > </mx:Script>
> >
> >
> > <mx:Image id="image"
> >
> >  source="http://www.helpexamples.com/flash/images/image1.jpg"
> >
> >  resize="image_resize(event);">
> >
> > </mx:Image>
> >
> >
> > </mx:Canvas>
> >
> >
> >
> > the image is not the way i want it. Could someone please help
> >
> >
> >
>
>


Reply | Threaded
Open this post in threaded view
|

Re: circular image in flex

FlexCoders mailing list
Hello Ernest, this draws a rectangle with rounded boarders and a mask. I would like to have a circle used a a mask for an image, more like the way display pictures appear on whatsapp
<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/09/09/rounding-the-corners-of-an-image-control-in-flex-using-a-mask/ -->
<mx:Application name="Image_mask_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white"
        initialize="init();">
 
    <mx:Script>
        <![CDATA[
            import mx.events.ResizeEvent;
 
            private var roundedMask:Sprite;
 
            private function init():void {
                roundedMask = new Sprite();
                canvas.rawChildren.addChild(roundedMask);
            }
 
            private function image_resize(evt:ResizeEvent):void {
                var w:Number = evt.currentTarget.width;
                var h:Number = evt.currentTarget.height;
                var cornerRadius:uint = 60;
                roundedMask.graphics.clear();
                roundedMask.graphics.beginFill(0xFF0000);
                roundedMask.graphics.drawRoundRect(0, 0,
                            w, h,
                            cornerRadius, cornerRadius);
                roundedMask.graphics.endFill();
                image.mask = roundedMask;
            }
        ]]>
    </mx:Script>
 
    <mx:Canvas id="canvas">
        <mx:Image id="image"
                source="http://www.helpexamples.com/flash/images/image1.jpg"
                resize="image_resize(event);">
        </mx:Image>
    </mx:Canvas>
 
</mx:Application>

 

    On Saturday, August 13, 2016 12:34 AM, "Hervé Crespel [hidden email] [flexcoders]" <[hidden email]> wrote:
 

      You are right.
 
 But Flex is not dead. It is an Apache project. And still evolving. It became Apache in version 4.7 and is now version 4.19.
 
 
 
 Le 11/08/2016 à 02:57, Mr Nobody [hidden email] [flexcoders] a écrit :
 
    The guy who said that killing flex was crime well I will say it was more than a crime and a pathetic one the technologies should not be shape shifted this way. Still there is no camparison to the pixel perfection of the Flash/Flex platform. JavaScript can't promise the crispness sharpness and clarity of Flash  platform. The killed it simply. There was a time when this group wasn't such quite now there's nothing like before... Alex(Flex) Haurui was always there... This thing itself signifys that how much devs moved on to other web/mobile platforms. It really disappointed Flex devs a lot... Anyways wish u all the best.
  On Aug 10, 2016 1:20 PM, "[hidden email] [flexcoders]" <[hidden email]> wrote:
 >
 >  
 >
 > Hello guys, i am trying to create a circular mask for an image control so that the picture can be circular. Here is my code so far. 
 >
 >
 > <?xml version="1.0" encoding="utf-8"?>
 >
 > <mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml"
 >
 >   width="180"
 >
 >   height="180"
 >
 >   initialize="init();">
 >
 >
 > <mx:Script>
 >
 > <![CDATA[
 >
 > import mx.events.ResizeEvent;
 >
 >
 > private var roundedMask:Sprite;
 >
 >
 > private function init():void
 >
 > {
 >
 > roundedMask=new Sprite();
 >
 > this.rawChildren.addChild(roundedMask);
 >
 > }
 >
 >
 > private function image_resize(evt:ResizeEvent):void
 >
 > {
 >
 > roundedMask.graphics.clear();
 >
 > roundedMask.graphics.beginFill(0xFF0000);
 >
 > roundedMask.graphics.drawCircle(stage.stageWidth / 2, stage.stageHeight / 2, 90);
 >
 > roundedMask.graphics.endFill();
 >
 > image.mask=roundedMask;
 >
 > }
 >
 > ]]>
 >
 > </mx:Script>
 >
 >
 > <mx:Image id="image"
 >
 >  source="http://www.helpexamples.com/flash/images/image1.jpg"
 >
 >  resize="image_resize(event);">
 >
 > </mx:Image>
 >
 >
 > </mx:Canvas>
 >
 >  
 >
 > the image is not the way i want it. Could someone please help
 >
 >
 >
   
 
   #yiv4039539360 #yiv4039539360 -- #yiv4039539360ygrp-mkp {border:1px solid #d8d8d8;font-family:Arial;margin:10px 0;padding:0 10px;}#yiv4039539360 #yiv4039539360ygrp-mkp hr {border:1px solid #d8d8d8;}#yiv4039539360 #yiv4039539360ygrp-mkp #yiv4039539360hd {color:#628c2a;font-size:85%;font-weight:700;line-height:122%;margin:10px 0;}#yiv4039539360 #yiv4039539360ygrp-mkp #yiv4039539360ads {margin-bottom:10px;}#yiv4039539360 #yiv4039539360ygrp-mkp .yiv4039539360ad {padding:0 0;}#yiv4039539360 #yiv4039539360ygrp-mkp .yiv4039539360ad p {margin:0;}#yiv4039539360 #yiv4039539360ygrp-mkp .yiv4039539360ad a {color:#0000ff;text-decoration:none;}#yiv4039539360 #yiv4039539360ygrp-sponsor #yiv4039539360ygrp-lc {font-family:Arial;}#yiv4039539360 #yiv4039539360ygrp-sponsor #yiv4039539360ygrp-lc #yiv4039539360hd {margin:10px 0px;font-weight:700;font-size:78%;line-height:122%;}#yiv4039539360 #yiv4039539360ygrp-sponsor #yiv4039539360ygrp-lc .yiv4039539360ad {margin-bottom:10px;padding:0 0;}#yiv4039539360 #yiv4039539360actions {font-family:Verdana;font-size:11px;padding:10px 0;}#yiv4039539360 #yiv4039539360activity {background-color:#e0ecee;float:left;font-family:Verdana;font-size:10px;padding:10px;}#yiv4039539360 #yiv4039539360activity span {font-weight:700;}#yiv4039539360 #yiv4039539360activity span:first-child {text-transform:uppercase;}#yiv4039539360 #yiv4039539360activity span a {color:#5085b6;text-decoration:none;}#yiv4039539360 #yiv4039539360activity span span {color:#ff7900;}#yiv4039539360 #yiv4039539360activity span .yiv4039539360underline {text-decoration:underline;}#yiv4039539360 .yiv4039539360attach {clear:both;display:table;font-family:Arial;font-size:12px;padding:10px 0;width:400px;}#yiv4039539360 .yiv4039539360attach div a {text-decoration:none;}#yiv4039539360 .yiv4039539360attach img {border:none;padding-right:5px;}#yiv4039539360 .yiv4039539360attach label {display:block;margin-bottom:5px;}#yiv4039539360 .yiv4039539360attach label a {text-decoration:none;}#yiv4039539360 blockquote {margin:0 0 0 4px;}#yiv4039539360 .yiv4039539360bold {font-family:Arial;font-size:13px;font-weight:700;}#yiv4039539360 .yiv4039539360bold a {text-decoration:none;}#yiv4039539360 dd.yiv4039539360last p a {font-family:Verdana;font-weight:700;}#yiv4039539360 dd.yiv4039539360last p span {margin-right:10px;font-family:Verdana;font-weight:700;}#yiv4039539360 dd.yiv4039539360last p span.yiv4039539360yshortcuts {margin-right:0;}#yiv4039539360 div.yiv4039539360attach-table div div a {text-decoration:none;}#yiv4039539360 div.yiv4039539360attach-table {width:400px;}#yiv4039539360 div.yiv4039539360file-title a, #yiv4039539360 div.yiv4039539360file-title a:active, #yiv4039539360 div.yiv4039539360file-title a:hover, #yiv4039539360 div.yiv4039539360file-title a:visited {text-decoration:none;}#yiv4039539360 div.yiv4039539360photo-title a, #yiv4039539360 div.yiv4039539360photo-title a:active, #yiv4039539360 div.yiv4039539360photo-title a:hover, #yiv4039539360 div.yiv4039539360photo-title a:visited {text-decoration:none;}#yiv4039539360 div#yiv4039539360ygrp-mlmsg #yiv4039539360ygrp-msg p a span.yiv4039539360yshortcuts {font-family:Verdana;font-size:10px;font-weight:normal;}#yiv4039539360 .yiv4039539360green {color:#628c2a;}#yiv4039539360 .yiv4039539360MsoNormal {margin:0 0 0 0;}#yiv4039539360 o {font-size:0;}#yiv4039539360 #yiv4039539360photos div {float:left;width:72px;}#yiv4039539360 #yiv4039539360photos div div {border:1px solid #666666;min-height:62px;overflow:hidden;width:62px;}#yiv4039539360 #yiv4039539360photos div label {color:#666666;font-size:10px;overflow:hidden;text-align:center;white-space:nowrap;width:64px;}#yiv4039539360 #yiv4039539360reco-category {font-size:77%;}#yiv4039539360 #yiv4039539360reco-desc {font-size:77%;}#yiv4039539360 .yiv4039539360replbq {margin:4px;}#yiv4039539360 #yiv4039539360ygrp-actbar div a:first-child {margin-right:2px;padding-right:5px;}#yiv4039539360 #yiv4039539360ygrp-mlmsg {font-size:13px;font-family:Arial, helvetica, clean, sans-serif;}#yiv4039539360 #yiv4039539360ygrp-mlmsg table {font-size:inherit;font:100%;}#yiv4039539360 #yiv4039539360ygrp-mlmsg select, #yiv4039539360 input, #yiv4039539360 textarea {font:99% Arial, Helvetica, clean, sans-serif;}#yiv4039539360 #yiv4039539360ygrp-mlmsg pre, #yiv4039539360 code {font:115% monospace;}#yiv4039539360 #yiv4039539360ygrp-mlmsg * {line-height:1.22em;}#yiv4039539360 #yiv4039539360ygrp-mlmsg #yiv4039539360logo {padding-bottom:10px;}#yiv4039539360 #yiv4039539360ygrp-msg p a {font-family:Verdana;}#yiv4039539360 #yiv4039539360ygrp-msg p#yiv4039539360attach-count span {color:#1E66AE;font-weight:700;}#yiv4039539360 #yiv4039539360ygrp-reco #yiv4039539360reco-head {color:#ff7900;font-weight:700;}#yiv4039539360 #yiv4039539360ygrp-reco {margin-bottom:20px;padding:0px;}#yiv4039539360 #yiv4039539360ygrp-sponsor #yiv4039539360ov li a {font-size:130%;text-decoration:none;}#yiv4039539360 #yiv4039539360ygrp-sponsor #yiv4039539360ov li {font-size:77%;list-style-type:square;padding:6px 0;}#yiv4039539360 #yiv4039539360ygrp-sponsor #yiv4039539360ov ul {margin:0;padding:0 0 0 8px;}#yiv4039539360 #yiv4039539360ygrp-text {font-family:Georgia;}#yiv4039539360 #yiv4039539360ygrp-text p {margin:0 0 1em 0;}#yiv4039539360 #yiv4039539360ygrp-text tt {font-size:120%;}#yiv4039539360 #yiv4039539360ygrp-vital ul li:last-child {border-right:none !important;}#yiv4039539360