Shader
Moscrif native Shader feature supports three types of the gradients:
Linear gradient
Linear() gradient in Moscrif is created by Shader.linear function. Function specifies shader appearance in four parameters. First parameter defines start and end point of the gradient on x and y axis. Start and end point can be set to any position inside of the shape or it can be set at the shape borders.
The second parameter defines colour palette included in the gradient. Colour is defined by four hexadecimal numbers - one for every channel: alpha, red, green, blue.
Third parameter defines position for every colour. Value Zero means that colour is placed directly at the start point and position One represents position at the end point. Other colours are placed between these points.
this._path = Path.fromSVG("M1....8.63z"); // resize and place path ... // create paint object
var paint = new Paint();
var pts = {
start :
{
x: System.width / 2,
y : System.height / 4,
},
end :
{
x: System.width / 2,
y : 3 * System.height / 4,
}
}
var clrs = new Array(0xffff0000, 0xff00ff00, 0xff0000ff);
var pos = new Array(0.2, 0.5, 0.8);
paint.shader = Shader.linear(pts, clrs, pos, 0);
// draw vector
canvas.drawPath(this._path, paint);
Sweep gradient
To create a sweep() gradient in Moscrif we use Shader.sweep. First two parameters represent x, y coordinates of the gradient centre. Next two parameters are the same as in linear().
this._path = Path.fromSVG("M1....8.63z"); // resize and place path .. // create paint object
var paint = new Paint();
var pts = {
start :
{
x: System.width / 2,
y : System.height / 4,
},
end :
{
x: System.width / 2,
y : 3 * System.height / 4,
}
}
var clrs = new Array(0xffff0000, 0xff00ff00, 0xff0000ff);
var pos = new Array(0.0, 0.5, 1.0);
paint.shader = Shader.sweep(System.width / 2, System.height / 2, clrs, pos);
// draw vector
canvas.drawPath(this._path, paint);
Bitmap gradient
Finally, to create bitmap() gradient in Moscrif we use Shader.bitmap. Bitmap gradient feature is used to draw any bitmap into Moscrif objects. Objects should have different shapes set as bitmap (it is really useful for textures). File Name, the first parameter of Shader bitmap function defines image location, as well as the image name. Tile Mode X and Tile Mode Y are symbols which specify methods of image repeating on x and y axis.
Supported symbols: #clamp, #repeat and #mirror.
this._path = Path.fromSVG("M1....8.63z"); // resize and place path ... // create paint object
var paint = new Paint();
paint.shader = Shader.bitmap("app://img.png", #clamp, #clamp);
// draw vector
canvas.drawPath(this._path, paint);
