JavaScript Graphics Library (JSGL.org) Draw and move interactive vector graphics easily in Javascript!

Solid Stroke (class jsgl.stroke.SolidStroke)

jsgl.stroke.SolidStroke is the key class to style the outline of JSGL elements.

Many JSGL elements use this class to specify their appearance:

  • Line Element (jsgl.elements.LineElement) to decorate the line,
  • Rectangle Element (jsgl.elements.RectangleElement) to decorate the outline of the rectangle,
  • Circle Element (jsgl.elements.CircleElement) to decorate the outline of the circle,
  • Ellipse Element (jsgl.elements.EllipseElement) to decorate the outline of the ellipse,
  • Polyline Element (jsgl.elements.PolylineElement) to decorate the polyline,
  • Polygon Element (jsgl.elements.PolygonElement) to decorate the outline of the polygon,
  • Curve Element (jsgl.elements.CurveElement) to decorate the Bezièr curve,
  • Shape Element (jsgl.elements.ShapeElement) to decorate the lines and curves of the shape,
  • Image Element (jsgl.elements.ImageElement) to (optionally) put the image into a box.

By default, each of these elements obtain its own stroke object on instantiation, typically defining some very default properties (color=“black”, weight=1, etc.).

Working with Default Stroke Objects

The simplest way how to work with stroke objects is keep the default ones, assigned to individual elements during creation. They are instances of the jsgl.stroke.SolidStroke class, that can easily modified:

/* INITIALIZATION */
 
var myPolyline = myPanel.createPolyline();  // create a polyline
myPanel.addElement(myPolyline);  // add the polyline to the panel's viewport
myPolyline.addPointXY(50,50);  // add some points to the polyline...
myPolyline.addPointXY(200,50);
myPolyline.addPointXY(50,150);
myPolyline.addPointXY(200,150);
 
var myRectangle = myPanel.createRectangle();  // create a rectangle
myPanel.addElement(myRectangle);  // add the rectangle to the panel's viewport
myRectangle.setHorizontalAnchor(jsgl.HorizontalAnchor.CENTER);  // center the rectangle horizontally
myRectangle.setVerticalAnchor(jsgl.VerticalAnchor.MIDDLE);  // center the rectangle vertically
myRectangle.setLocationXY(50,100);  // specify the location of the rectangle's center
myRectangle.setSizeWH(50,30);  // set the size of the rectangle
myRectangle.setRotation(-30);  // rotate the rectangle 30 degrees counterclockwise
 
var myBezier = myPanel.createCurve();  // create a Bezier curve
myPanel.addElement(myBezier);  // add the curve to the panel's viewport
myBezier.setStartPointXY(280,150);  // specify the start point of the curve
myBezier.setControl1PointXY(180,125);  // specify the 1st control point of the curve
myBezier.setControl2PointXY(130,125);  // specify the 2nd control point of the curve
myBezier.setEndPointXY(280,50);  // specify the end point of the curve
 
/* DECORATING WITH STROKE */
 
with(myPolyline.getStroke()) {  // obtain the default stroke object of the polyline
  setWeight(5);  // set the weight of the polyline's stroke to 5
  setColor('red');  // set the color of thy polyline's stroke to "red"
}
with(myRectangle.getStroke()) { // obtain the default stroke object of the rectangle
  setWeight(10);  // set the weight of the rectangle's stroke to 10
  setColor('blue');  // set the color of the rectangle's stroke to "blue"
  setJoinStyle(jsgl.JoinStyles.MITER);  // set the corners of the rectangle sharp
}
with(myBezier.getStroke()) { // obtain the default stroke of the curve
  setWeight(3);  // set the weight of the curve's stroke to 3
  setColor('green');  // set the color of the rectangle's stroke to "green"
  setDashStyle(jsgl.DashStyles.DASH);  // make the curve dashed
}

The above-code produces the following result:

Creating and Sharing Custom Stroke Objects

As an advanced technique, you may create your own jsgl.stroke.SolidStroke objects, sharing them eventually among multiple elements:

/* INITIALIZATION SAME AS ABOVE */
 
/* CREATE A CUSTOM, SHARED STROKE OBJECT */
 
var myStroke = new jsgl.stroke.SolidStroke();
myStroke.setWeight(4);
myStroke.setColor('blue');
myStroke.setDashStyle(jsgl.DashStyles.LONG_DASH);
myStroke.setOpacity(0.8);
myStroke.setEndcapType(jsgl.EndcapTypes.SQUARE);
myStroke.setJoinStyle(jsgl.JoinStyles.BEVEL);
 
myPolyline.setStroke(myStroke);
myRectangle.setStroke(myStroke);
myBezier.setStroke(myStroke);

The above code produces the following result:

Method Summary

Setters
setWeight(newWeight: Number) Sets the new weight (i.e. width) of the stroke.
setColor(newColor: String) Sets the new color of the stroke.
setOpacity(newOpacity: Number) Sets the new opacity of the stroke.
setDashStyle(dashStyle: jsgl.stroke.AbstractDashStyle) Sets the new dash style specifying object to be used by the stroke. The dash style object controls the pattern of dashes and gaps used by the stroke paths.
setJoinStyle(joinStyle: jsgl.stroke.AbstractJoinStyle) Sets the new join style specifying object to be used for the stroke. The join style object specifies the shape to be used at the corners of paths or basic shapes when they are stroked.
setEndcapType(endcapType: jsgl.stroke.AbstractEndcapType) Sets the new endcap type specifying object to be used by the stroke. The endcap type object specifies the shape to be used at the end of open subpaths when they are stroked.
setEnabled(enabled: Boolean) Allows turning the entire stroke on and off.
Getters
getWeight() : Number Gets the current weight (i.e. width) of the stroke in pixels.
getColor() : String Gets the current color of the stroke.
getOpacity() : Number Gets the current opacity of the stroke.
getDashStyle() : jsgl.stroke.AbstractDashStyle Gets the dash style object currently used by the stroke.
getJoinStyle() : jsgl.stroke.AbstractJoinStyle Gets the join style object currently used by the stroke.
getEndcapType() : jsgl.stroke.AbstractEndcapType Gets the endcap type object currently used by the stroke.
isEnabled() : Boolean Determines whether the whole stroke is currently set on or off.

Method Detail

setWeight(newWeight: Number)

Sets the new weight (i.e. width) of the stroke.

Parameters

Name Type Description
newWeight Number A real number that the new stroke weight will be set to.

Example 1

Set the weight of the stroke to 10px:

myStroke.setWeight(10);

By example, line drawn with stroke of weight=10 may look like:

Example 2

Create multiple lines of increasing stroke weight:

for(var i=1; i<10; i++) {
  var myLine = myPanel.createLine();
  myPanel.addElement(myLine);
  myLine.setStartX(20*i);
  myLine.setStartY(10);
  myLine.setEndX(20*i);
  myLine.setEndY(90);
 
  myLine.getStroke().setWeight(i);

The above code will produce the following result:

Since

version 1.0

getWeight() : Number

Gets the current weight (i.e. width) of the stroke in pixels.

Example

Make the stroke twice as wide as it currently is:

myStroke.setWeight(myStroke.getWeight());

Returns

Number

Since

version 1.0

setColor(newColor: String)

Sets the new color of the stroke in the CSS color format (see Wikipedia).

Parameters

Name Type Description
newColor String The new color of the stroke in CSS format.

Example 1

Set the color of the stroke blue:

myStroke.setColor('blue');

or

myStroke.setColor('#0000ff');

or

myStroke.setColor('#00f');

or

myStroke.setColor('rgb(0,0,255)');

Any of the above examples produces the following result when the stroke is applied to a line element:

It is not recommended to use the HSL color format to maintain compatibility of your application with the MSIE browser.

Example 2

Create multiple lines of various colors ranging linearly from red to blue:

for(var i=0; i<9; i++) {
  var myLine = myPanel.createLine();
  myPanel.addElement(myLine);
  myLine.setStartPointXY(20*(i+1), 10);
  myLine.setEndPointXY(20*(i+1), 90);
  myLine.getStroke().setWeight(5);
 
  myLine.getStroke().setColor(
    'rgb(' + Math.round((8-i)*255/8) + ',0,' + Math.round(i*255/8)+ ')');
}

Since

version 1.0

getColor() : String

Gets the current color of the stroke.

Example

Make the color of strokeB be the same as of strokeA:

strokeB.setColor(strokeA.getColor());

Returns

String

Since

version 1.0

setOpacity(newOpacity: Number)

Sets the new opacity of the stroke.

Parameters

Name Type Description
newOpacity Number A real number from interval [0,1], where 0.0 means fully transparent, 1.0 means fully opaque.

Example

Create multiple lines of increasing opacity on the top of an ellipse:

var myEllipse = myPanel.createEllipse();
myPanel.addElement(myEllipse);
myEllipse.setCenterLocationXY(100,50);
myEllipse.setSizeWH(180,40);
myEllipse.setStroke(jsgl.stroke.DISABLED);
myEllipse.getFill().setColor('green');
 
for(var i=0; i<9; i++) {
  var myLine = myPanel.createLine();
  myPanel.addElement(myLine);
  myLine.setStartPointXY(20*(i+1), 10);
  myLine.setEndPointXY(20*(i+1), 90);
  myLine.getStroke().setWeight(5);
  myLine.getStroke().setColor('red');
 
  myLine.getStroke().setOpacity(i/8);
}

The above code produces the following result:

Since

version 1.0

getOpacity() : Number

Gets the current opacity of the stroke.

Example 1

Make the opacity of strokeB be the same as of strokeA:

strokeB.setOpacity(strokeA.getOpacity());

Example 2

Decrease the opacity whenever the curve is clicked:

var myBezier = myPanel.createCurve();
myPanel.addElement(myBezier);
myBezier.setStartPointXY(10,180);
myBezier.setControl1PointXY(50,50);
myBezier.setControl2PointXY(250,-50)
myBezier.setEndPointXY(290,100);
myBezier.setCursor(jsgl.Cursor.POINTER);
 
with(myBezier.getStroke()) {
  setColor('red');
  setWeight(12);
  setOpacity(1.0);
}
 
myBezier.addClickListener(function(eventArgs) {
    with(myBezier.getStroke()) {
      setOpacity(getOpacity()*0.9);
    }
  });

The above code produces the following result. Click the Bezièr curve to increase its opacity!

Check the mouse events reference to get more info on adding interactivity.

Returns

Number from the interval [0, 1]

Since

version 1.0

setDashStyle(dashStyle: jsgl.stroke.AbstractDashStyle)

Sets the new dash style specifying object to be used by the stroke. The dash style object controls the pattern of dashes and gaps used by the stroke paths.

Singleton dash styles from jsgl.DashStyles enumeration can be used.

Parameters

Name Type Description
dashStyle jsgl.stroke.AbstractDashStyle The new dash style object.

Examples

Solid
myStroke.setDashStyle(jsgl.DashStyles.SOLID);

Dash
myStroke.setDashStyle(jsgl.DashStyles.DASH);

Dot
myStroke.setDashStyle(jsgl.DashStyles.DOT);

Long-Dash
myStroke.setDashStyle(jsgl.DashStyles.LONG_DASH);

Short-Dash-Dot
myStroke.setDashStyle(jsgl.DashStyles.SHORT_DASH_DOT);

Dash-Dot
myStroke.setDashStyle(jsgl.DashStyles.DASH_DOT);

Long-Dash-Dot
myStroke.setDashStyle(jsgl.DashStyles.LONG_DASH_DOT);

Long-Dash-Dot-Dot
myStroke.setDashStyle(jsgl.DashStyles.LONG_DASH_DOT_DOT);

Since

version 1.0

See Also

setJoinStyle(joinStyle: jsgl.stroke.AbstractJoinStyle)

Sets the new join style specifying object to be used for the stroke. The join style object specifies the shape to be used at the corners of paths or basic shapes when they are stroked.

Singleton join styles from the jsgl.JoinStyles enumeration can be used.

Parameters

Name Type Description
joinStyle jsgl.stroke.AbstractJoinStyle The new join style object.

Example 1

Working with the jsgl.JoinStyles enumeration.

Round
myStroke.setJoinStyle(jsgl.JoinStyles.ROUND);

makes the corners round:

Miter
myStroke.setJoinStyle(jsgl.JoinStyles.MITER);

makes the corners sharp:

Bevel
myStroke.setJoinStyle(jsgl.JoinStyles.BEVEL);

makes the corners flat:

Example 2

Advanced working with custom jsgl.stroke.MiterJoinStyle objects.

myStroke.setJoinStyle(new jsgl.stroke.MiterJoinStyle(2));

will flatten most of the corners:

myStroke.setJoinStyle(new jsgl.stroke.MiterJoinStyle(5));

will flatten corners that are too sharp:

myStroke.setJoinStyle(new jsgl.stroke.MiterJoinStyle(20));

preserves even the very sharp corners:

Indeed, you can use the .setMiterLimit() and .getMiterLimit() methods of the jsgl.stroke.MiterJoinStyle object to change the limit dynamically.

Since

version 1.0

See Also

 
solid-stroke.txt · Last modified: 2013/03/14 03:17 (external edit)
 
Except where otherwise noted, content on this wiki is licensed under the following license: GNU Free Documentation License 1.3
Driven by DokuWiki Powered by PHP Valid XHTML 1.0 Valid CSS