Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...

BezierPlugin.bezierThrough()

BezierPlugin.bezierThrough( values:Array, curviness:Number, quadratic:Boolean, correlate:String, prepend:Object, calcDifs:Boolean ) : Object

[static] Takes an array that contains objects (could be Points, could be generic objects with any number of properties but they should all match in terms of the names of properties like [{x:0, y:0, scaleX:0.5}, {x:100, y:-200, scaleX:1.2}, {x:300, y:20, scaleX:0.8}]) and plots Bezier segments THROUGH those values and returns an array containing a generic object for each Bezier segment.

Parameters

values: Array

An array containing generic objects with matching properties (or Point instances) through which the Beziers should be plotted, like [{x:0, y:0, scaleX:0.5}, {x:100, y:-200, scaleX:1.2}, {x:300, y:20, scaleX:0.8}]

curviness: Number

(default = 1) — A number (default: 1) that controls the strength of the curves that are plotted through the values. A curviness of 0 would be result in straight lines, 1 is normal curviness, and 2 would be extreme curves. Use any value.

quadratic: Boolean

(default = false) — if true, quadratic Bezier information will be returned instead of cubic Bezier data, thus each object in the returned array will only contain a, b, and c properties where b is the control point.

correlate: String

(default =x, y, z, left, top, right, bottom, marginLeft, marginTop, marginRight, marginBottom, paddingLeft, paddingTop, paddingRight, paddingBottom) — a comma-delimited list of property names whose relative distances should be correlated with each other when calculating the curvature of the Bezier through the values (the default is"x, y, z, left, top, right, bottom, marginLeft, marginTop, marginRight, marginBottom, paddingLeft, paddingTop, paddingRight, paddingBottom" because those are almost always properties that should be correlated).

prepend: Object

(default = null) — [optional] an object to treat as though it is the first element in the values array (typically only used internally for adding a tween’s starting values)

calcDifs: Boolean

(default = false) — if trueda, ca, and ba properties will be added to each bezier segment indicating (d – a), (c – a), and (b – a) which is typically only useful for improving animation performance slightly by precalculating those values instead of doing it each time the tween updates.

Returns : Object

An object with properties matching those from the objects in the values array, with an array assigned to each property populated with an object for each Bezier. The Bezier objects will contain a, b, c (and d if quadratic is not true) properties for the anchors and control points.

Details

Takes an array that contains objects (could be Points, could be generic objects with any number of properties but they should all match in terms of the names of properties like [{x:0, y:0, scaleX:0.5}, {x:100, y:-200, scaleX:1.2}, {x:300, y:20, scaleX:0.8}]) and plots Bezier segments THROUGH those values and returns an array containing a generic object for each Bezier segment. By default Cubic Beziers (which use 2 control points per segment) are used but you can optionally request Quadratic Beziers (1 control point per segment) instead using the quadratic parameter.

For Cubic Beziers (the default), each segment object will have a, b, c, and d properties:

  • a - the starting anchor value of the Cubic Bezier segment. For example, bezierThrough([{x:0, y:0, scaleX:0.5}, {x:100, y:-200, scaleX:1.2}, {x:300, y:20, scaleX:0.8}]); would return an object with "x", "y", and "scaleX" properties, each containing an array of objects, one per Bezier segment and you could access the first Bezier's initial anchor values like: myReturnedObject.x[0].a, myReturnedObject.y[0].a, and myReturnedObject.scaleX[0].a
  • b - the first control point value of the Cubic Bezier segment. For example, bezierThrough([{x:0, y:0, scaleX:0.5}, {x:100, y:-200, scaleX:1.2}, {x:300, y:20, scaleX:0.8}]); would return an object with "x", "y", and "scaleX" properties, each containing an array of objects, one per Bezier segment and you could access the first Bezier's first control point values like: myReturnedObject.x[0].b, myReturnedObject.y[0].b, and myReturnedObject.scaleX[0].b
  • c - the second control point value of the Cubic Bezier segment. For example, bezierThrough([{x:0, y:0, scaleX:0.5}, {x:100, y:-200, scaleX:1.2}, {x:300, y:20, scaleX:0.8}]); would return an object with "x", "y", and "scaleX" properties, each containing an array of objects, one per Bezier segment and you could access the first Bezier's second control point values like: myReturnedObject.x[0].c, myReturnedObject.y[0].c, and myReturnedObject.scaleX[0].c
  • d - the final anchor value of the Cubic Bezier segment. For example, bezierThrough([{x:0, y:0, scaleX:0.5}, {x:100, y:-200, scaleX:1.2}, {x:300, y:20, scaleX:0.8}]); would return an object with "x", "y", and "scaleX" properties, each containing an array of objects, one per Bezier segment and you could access the first Bezier's final anchor values like: myReturnedObject.x[0].d, myReturnedObject.y[0].d, and myReturnedObject.scaleX[0].d

If you set the quadratic parameter to true, all of the Bezier segments will contain a, b, and c properties (NOT d) where b is the only control point. This can be very useful because some drawing APIs only understand Quadratic Beziers. There are 4 times as many Quadratic Beziers returned as Cubic Beziers, though, due to the fact that the internal algorithm uses Cubic Beziers to plot the points (they're much more flexible) and then splits each into 4 Quadratic ones.

//input:
var beziers = BezierPlugin.bezierThrough([{x:0, y:0}, {x:250, y:400}, {x:500, y:0}]);

//output:
{
x:[{a:0, b:0, c:125, d:250}, {a:250, b:375, c:500, d:500}],
y:[{a:0, b:0, c:400, d:400}, {a:400, b:400, c:0, d:0}]
}


//get quadratic beziers so that we can use the canvas's drawing API...
var beziers = BezierPlugin.bezierThrough([{x:0, y:0}, {x:250, y:400}, {x:500, y:0}], 1, true);

var bx = beziers.x; //the "x" Beziers
var by = beziers.y; //the "y" Beziers
Copyright 2017, GreenSock. All rights reserved. This work is subject to theterms of useor for Club GreenSock members, the software agreement that was issued with the membership.
×