ActionScript 3.0 :: Draw Rectangle With Only 2 Rounded Corners?
May 23, 2009is it possible to draw a rectangle specifying which corners should be rounded and which not in a simple manner?
View 3 Repliesis it possible to draw a rectangle specifying which corners should be rounded and which not in a simple manner?
View 3 RepliesI'm trying to get plain straight corners on a rectangel. I have been drawing a rectangle or even before drawing one, selecting the little tool in the lower left and I put in a value of 0, but as soon as I draw anything it rounds up again. How do I get rid of this problem??
View 2 RepliesIt's easy to draw a round cornered rectangle/square but how do you draw a triangle with rounded corners?
View 4 RepliesI need to draw a box with rounded corners. I can't get a hang of it. I want to draw it from the following variables:
boxwidth = 200;
boxheight = 200;
radius = 5;
How do I draw this? You should see the artwork I have (by mistake) created while trying to get it right.
Is there a simple way to draw a triangle with rounded corners in AS3?
View 1 RepliesDraw a Triangle with rounded corners?
View 2 RepliesMy idea was to create a method for drawing rectangle with rounded corners, but while being able to specify which of the four corners (any, all, none,etc.) you wanted to round. The method below does the trick, but for some reason my corners don't match the same curves that I get using the same radius with drawRoundRect(). In other words, if I call my method (and set all four corners to be rounded) and compare that with the same call to drawRoundRect() the actual curves of the corners are slightly different.
HTML Code:
public function drawComplexRoundedRect(startX:int,startY:int,rectWidth:int,rectHeight:int,radius:int,canvas:Sprite,roundTopLeft:Boolean=false,roundTopRight:Boolean=false,roundBottomLeft:Boolean=false,roundBottomRight:Boolean=false):void{
if(roundTopLeft){
canvas.graphics.moveTo(startX,(startY+radius));
[Code] .....
Then compare
HTML Code:
var canvas:Sprite = new Sprite;
drawComplexRoundedRect(0,0,200,200,25,canvas,true,true,true,true);
with
HTML Code:
var canvas:Sprite = new Sprite;
canvas.drawRoundRect(0,0,200,200,25);
and you will see the two rectangles are not identical.
When I use <s:Rect> to create a rectangle, I use radiusX to get rounded corners. Problem is all are the same roundedness. Is there something similar to Rect that lets me control the radius for each corner separately? If not, what's the best way to create this from scratch? graphics library or what?
View 3 RepliesI've created a rectangle in catalyst and under the "properties" panel, all I can see is Corners 10 for the rectangle. Is there a way to individually define each corner similar to CSS. I can't see any source code view in catalyst to enable me to fine tune it for each of the 4 corners. How do I specify the roundedness of each corner separately?
View 1 Replieshow can i get a title window with all rounded corners, so that i may make it whole round or circular shape ?
View 2 RepliesI'm making a flex 3.5a/air2 application and I've made a popup window but I can't seem to get its bottom corners rounded. Setting cornerRadius seems to only affect the top corners. There doesn't seem to be a roundedBottomCorners property like there is for panels, and adding a controlbar with a cornerRadius also has no effect.
View 2 RepliesI have a bookmarklet that has rounded corners. When using the bookmarklet over the top of a flash website and even a pdf document (I think) etc. Rounded corners appear as transparent squares.
View 1 RepliesI was wondering how to use the container .swf required by Flash Satay to also display rounded corners of a fixed size.
View 1 Repliesi have been tasked to create a rollover state that has dynamic irregular shapes that surround the movieclip target. The target is always a rectangle and the shapes will look roughly like:I think i will have to draw this old school without using the easy predfined shape classes. I first thought about doing two rounded rectangles to fake it, but the line cross over (pointing green arrow) will overlap. Anyone have ideas on how to approach this? If i go with the drawing api, is there a formula to working out the rounded curveTo angles on the corners to always be the same radius?
View 2 RepliesI'm trying to create an HBox in flex that has only the top corners rounded. HBox (and all the other flex containers) have a cornerRadius style, but it applies to all corners. I'm not seeing a way to specify the style of individual corners.
Is there any built-in way to do this, or will I need to write my own custom drawing code to draw the background with rounded corners?
In my application,showFlexChrome is set as true in WindowedApplication,and the *-app.xml is setted as follows
<systemChrome>none</systemChrome>
<transparent>true</transparent>
<visible>true</visible>
I know how to make the top border rounded corners with follow codes:
borderStyle="solid" cornerRadius="8"
But I cannot find a method to make the bottom border of my app window rounded-corner.
I have a mx.components.List component with a bunch of custom styles:
<mx:Style>
.dropDownListStyle
{
[code]....
I'm creating the list in AS:
_dropDown = new List();
...
_dropDown.styleName = "dropDownListStyle";
The List is then added as a popup with PopUpManager:
PopUpManager.addPopUp( _dropDown, this );
The problem is that the corners of the newly created popup are not rounded. I found that border-style is needed in order to get the effect, but adding this property didn't help. I'm building the project with Flex 4.1, but the List and its parent are MX components and it's a lot of work to migrate them to Spark.
I wanted to change the background color of my Panel title area and I discovered that I needed to create custom skin or skin extender to accomplish this. So I created a skin called myPanelSkin based upon the Spark.PanelSkin. My background color works fine but it will no longer show the cornerRadius defined either on the component or in a styleI then tried another approach and simply created a new skin as an exact copy of the Spark.PanelSkin. It also looses the cornerRadius.
View 2 RepliesI am trying to scale9grid a button to preserve its rounded corners when resizing but I have run into trouble.The button is an ordinary Button symbol and it has 4 layered states (Up, Down, Over, Hit).In each layer there are some shapes (the outer button border, two background shapes inside the button for shading and then some extra outer border shapes to create the pressed down effect). The button contains no other elements,not even a textfield (the textfield is on the same level as the button).
The button is inside a movieclip (which also carries the textfield) that is of the same size as the button and is resized as by Adobe design when the button is resized (i.e. I am never manipulating its size).The Button is 35 high and the textfield is 25 high. They have their registration points both centered and placed at the the same coordinate.I use the follow code to resize and scale9grid the button:
popup.btnLoginButton.width = popup.btnLoginText.width + 20;
popup.btnLoginButton.scale9Grid = new Rectangle(10, 5, popup.btnLoginText.width, 15);
The above scale9Grid throws a Error #2004: One of the parameters is invalid.The same error occurs unless the Rectangle parameters are very small - for example Rectangle(5, 5, 5, 5) even though the textfield is much longer. But when the Rectangle is that small of course no scale9grid scaling is taking place.
I have a photo in a Flex project[code]...
But now I'm wondering if I can make this image as the image below, in Flex (4 / 4.5 / 4.6) (in MXML and/or ActionScript 3)
I would like to tween between a short rounded rectangle and a tall rounded rectangle. (I only want deal with the height - no other parameters). I am programming with ActionScript 3. My tweening engine is TweenLite.I have been tweening a sprite that contains a rounded rectangle. The tweened sprite produces distortion. I suppose that I have been scaling the original image, rather than the height of the rounded rectangle?Here is a simple example of my code:
Draw the rounded rectangle:
roundRect = new Sprite();roundRect.graphics.beginFill(0x000000);roundRect.graphics.drawRoundRect(0,0,50,15,4,4); //Original Height: 15roundRect.graphics.endFill();addChild(roundRect);
Then I listen for a mouse click event on the rounded rectangle.The mouse event triggers a function with the following code:
TweenLite.to(this.roundRect, 1, {height:120}); //Final Height: 120
I would like to tween the height of the rounded rectangle itself. I would hope that this would not produce the unwanted distortion.
i'm in the middle of attempting to write my own collision detection algorithm because the built in 'hitTestObject' function seems to be incredibly inaccurate (it's registering 'hits' when the objects are still a considerable distance from each other).I need to be able to calculate the position of each of the 4 corners of a rectangle, based on its rotation. Obviously one of the corners will simply be the rectangle's x and y coordinates. I have made a little test program to make sure I am calculating the positions of the corners accurately - it works when the rectangle is rotated to 0, 90, 180 and 270 degrees, but produces strange results for any other angles.[code]
View 7 RepliesI've seen a few tutorials on this site that discuss the Drawing API, What I'm wanting to do is draw a rounded rectangle at runtime to a particular size.I initially tried resizing an already-created rectangle, but as the movie clip resized, the radius on the corners got distorted.
View 6 RepliesI'm trying to achieve a roundedRectangle in gradient by using just code but i'm getting stuck.I was able to achieve the gradient part but adding the rounded piece its difficult, please see me code,
Code:
package com.callwave.web.fuze.view.skinLibrary
{
import mx.core.UIComponent;
import flash.filters.DropShadowFilter;
import mx.graphics.LinearGradient;
[code]....
I draw a rectangle i should see a little bold circle to indicate a perfect rectangle, I seemed to lost mine, can somebody please tell me how to get it back!
View 2 Repliescreate a method for drawing rectangle with rounded corners, but while being able to specify which of the four corners (any, all, none,etc.) you wanted to round.The method below does the trick, but for some reason my corners don't match the same curves that I get using the same radius with drawRoundRect().
In other words, if I call my method (and set all four corners to be rounded) and compare that with the same call to drawRoundRect() the actual curves of the corners are slightly different.
HTML Code:
public function drawComplexRoundedRect(startX:int,startY:int,rectWidth:int,rectHeight:int,radius:int,canvas:Sprite,roundTopLeft:Boolean=false,roundTopRight:Boolean=false,roundBottomLeft:Boolean=false,roundBottomRight:Boolean=false):void{
[code]....
How can I create a rounded rectangle with a dashed line? I've seen several routines that draw their own straight lines, but nothing for rounded rectangles.
View 2 RepliesThe corners of a rectangle drawn with drawRoundRect are not very consistent when the curve/ellipse values are very low (2-5px or so), most visibly when there's a border added.Even with hinting turned on, there's still a pretty ugly difference. When set to 3px (horizontal and vertical), the right-side corners look pretty close at around 3px, but the left-side corners are very off, and both look to be maybe 1px curved.
View 1 RepliesCan i change the fill color of an existend rounded rectangle primitive?[code]
View 7 Replieshow can i draw a shape, that is only rounded at it's bottom ?
var _myShape:Shape = new Shape();
_myShape.graphics.lineStyle(4,0x000000,1,true,....);
_myShape.graphics.drawRoundRect(0,0,50,50,10);