spatialillusions / milsymbol

Military Symbols in JavaScript
www.spatialillusions.com/milsymbol
MIT License
544 stars 133 forks source link

Trying to create a line at the buttom of the symbol #198

Closed YahavTheKing123 closed 6 years ago

YahavTheKing123 commented 6 years ago

Hi Mans,

I am trying to find a way to add for each created icon a middle buttom line. I saw there is a "directionarrow" function which controls movement indicator, but i counld't undersatand how do i add/use it.

This is what i am trying to achieve (see attached): buttomlineicon

Thanks for your help!

spatialillusions commented 6 years ago

You should do something like this:

ms.addSymbolPart(function bottomline(ms) {
  //This debug function is a minimal example of how to extend milsymbol.
  //Create a variable to store your geometries
  var drawArray1 = [];
  var drawArray2 = [];
  //Get a new bounding box and modify it if your geometry extends outside the current bounds.
  var gbbox = new ms.BBox();

  var line;
  var color =
    this.colors.iconColor[this.metadata.affiliation] ||
    this.colors.iconColor["Friend"];
  var bbox = this.metadata.baseGeometry.bbox;

  if (this.metadata.baseGeometry.g == "") {
    // in the case we don't have any frame
    bbox = this.bbox; //Set bbox to the current symbols bounds
  }

  if (this.options.line) {
    // Line lenght from the center of the octagon
    var bottom = (this.options.line + 100);
    //Draws the line
    line = {
      type: "path",
      fill: false,
      stroke: color,
      d:
        "m 100," + bbox.y2 + " L 100," + bottom
    };

    drawArray2.push(line);

    if (this.style.outlineWidth > 0)
      drawArray1.unshift(
        ms.outline(
          line,
          this.style.outlineWidth,
          this.style.strokeWidth,
          typeof this.style.outlineColor === "object"
            ? this.style.outlineColor[this.metadata.affiliation]
            : this.style.outlineColor
        )
      );
  }
  return { pre: drawArray1, post: drawArray2, bbox: { y2: bottom } };
})

Then to add a line to your symbol set the option "line" to a length measured from the center of the octagon to the line length. (Try with 100 and you should get something.)

YahavTheKing123 commented 6 years ago

It worked perfectly. Thanks!!