AS3: graphics.drawTriangle method strange behaviour

Question

in short, i am using the following circle shaped movieclips as vertices parameter(vector.) of drawTriangles method of graphics class. and using the method on the second picture.

now the thing is first 6 points are working fine but after that all the consecutive points dont make any difference.

okay here is the code. m skipping circle-shaped-movieclips-drag-and-move-part

//cape is instance name of movieclip
//cape width and height
var cWidth:Number = cape.width;
var cHeight:Number = cape.height;

var verteces:Vector.<Number> = new Vector.<Number>();
var indeces:Vector.<int> = new Vector.<int>();
var uvtData:Vector.<Number> = new Vector.<Number>();

//populating parameters of draw triangels
var point:Point = new Point();
for(var i:int = 1; i<=capeSkel.numChildren; i++)
{
    point.x = capeSkel["pt"+i].x;
    point.y = capeSkel["pt"+i].y;
    verteces.push(point.x,point.y);
    uvtData.push(point.x/cWidth,point.y/cHeight,1);
}
indeces.push(0,10,5,  0,1,10,  1,2,10,  2,10,7,  5,6,10,  6,7,10,  2,11,7,  2,3,11,  3,4,11,       
4,11,9,  7,8,11,  8,9,11);

var capeBmd:BitmapData = new BitmapData(cWidth, cHeight, true);
capeBmd.draw(cape);
var sprite:Sprite = new Sprite();
addChild(sprite);
sprite.x = 0;
sprite.y = 260;

//this function is called everytime those movieclips are repositioned
function updateVerteces()
{
    var tempVerteces:Vector.<Number> = new Vector.<Number>();
    var point:Point = new Point();
    //capeSkel is the instance name of circle-shaped moveiclip's parent
    for(var i:int = 1; i<=capeSkel.numChildren; i++)
    {
        point.x = capeSkel["pt"+i].x;
        point.y = capeSkel["pt"+i].y;
        tempVerteces.push(point.x,point.y);
    }

    for(var k:int = 0; k<capeSkel.numChildren; k++)
    {
        verteces[k] = tempVerteces[k];
    }
}
function renderView()
{
    sprite.graphics.clear();
    sprite.graphics.beginBitmapFill(capeBmd);
    sprite.graphics.drawTriangles(verteces,indeces,uvtData);
    sprite.graphics.endFill();
}

Answer 1

In updateVertices() you create a temp vector and then fill it with new data just to override the original data during the next step? Anyway, in first loop you push two values into tempVerteces (Vertices is the proper word) for every "vertex handle" in your container so, length of this vector is numChildren * 2 but when you copy vertices to original vector from temp vector you still use numChildren.

So, only thing you need to do to solve your problem is change this line:

for(var k:int = 0; k<capeSkel.numChildren; k++)

to this

for(var k:int = 0; k < tempVerteces.length; k++)

You doing much more things then you really need to do. I was so confused about your code that i had to reconstruct this in order to find the problem. Don't know what you trying to achieve but in this simple case, when you only move one vertex at the time, You don't need to rewrite entire vertices vector - you can just simply replace one item (or more precisely two in this case).

Here is my edit to do the same task along with drag handling:

import flash.events.MouseEvent;
import flash.display.Sprite;

var cV:Sprite; //currently draged vertex
var cI:uint; //index of draged vertex
var verteces:Vector.<Number> = new Vector.<Number>();
var indeces:Vector.<int> = new Vector.<int>();
var uvtData:Vector.<Number> = new Vector.<Number>();
var capeBmd:BitmapData = new BitmapData(cape.width, cape.height, true);
var sprite:Sprite = new Sprite();

init();
renderView();

function init(){
    capeBmd.draw(cape);
    sprite.x = cape.x;
    sprite.y = cape.y;
    removeChild(cape);
    addChildAt(sprite,0);

    for(var i:int = 0; i<capeSkel.numChildren; i++){
        cV = capeSkel.getChildAt(i) as Sprite;
        cV.addEventListener(MouseEvent.MOUSE_DOWN, grabVert);
        verteces.push(cV.x, cV.y);
        uvtData.push(cV.x / cape.width, cV.y / cape.height);
    }
    indeces.push(0,10,5,  0,1,10,  1,2,10,  2,10,7,  5,6,10,  6,7,10,  2,11,7,  2,3,11,  3,4,11,       
    4,11,9,  7,8,11,  8,9,11);

    cV = null;
    cape = null;
    stage.addEventListener(MouseEvent.MOUSE_MOVE, moveVert);
    stage.addEventListener(MouseEvent.MOUSE_UP, clearVert);
}

function grabVert(e:MouseEvent){
    cV = Sprite(e.currentTarget);
    cI = cV.parent.getChildIndex(cV)*2;
}

function moveVert(e:MouseEvent){
    if(!cV) return;
    verteces[cI] = cV.x = cV.parent.mouseX;
    verteces[cI+1] = cV.y = cV.parent.mouseY;
    renderView();
}

function clearVert(e:MouseEvent){
    cV = null;
}

function renderView()
{
    var g:Graphics = sprite.graphics;
    g.clear();
    g.lineStyle(2, 0x00FF00);
    g.beginBitmapFill(capeBmd);
    g.drawTriangles(verteces,indeces,uvtData);
    g.endFill();
}