I have three Points in the array. I want to draw a triangle using this Points.
For now, I achieve to draw a border of this triangle using MoveTo() and LineTo() functions.
The problem is, I also need to draw an inner background of an area that this lines creates.
Is there a way to achieve this?
You should use graphics.beginFill(color);:
public function astest()
{
var verticies:Vector.<Point> = Vector.<Point>([new Point(0, 100), new Point(100, 0), new Point(100, 100)]);
var sh:Shape = new Shape();
addChild(sh);
drawPolygon(sh.graphics, verticies, 0xFF0000);
}
protected function drawPolygon(graphics:Graphics, verticies:Vector.<Point>, color:uint):void
{
graphics.beginFill(color);
var p:Point = verticies.shift();
graphics.moveTo(p.x, p.y);
for(var i:int = 0; i < verticies.length; i++)
{
p = verticies[i];
graphics.lineTo(p.x, p.y);
}
graphics.endFill();
}
Related
I need to draw independet rectangles to a sprite. But the overlapping areas will get visible if I apply alpha to my sprite (the sprite will be fade in and out):
var spBox:Sprite = new Sprite();
this.addChild(spBox);
spBox.graphics.beginFill(0x123456)
spBox.graphics.drawRect(100, 100, 50, 50);
spBox.graphics.endFill();
spBox.graphics.beginFill(0x123456)
spBox.graphics.drawRect(125, 125, 50, 50);
spBox.graphics.endFill();
Is there a way to compine/flatten/merge the rectangles of my sprite? I want a seamless aplha appearence.
I suspect that the graphics object does not support this kind of functionality for parts of its data.
If both boxes are individual DisplayObjects, you can set the .blendMode of the DisplayObjectContainer to BlendMode.LAYER, which gives the desired result. Here's some example code that refactors the drawing of a rectangle into a Box class:
var spBox:Sprite = new Sprite();
this.addChild(spBox);
var a:Box = new Box(50, 50, 0x123456);
a.x = a.y = 100;
spBox.addChild(a);
var b:Box = new Box(50, 50, 0x123456);
b.x = b.y = 125;
spBox.addChild(b);
spBox.alpha = .5;
spBox.blendMode = BlendMode.LAYER;
The relevant parts of the Box class look like this:
public class Box extends Shape
{
public function Box(width:Number = 100, height:Number = 100, color:uint = 0)
{
graphics.beginFill(color)
graphics.drawRect(0, 0, width, height);
graphics.endFill();
}
}
I am wondering how to draw line inside movieclip[] array:
movieclip myted
line myshape
for (var i:int = 0; i < myted.numChildren-1; i++) {
if (myted.getChildAt(i).hitTestPoint(mouseX,mouseY,true)) {
//drawingLine.transform.colorTransform=pal_color;
}
}
All drawing that you do with a Graphics instance is based on basic drawing with lines and curves. Consequently, all ActionScript drawing must be performed using the same series of steps:
Define line and fill styles
Set the initial drawing position
Draw lines, curves, and shapes (optionally moving the drawing point)
If necessary, finish creating a fill
to define a line and fill styles:
var myShape:Shape = new Shape();
myShape.graphics.lineStyle(2, 0x990000, .75);
myShape.graphics.moveTo(100, 100);
myShape.graphics.lineTo(200, 200);
movieClipInstanceName.addChild(myShape);
" http://i.stack.imgur.com/ESfzi.png "
Thanks
no understand not working ?
not work raw line inside movieclip!
drawing line inside movieclip S1 .. s27 when mouse move inside teddy
////////////////
var drawingLine:MovieClip = new MovieClip();
s.addChild(drawingLine);
//2.
stage.addEventListener(MouseEvent.MOUSE_DOWN, MouseDown);
stage.addEventListener(MouseEvent.MOUSE_UP, MouseUp);
//3.
function MouseDown(event:MouseEvent):void{
drawingLine.graphics.lineStyle(3);
drawingLine.graphics.moveTo(mouseX, mouseY);
s.addEventListener(MouseEvent.MOUSE_MOVE, MouseMove);
}
//4.
function MouseMove(event:MouseEvent):void{
drawingLine.graphics.lineTo(mouseX, mouseY);
for (var i:int = 0; i < teddy.numChildren-1; i++) {
if (teddy.getChildByName("s"+i).hitTestPoint(mouseX,mouseY,true)) {
pal_color=teddy.getChildAt(i).transform.colorTransform;
pal_color.color=colors[current_color];
teddy.getChildByName("s"+i).transform.colorTransform=pal_color;
}
}
}
//5.
function MouseUp(event:MouseEvent):void{
stage.removeEventListener(MouseEvent.MOUSE_MOVE, MouseMove);
}
public function on_teddy_click(e:MouseEvent):void {
for (var i:int = 0; i < teddy.numChildren-1; i++) {
if (teddy.getChildByName("s"+i).hitTestPoint(mouseX,mouseY,true)) {
pal_color=teddy.getChildAt(i).transform.colorTransform;
pal_color.color=colors[current_color];
teddy.getChildByName("s"+i).transform.colorTransform=pal_color;
}
}
}
/////////////////////////////////
sample 2:
not Draw line inside movieclip "S"
var drawingLine:MovieClip = new MovieClip();
s.addChild(drawingLine);
stage.addEventListener(MouseEvent.MOUSE_DOWN, MouseDown);
stage.addEventListener(MouseEvent.MOUSE_UP, MouseUp);
function MouseDown(event:MouseEvent):void{
drawingLine.graphics.lineStyle(3);
drawingLine.graphics.moveTo(mouseX, mouseY);
s.addEventListener(MouseEvent.MOUSE_MOVE, MouseMove);
}
function MouseMove(event:MouseEvent):void{
drawingLine.graphics.lineTo(mouseX, mouseY);
}
function MouseUp(event:MouseEvent):void{
stage.removeEventListener(MouseEvent.MOUSE_MOVE, MouseMove);
}
I have been trying to convert a bitmap I've captured from a camera input into a vector to then convert the vectors points into an array for use later.
However I can not find any such functionality within Flash and so I've been trying to use 'Vectorization Package' created by Corey O'Neil. This seems to work but fails to remove the white background on my bitmap (I am capturing a picture of paper with a line on it). Even manually doing this and making the background transparent still yields no results.
Here is my code:
public class DocumentRich extends MovieClip{
public var initBox2D:Main;
var cam:Camera = Camera.getCamera();
var vid:Video = new Video(420, 300);
var myVector:Vectorize;
public function DocumentRich()
{
if(stage){
initBox2D = new Main();
addChild(initBox2D);
//addChild(new movieMonitor());
}
addEventListener(MouseEvent.CLICK, clickHandler, false, 0, true);
StartAnim();
}
function StartAnim():void
{
//SET UP WORLD
initBox2D.isDebugMode(false);
initBox2D.mouseDragEnabled(true);
Main.world.SetGravity(new b2Vec2(0,0));
cam.setQuality(0, 100);
cam.setMode(420, 300, 30, true);
trace(cam.height);
vid.attachCamera(cam);
addChild(vid);
addChild(go);
}
function clickHandler(m:MouseEvent){
trace(m.target.name);
switch(m.target.name){
case 'go':
goButtonFun();
break;
}
}
function goButtonFun():void{
var screenShot:BitmapData = new BitmapData(cam.width, cam.height);
var screenShot_image:Bitmap=new Bitmap(screenShot);
screenShot.draw(vid) ;
ReduceColors.reduceColors(screenShot, 0, true, false);
screenShot.colorTransform(new Rectangle(0, 0, screenShot.width, screenShot.height), new ColorTransform(2,2,2,1) );
///// --------- MAY NOT NEED THIS ----------- ////////////
for(var i:int = 0; i<screenShot.width; i++)
{
for(var j:int = 0; j<screenShot.height; j++)
{
if(screenShot.getPixel(i,j) == 0xffffff)
{
var transparent:uint = 0x00000000;
screenShot.setPixel32(i, j, transparent);
}
}
}
myVector = new Vectorize(screenShot_image, 23, 2, 1, 3, 0xFFFFFF);
myVector.addEventListener(Vectorize.INIT, traceStatus);
myVector.addEventListener(Vectorize.DESPECKLE_START, traceStatus);
myVector.addEventListener(Vectorize.DESPECKLE_COMPLETE, traceStatus);
myVector.addEventListener(Vectorize.GROUPING_START, traceStatus);
myVector.addEventListener(Vectorize.GROUPING_COMPLETE, traceStatus);
myVector.addEventListener(Vectorize.EDGING_START, traceStatus);
myVector.addEventListener(Vectorize.EDGING_COMPLETE, traceStatus);
myVector.addEventListener(Vectorize.DESPECKLE_PROGRESS, traceProgress);
myVector.addEventListener(Vectorize.GROUPING_PROGRESS, traceProgress);
myVector.addEventListener(Vectorize.EDGING_PROGRESS, traceProgress);
myVector.addEventListener(Vectorize.COMPLETE, showVector);
myVector.vectorize();
//addChild(screenShot_image);
addChild(go);
removeChild(vid);
cam = null;
vid.attachCamera(null);
vid = null;
}
function traceStatus(event:Event):void
{
trace(event.type);
}
function traceProgress(event:Event):void
{
var progress:int = event.target.percentDone * 100;
trace(event.type + ": " + progress + "%");
}
function showVector(event:Event):void
{
trace(event.type);
addChild(myVector);
}
}
Any suggestions?
Thanks.
UPDATE:
Sorry for any confusion, basically I would like a way to trace a transparent bitmap, and get an array of the points of the shape in said bitmap. An array of pixel data is simply too large... I'd like 4 points for a rectangle, regardless of it's size...
Apparently you are looking for BitmapData.getVector(). It's available from Flash player 10, so you should have it at your disposal.
EDIT: After I've reread your question, I understand you want your bitmap to be parsed into a vector - and a vector isn't an array of pixels, but instead a start and end of a certain line. Then yes, if you are capable of calling a threshold() so that the line's pixels will be of one color, and the background of another, you then can call getColorBoundsRect() and query all 4 corners of the rectangle. The ones which have the color of the line are your start and end coordinates, store these.
I'm fairly new to AS3, and I've been trying to make a side scrolling shooter. I made some progress but I've hit a wall on the bullets themselves. The code I've been using is:
var circle:Sprite = new Sprite();
function shoot() {
circle.graphics.beginFill(0xFF794B);
circle.graphics.drawCircle(0, 00, 7.5);
circle.graphics.endFill();
addChild(circle);
circle.x = ship_mc.x;
circle.y = ship_mc.y + 43;
}
The problem with this is it only allows for one bullet on the screen at a time. How can I change this so the bullets are created so that I can have an unlimited amount of them?
Create the object inside the method
function shoot() {
var circle:Sprite = new Sprite();
circle.graphics.beginFill(0xFF794B);
circle.graphics.drawCircle(0, 00, 7.5);
circle.graphics.endFill();
addChild(circle);
circle.x = ship_mc.x;
circle.y = ship_mc.y + 43;
}
Otherwise, you would only have one circle variable. This time, a new circle is created each time the method is called.
However, you will probably want to store all your circles somehow so that you can remove them later.
var allCircles: Vector.<Sprite> = new Vector.<Sprite>();
function shoot() {
var circle:Sprite = new Sprite();
circle.graphics.beginFill(0xFF794B);
circle.graphics.drawCircle(0, 00, 7.5);
circle.graphics.endFill();
addChild(circle);
circle.x = ship_mc.x;
circle.y = ship_mc.y + 43;
allCircles.push(circle);
}
Then, at a later time, you can loop through all your circles:
for each (var circle: Sprite in allCircles) {
// do something with this circle
}
And to clear all circles:
for each (var circle: Sprite in allCircles) {
removeChild(circle);
}
allCircles.clear();
You want to store an array of Sprites, not just one of them. First you declare your Array:
var circles:Array = new Array();
Then you change your shoot function to make a new one and then push it into the Array:
function shoot() {
var circle:Sprite = new Sprite();
circle.graphics.beginFill(0xFF794B);
circle.graphics.drawCircle(0, 00, 7.5);
circle.graphics.endFill();
circle.x = ship_mc.x;
circle.y = ship_mc.y + 43;
circles.push(circle);
addChild(circles[circles.length-1]);
}
It seems applying matrix rotate() to a display object is different from DisplayObject.rotation. What I want is using the matrix.rotate() to get the same result of using rect.rotation = 45. But the actual result is not the same.
Code example:
public class Demo extends Sprite {
public function Demo() {
testRotation();
}
private function testRotation():void {
var rect:Shape = new Shape();
rect.graphics.beginFill(0xff0000,1);
rect.graphics.beginFill(0xff0000, 1);
rect.graphics.drawRect(0,0,100,100);
rect.graphics.endFill();
rect.x = 100;
rect.y = 100;
addChild(rect);
var matrix:Matrix = new Matrix();
trace(matrix);
matrix.rotate(Math.PI*45/180);
rect.transform.matrix = matrix;
}
}
the reason is that rotate method rotates coordination around top-left corner(0,0) as the pic shows.
solution:
var matrix:Matrix = new Matrix();
matrix.translate(-50,-50)// Translate to center of square
matrix.rotate(Math*45/180); //rotate 45 degrees
matrix.translate(rect.x+150, rect.y+150)
rect.transform.matrix = matrix