You are viewing a plain text version of this content. The canonical link for it is here.
Posted to users@flex.apache.org by skvsarathyourfriend <sk...@gmail.com> on 2014/07/23 11:51:44 UTC

Cropping in flex

Hello all,
I wanna crop an image and upload it. I want to show the area for cropping. I
am using mask for image. but it is not as excpected. Here is my code for
that

*
<s:Group maskType="alpha" width="100%" height="100%">
		<s:Group id="imageMask" x="{_postedImage.width/3}"
y="{_postedImage.height/3}" width="129" height="123" alpha="0.1">
			<s:Rect width="129" height="123">
				<s:fill>
					<s:SolidColor color="0x00FFFF"/>
				</s:fill>
			</s:Rect>
		</s:Group>
	<s:Image id="_postedImage" width="100%" height="100%" smooth="true"
mask="{imageMask}" alpha="0.5"
			 source="@Embed('assets/DSC00308.JPG')"/>*

<http://apache-flex-users.2333346.n4.nabble.com/file/n7372/Untitled.png> 


But i need tho implement lik this
<http://apache-flex-users.2333346.n4.nabble.com/file/n7372/Screen_Shot_2014-07-23_at_3.png> 

How can i get that one implemented. Please help me.
Thanks



--
View this message in context: http://apache-flex-users.2333346.n4.nabble.com/Cropping-in-flex-tp7372.html
Sent from the Apache Flex Users mailing list archive at Nabble.com.

Re: Cropping in flex

Posted by Chris Martin <wi...@gmail.com>.
You could probably use mouse click events to render a custom selector
component on top of the image. The selector component would probably be
just a simple rectangle grouped with four tiny rectangles one in each
corner.  Then use drag events on each of the tiny rectangles to perform the
resizing of the main selector rectangle.

Once you got everything the way you want it, you'll then know (by position
and size of the rectangle) where to crop the main image.

That's just an idea. Hope that helps

Chris


On Wed, Jul 23, 2014 at 2:51 AM, skvsarathyourfriend <
skvsarathyourfriend@gmail.com> wrote:

> Hello all,
> I wanna crop an image and upload it. I want to show the area for cropping.
> I
> am using mask for image. but it is not as excpected. Here is my code for
> that
>
> *
> <s:Group maskType="alpha" width="100%" height="100%">
>                 <s:Group id="imageMask" x="{_postedImage.width/3}"
> y="{_postedImage.height/3}" width="129" height="123" alpha="0.1">
>                         <s:Rect width="129" height="123">
>                                 <s:fill>
>                                         <s:SolidColor color="0x00FFFF"/>
>                                 </s:fill>
>                         </s:Rect>
>                 </s:Group>
>         <s:Image id="_postedImage" width="100%" height="100%" smooth="true"
> mask="{imageMask}" alpha="0.5"
>                          source="@Embed('assets/DSC00308.JPG')"/>*
>
> <http://apache-flex-users.2333346.n4.nabble.com/file/n7372/Untitled.png>
>
>
> But i need tho implement lik this
> <
> http://apache-flex-users.2333346.n4.nabble.com/file/n7372/Screen_Shot_2014-07-23_at_3.png
> >
>
> How can i get that one implemented. Please help me.
> Thanks
>
>
>
> --
> View this message in context:
> http://apache-flex-users.2333346.n4.nabble.com/Cropping-in-flex-tp7372.html
> Sent from the Apache Flex Users mailing list archive at Nabble.com.
>

Re: Cropping in flex

Posted by Evyatar Ben Halevi-Arbib <ev...@gmail.com>.
You can review this example for ideas -
http://www.flexer.info/2008/10/16/how-to-crop-and-resize-an-image-used-as-background-for-canvas/

It's a bit old, but some concepts might still be relevant.

Good luck,
Evyatar


On Wed, Jul 23, 2014 at 12:51 PM, skvsarathyourfriend <
skvsarathyourfriend@gmail.com> wrote:

> Hello all,
> I wanna crop an image and upload it. I want to show the area for cropping.
> I
> am using mask for image. but it is not as excpected. Here is my code for
> that
>
> *
> <s:Group maskType="alpha" width="100%" height="100%">
>                 <s:Group id="imageMask" x="{_postedImage.width/3}"
> y="{_postedImage.height/3}" width="129" height="123" alpha="0.1">
>                         <s:Rect width="129" height="123">
>                                 <s:fill>
>                                         <s:SolidColor color="0x00FFFF"/>
>                                 </s:fill>
>                         </s:Rect>
>                 </s:Group>
>         <s:Image id="_postedImage" width="100%" height="100%" smooth="true"
> mask="{imageMask}" alpha="0.5"
>                          source="@Embed('assets/DSC00308.JPG')"/>*
>
> <http://apache-flex-users.2333346.n4.nabble.com/file/n7372/Untitled.png>
>
>
> But i need tho implement lik this
> <
> http://apache-flex-users.2333346.n4.nabble.com/file/n7372/Screen_Shot_2014-07-23_at_3.png
> >
>
> How can i get that one implemented. Please help me.
> Thanks
>
>
>
> --
> View this message in context:
> http://apache-flex-users.2333346.n4.nabble.com/Cropping-in-flex-tp7372.html
> Sent from the Apache Flex Users mailing list archive at Nabble.com.
>