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.).

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:

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:

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

Set the weight of the stroke to 10px:

myStroke.setWeight(10);

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

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:

version 1.0

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

Make the stroke twice as wide as it currently is:

myStroke.setWeight(myStroke.getWeight());

Number

version 1.0

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

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.

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)+ ')');
}

version 1.0

Gets the current color of the stroke.

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

strokeB.setColor(strokeA.getColor());

String

version 1.0

Sets the new opacity of the stroke.

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(gradientOpacityLine);
  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:

version 1.0

Gets the current opacity of the stroke.

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

strokeB.setOpacity(strokeA.getOpacity());

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.

Number from the interval [0, 1]

version 1.0

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.

myStroke.setDashStyle(jsgl.DashStyles.SOLID);

myStroke.setDashStyle(jsgl.DashStyles.DASH);

myStroke.setDashStyle(jsgl.DashStyles.DOT);

myStroke.setDashStyle(jsgl.DashStyles.LONG_DASH);

myStroke.setDashStyle(jsgl.DashStyles.SHORT_DASH_DOT);

myStroke.setDashStyle(jsgl.DashStyles.DASH_DOT);

myStroke.setDashStyle(jsgl.DashStyles.LONG_DASH_DOT);

myStroke.setDashStyle(jsgl.DashStyles.LONG_DASH_DOT_DOT);

version 1.0

Dash Styles

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.

Working with the jsgl.JoinStyles enumeration.

myStroke.setJoinStyle(jsgl.JoinStyles.ROUND);

makes the corners round:

myStroke.setJoinStyle(jsgl.JoinStyles.MITER);

makes the corners sharp:

myStroke.setJoinStyle(jsgl.JoinStyles.BEVEL);

makes the corners flat:

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.

version 1.0

Join Styles