Style is used for changing the visual styles of items contained within a Paper.js project and is returned by item.style
and project.currentStyle
.
All properties of Style are also reflected directly in Item
, i.e.: item.fillColor
.
To set multiple style properties in one go, you can pass an object to item.style
. This is a convenient way to define a style once and apply it to a series of items:
Example: Styling paths
var path = new Path.Circle(new Point(80, 50), 30);
path.style = {
fillColor: new Color(1, 0, 0),
strokeColor: 'black',
strokeWidth: 5
};
Example: Styling text items
var text = new PointText(view.center);
text.content = 'Hello world.';
text.style = {
fontFamily: 'Courier New',
fontWeight: 'bold',
fontSize: 20,
fillColor: 'red',
justification: 'center'
};
Example: Styling groups
var path1 = new Path.Circle({
center: [100, 50],
radius: 30
});
var path2 = new Path.Rectangle({
from: [170, 20],
to: [230, 80]
});
var group = new Group(path1, path2);
// All styles set on a group are automatically
// set on the children of the group:
group.style = {
strokeColor: 'black',
dashArray: [4, 10],
strokeWidth: 4,
strokeCap: 'round'
};
view
strokeColor
strokeWidth
strokeCap
strokeJoin
strokeScaling
dashOffset
dashArray