Stroke support has landed

4 years ago
Tags: strokes

The stroke support was one of the top features developers have asked from us. Starting from today you can finally add strokes to your shapes. All shapes and renders are fully supported, you can add both fill and stroke to a shape or use them individually.

The API is very similar to adding fills. All shapes have new method setStroke(). Like the setFill() method it can accept parameters in many forms. You can pass in an instance of lime.fill.Stroke or just pass in stroke width and color. For color all the same parameters are accepted that you previously could use for color fills.

1
2
3
4
5
6
// All of the following are valid ways of adding a stroke.
sprite.setStroke(5,'#c00'); //5px red stroke
sprite.setStroke(5,'rgb(100,0,0)');
sprite.setStroke(5,0,100,0,.5); // semi-transparent green
var redline = new lime.fill.Stroke(2).setColor(100,0,0);
sprite.setStroke(redline);

If you need to remove previously set stroke call setStroke(null). The same technique can be used for fills.

Below you can find a simple demo about the new functionality. Sample sets a new random stroke to a shape after every 500ms. Source code for this demo can be seen here.

Check it out!