Cango Arrows User Guide

Syntax:

const obj = new Arrow(baseX, baseY, tipX, tipY [, options]);

Description:

Creates a straight arrow shape. The arrow starting at world coordinates (baseX,baseY) and the tip of the arrow head will end at (tipX, tipY). The arrow shaft width may be set in either pixels or world coordinates and head size can be adjusted by specifying a head size scale factor relative to the shaft width.

The arrow can be drawn with different colored border, a drop shadow or any of the other properties supported by Cango 'Shape' objects.

NOTE: The arrow shape is always drawn with the 'iso' property set true to preserve the arrow shape when independent X and Y world coordinate scaling is used.

Parameters:

Arrow Optional Properties:

Inherited optional style properties

(see Cango User Guide Object Optional Style Properties for details).

• border
• fillColor
• strokeColor
• lineWidthWC
• lineWidth

• dashed
• dashOffset

• shadowOffsetX
• shadowOffsetY
• shadowBlur
• shadowColor

Inherited Extension Object optional transform properties

(see Cango User Guide Object Optional Transform Properties for details).

• rot
• scl, sclX, sclY
• skewX, skewY

Example:

function drawArrows(cvsID)
{
  var gc = new Cango(cvsID),
      xmin = -15, xmax = 25,
      ymin = 0, ymax = 4;

  gc.gridboxPadding(10, 8, 2, 8);
  gc.setWorldCoordsRHC(-15, 0, 40, 4);
  gc.drawAxes(xmin, xmax, ymin, ymax, {
    xOrigin: 0, 
    yOrigin: 0, 
    strokeColor:'gray'});

  // test straight arrow
  gc.drawArrow(5, 1, 20, 3, {
    shaftWidthWC:2,
    headSize:4,
    fillColor:'red',
    border:true,
    strokeColor:'blue',
    lineWidth:2});

  gc.drawArrow(0, 1, -10, 4, {
    shaftWidth: 8,
    fillColor:'green'});
}

Syntax:

const obj = new ArrowArc(radius, startAngle, stopAngle [, options]);

Description:

Draws a curved arrow whose shape is a circular arc of radius 'radius' starting at the angle 'startAngle' from the X axis and finishing at 'stopAngle'. An arrow head is drawn at the end with its tip at radius 'radius' and angle 'stopAngle'. The drawing origin will be at the center of the circular arc. If options properties 'x' and/or 'y' are specified then the center of the arc will be drawn at world coordinates x,y otherwise the center will be drawn at world coordinates 0,0.

NOTE: The arrow shape is always drawn with the 'iso' property set true to preserve the arrow shape when independent X and Y world coordinate scaling is used.

Parameters:

Optional Properties:

Inherited optional style properties

(see Cango User Guide Object Optional Style Properties for details).

• border
• fillColor
• strokeColor
• lineWidthWC
• lineWidth

• dashed
• dashOffset

• shadowOffsetX
• shadowOffsetY
• shadowBlur
• shadowColor

Inherited Extension Object optional transform properties

(see Cango User Guide Object Optional Transform Properties for details).

• x, y
• rot
• scl, sclX, sclY
• skewX, skewY

Example:

  function arrowArcDemo(cvsID)
  {
    const cgo = new Cango(cvsID);
          
    cgo.clearCanvas("beige");
    cgo.gridboxPadding(5);

    cgo.setWorldCoordsRHC(-20, -4, 40, 8);
    cgo.drawAxes(-20, 20, -4, 4, {
      xOrigin: 0, yOrigin: 0,
      xLabel:"X", 
      yLabel:"Y",
      fontSize: 10 });

    cgo.drawArrowArc(8, 140, 280, {
      x:-10,
      y:-2,
      clockwise:true,
      shaftWidth:4,
      fillColor:'black'});
    cgo.drawPath(PathSVG.cross(2, 0.5), {
      x:-10, y:-2});
    cgo.drawArrowArc(10, 0, 40, {
      clockwise:false,
      shaftWidth:8,
      fillColor:'green',
      shadowOffsetX:0.50,
      shadowOffsetY:-0.1,
      shadowBlur:0.5,
      shadowColor:'gray'});
    cgo.drawArrowArc(15, 20, 156, {
      clockwise: false,
      shaftWidthWC: 1.7,
      fillColor: 'steelblue',
      border:true,
      strokeColor:'red'});
  }