lineStyle() inside for loop produces disconnected angles

46 views Asked by At

Here is my code (condensed to the function in question):

public function redrawNewShape() {
        var tempAX:Number;
        var tempAY:Number;
        var tempBX:Number;
        var tempBY:Number;
        var tempLineThickness:Number;
        var tempLineColour:uint;
        var tempLineJoints:String;
        var tempLineMiter:Number;
        var tempSprite:Sprite;

        tempSprite = new Sprite;
        tempSprite = shapeArray[1];
        tempSprite.graphics.clear()

        if (fillTransparency == 0) {            
            tempSprite.graphics.beginFill(shapeArray[3],1);
        }

        tempSprite.graphics.moveTo(linesArray[(linesArray.length - 2)],linesArray[(linesArray.length - 1)]);

        for (var d = 0; d < (linesArray.length/4); d++) {
            tempAX = linesArray[(d*4)];
            tempAY = linesArray[((d*4)+1)];
            tempBX = linesArray[((d*4)+2)];
            tempBY = linesArray[((d*4)+3)];
            tempLineThickness = lineStyleArray[(d*4)];
            tempLineColour = lineStyleArray[((d*4)+1)];
            tempLineMiter = lineStyleArray[((d*4)+3)];

            if (lineStyleArray[((d*4)+2)] == 0) {
                tempLineJoints = JointStyle.MITER;
            } else if (lineStyleArray[((d*4)+2)] == 1) {
                tempLineJoints = JointStyle.ROUND;
            } else if (lineStyleArray[((d*4)+2)] == 2) {
                tempLineJoints = JointStyle.BEVEL;
            }

            tempSprite.graphics.lineStyle(tempLineThickness,tempLineColour,1,false,"normal","none",tempLineJoints,tempLineMiter)
            tempSprite.graphics.curveTo(tempAX,tempAY,tempBX,BY)                
            }

        if (fillTransparency == 0) {            
            tempSprite.graphics.endFill();
        }
    }

This function redraws a shape in my program defined by attributes in the arrays shapeArray, linesArray, and lineStyleArray. The problem is that the angles of the shape in my program aren't connected no matter what JointStyle I set it to.

(I cannot upload example picture because I haven't got at least 10 reputation. Imagine two thick lines with no Caps joining at an angle of 90 degrees. Instead of the corner being rounded, beveled, or mitered there is a gap in the shape of a square half the width of the two lines.)

The thing I don't understand why, is the angles are connected if I put the tempSprite.graphics.lineStyle outside of the for loop. It states in the Actionscript 3.0 reference under lineStyle that,

"You can call the lineStyle() method in the middle of drawing a path to specify different styles for different line segments within the path."

so why does it not work inside the loop?

Example putting lineStyle outside the for loop(with the temp values added manually):

public function redrawNewShape() {
        var tempAX:Number;
        var tempAY:Number;
        var tempBX:Number;
        var tempBY:Number;
        var tempLineThickness:Number;
        var tempLineColour:uint;
        var tempLineJoints:String;
        var tempLineMiter:Number;
        var tempSprite:Sprite;

        tempSprite = new Sprite;
        tempSprite = shapeArray[1];
        tempSprite.graphics.clear()

        if (fillTransparency == 0) {            
            tempSprite.graphics.beginFill(shapeArray[3],1);
        }

        tempSprite.graphics.moveTo(linesArray[(linesArray.length - 2)],linesArray[(linesArray.length - 1)]);
        tempSprite.graphics.lineStyle(10,0x000000,1,false,"normal","none","miter",3)

        for (var d = 0; d < (linesArray.length/4); d++) {
            tempAX = linesArray[(d*4)];
            tempAY = linesArray[((d*4)+1)];
            tempBX = linesArray[((d*4)+2)];
            tempBY = linesArray[((d*4)+3)];
            tempLineThickness = lineStyleArray[(d*4)];
            tempLineColour = lineStyleArray[((d*4)+1)];
            tempLineMiter = lineStyleArray[((d*4)+3)];

            if (lineStyleArray[((d*4)+2)] == 0) {
                tempLineJoints = JointStyle.MITER;
            } else if (lineStyleArray[((d*4)+2)] == 1) {
                tempLineJoints = JointStyle.ROUND;
            } else if (lineStyleArray[((d*4)+2)] == 2) {
                tempLineJoints = JointStyle.BEVEL;
            }

            tempSprite.graphics.curveTo(tempAX,tempAY,tempBX,tempBY)                
            }

        if (fillTransparency == 0) {            
            tempSprite.graphics.endFill();
        }
    }
1

There are 1 answers

2
AudioBubble On

It is likely that changing the lineStyle in the middle of a path restarts a new segment and applies the current CapStyle.

Try to figure out the difficulty of computing the joints in case you change the line thickness at a corner.