VNJS JavaScript API
Context API
- context.getConstant ( constant_name )
- context.setTargetStyle ( canvas_element, style )
- context.animate ( canvas_element, anim_args )
context.getConstant ( constant_name )
Returns the constant, as a JavaScript object, with the given name. This method allows JavaScript code to access constants defined by the VNJS language. When a constant is accessed using this method, access is only permitted in the JavaScript code if the constant has been registered using the registerConstant mutator. The following VNJS code example demonstrates how to register a constant and then access the constant within the JavaScript code;
// Declare an example VNJS constant.
const my_rectangle = Rectangle(
width: 400,
height: 150,
stroke_style: 'black',
line_width: 1,
);
// A JavaScript function that can access the above constant.
const my_javascript_function = {%
function(args, context) {
// Access the 'my_rectangle' constant in JavaScript code,
var my_rectangle = context.getConstant( 'my_rectangle' );
// ... Do something with the constant here ...
}
%}
// Important: The 'my_rectangle' constant is registered here,
my_javascript_function.registerConstant(my_rectangle);context.setTargetStyle ( canvas_element, style )
Sets the target style that the context.animate method will use to produce an animation interpolation between the current style of canvas_element and the target style. The style argument is an object that specifies the stylable property fields of canvas_element that the animation targets. For example, an animation that moves an element horizontally would define the target location of the x property.
Example
The code below demonstrates animating a rectangle to move from 200 to 800 along the x coordinates over a 5 second period;
// Declare an example VNJS constant.
const my_rectangle = Rectangle(
width: 400,
height: 150,
stroke_style: 'black',
line_width: 1,
x: 200,
y: '50%',
);
// A JavaScript function
const my_javascript_function = {%
function(args, context) {
// Access the 'my_rectangle' constant in JavaScript code,
var my_rectangle = context.getConstant( 'my_rectangle' );
// Set up and start the animation,
context.setTargetStyle( my_rectangle, {
x: 800
});
context.animate( my_rectangle, { time:5, easing:'ease-in' });
}
%}
// Important: The 'my_rectangle' constant is registered here,
my_javascript_function.registerConstant(my_rectangle);context.animate ( canvas_element, anim_args )
Starts an animation between the current style of canvas_element, and the target style defined in a previous call to context.setTargetStyle. The anim_args argument is an object that must define the following fields;
- time: The number of seconds the animation should take.
- easing: (optional) Either a string of a pre-set easing function ('no-ease', 'ease-in', 'ease-out') or a JavaScript function the defines the easing calculation.
Example
The code below demonstrates animating a rectangle to move from 200 to 800 along the x coordinates over a 5 second period;
// Declare an example VNJS constant.
const my_rectangle = Rectangle(
width: 400,
height: 150,
stroke_style: 'black',
line_width: 1,
x: 200,
y: '50%',
);
// A JavaScript function
const my_javascript_function = {%
function(args, context) {
// Access the 'my_rectangle' constant in JavaScript code,
var my_rectangle = context.getConstant( 'my_rectangle' );
// Set up and start the animation,
context.setTargetStyle( my_rectangle, {
x: 800
});
context.animate( my_rectangle, { time:5, easing:'ease-in' });
}
%}
// Important: The 'my_rectangle' constant is registered here,
my_javascript_function.registerConstant(my_rectangle);