graphics.curveTo not working properly?

#1

Hello!

I’m trying to use graphics.curveTo to draw an angle on a triangle, but I’m getting weird behavior that I can’t really explain and I was hoping you guys could help.

The code is below:

                var offset1:Point = Helper.findVector(new Point(x, y), new Point(otherAngles[0].x, otherAngles[0].y), 30);
		var offset2:Point = Helper.findVector(new Point(x, y), new Point(otherAngles[1].x, otherAngles[1].y), 30);
		var control:Point = Helper.findVector(new Point(this.x, this.y), new Point(opposite.x, opposite.y), 40);
		
		line.graphics.clear();
		line.graphics.lineStyle(2, 0xFF000000);
		line.graphics.moveTo(offset1.x, offset1.y);
		line.graphics.curveTo(control.x, control.y, offset2.x, offset2.y);
		line.graphics.moveTo(offset1.x, offset1.y);`

If you guys have any more questions or things you need from me, let me know!

#2

Please give us some actual numbers.

Place the triangle so that the angle is wrong, then print out the three vertices, and the values of opposite, offset1, offset2, and control.

#3

Sorry, I should have given a bunch more details. My bad.

Pic:

The values here are:
this: 916.271951966847,325.325924692841
other vertex: 933.701943961453,176.342048454276
other vertex 2: 795.963126387276,235.73917071847
opposite: 864.832535174365,206.040609586373
offset1: 2.32399893261413,-11.9449005299161
offset2: -16.0411767439428,-11.9449005299161
control: -9.8995203773657,-22.9564695956961

what these values mean:
this: the angle that the curve is closest to. this is the one thats drawing it.
other vertex 1 and 2: the two other vertices on the triangle.
opposite: the point between the two other vertices.
offset 1 and 2: both ends of the curve.
control: a point between both offsets, but pulled towards the opposite a little bit to create the curve.

#4

It looks like findVector() is meant to find a vector of a given length pointing in a given direction. Is that right? (Because it clearly doesn’t do that.)

#5

it is supposed to do that, and I use that function in a TON of different scenarios, and in every single one it works just fine.
here’s the source code for that function:

public static function findVector(from:Point, to:Point, power:Int, reverse:Bool = false):Point
{
	var v:Point = new Point();
	v = new Point(to.x - from.x, to.y - from.y);
	v.normalize(power);
	if (reverse)
	{
		v.x *= -1;
		v.y *= -1;
	}
	return v;
}

pretty simple function. not super appreciating the snark.

#6

Ok, sorry for the snark, but it looks like you made a mistake when copying down offset1, and you also didn’t mention that you changed the arguments you passed to findVector(). (30 became 20, and 40 became 25.) If the code you posted here really produced the values posted here, then that certainly would have been the fault of fiindVector().

For clarity, here are the rounded values, with offset1 fixed:

this:       916.3, 325.3
other 1:    933.7, 176.3
other 2:    796.0, 235.7
opposite:   864.8, 206.0
offset1:      2.3, -19.9
offset2:    -16.0, -11.9
control:     -9.9, -23.0

Also, your code, with the arguments updated:

var offset1:Point = Helper.findVector(new Point(x, y), otherAngles[0], 20);
var offset2:Point = Helper.findVector(new Point(x, y), otherAngles[1], 20);
var control:Point = Helper.findVector(new Point(x, y), opposite, 25);

line.graphics.clear();
line.graphics.lineStyle(2, 0xFF000000);
line.graphics.moveTo(offset1.x, offset1.y);
line.graphics.curveTo(control.x, control.y, offset2.x, offset2.y);
line.graphics.moveTo(offset1.x, offset1.y);

Nothing else jumps out as obviously wrong in these numbers, assuming of course that the curve is meant to be so close to the origin. My guess is that you’re drawing the curve inside a Sprite or Shape, whose origin is at (916.3, 325.3), which is fine as long as you can keep track of it.

I am wondering about the second “line.graphics.moveTo(offset1.x, offset1.y);” in your code. I doubt moveTo() would mess up your drawings like this, but if you don’t need that call, I’d get rid of it just in case.

Other than that, the thing to do is try a simpler case and see if you get the same behavior:

var curve:Shape = new Shape();
curve.graphics.lineStyle(2, 0x000000);
curve.graphics.moveTo(2.3, -19.9);
curve.graphics.curveTo(-9.9, -23, -16, -11.9);

curve.x = 20;
curve.y = 20;
addChild(curve);
#7

I don’t get the same behavior, actually. THE MYSTERY DEEPENS.

The other moveTo is because the shape was auto-closing itself and i just wanted an open curve, and I read on another forum that if you put a moveTo back to the beginning after you do your drawing, it fixes it.

#8

Do you rotate or scale your triangle? If so, try rotating and scaling the simple curve.

Have you tried my example with and without the extra moveTo()?

What if you try rounding all the arguments? Does that change anything?

Is it possible that your line object is partially underneath something? Try moving it away from everything else, or adding it as a child of the stage.

#9

The way the triangle works is just doing a bunch of lineTo’s to the three angles its given. So I don’t think it actually scales or rotates in technical terms, but the triangle is always scaling and rotating.

I tried without the extra moveTo but it didn’t change anything, except it closed my shape.

I tried rounding all the arguments, it doesn’t change anything.

Adding it to the stage does not change anything.

Not sure what else to try to be honest :confused:

#10

Well, you have one thing that works, and one that doesn’t. The best way to go forward is to make each one a little bit more like the other, until the one that works stops working, or the one that fails starts working. It’s slow, but it’ll tell you what made the difference.

Save a copy of your code before you do this. This process often ends with you commenting or deleting large swaths of code, and this gives you an easy way to go back once you’re done.

#11

I just made fixes yesterday to prevent lines from auto-closing at the wrong time. This may help improve the behavior your were experienced for the rendering :slight_smile: