Composition and Inheritance

Combining multiple graphics to create a new graphic object

Combining multiple graphics is to call the drawing function of other graphics in the dynamic drawing function of a new custom object, and finally render the graphics we want.

For example, our annotation icon is implemented by calling the drawing function of the cloud line object and the text annotation object in the drawing function:

class MxDbRectBoxLeadComment extends MxDbEntity {
  // ...
  public worldDraw(pWorldDraw: McGiWorldDraw): void {
    // Instantiate a cloud line object
    let cloudLine = new MxDbCloudLine()
    // ...
    // Draw a rectangle frame of the cloud line
    cloudLine.addLine(pt1, pt2)
    cloudLine.addLine(pt2, pt3)
    cloudLine.addLine(pt3, pt4)
    cloudLine.addLine(pt4, pt1)
    // Call the drawing function of the cloud line object and pass in the dynamic drawing object
    cloudLine.worldDraw(pWorldDraw)
    
    // Instantiate a text annotation object
    let leadComment = new MxDbLeadComment()
    // ...
    leadComment.point1 = leadPt
    leadComment.point2 = this.point3
    leadComment.text = this.text
    leadComment.textHeight = this.textHeight
    // Dynamic drawing
    leadComment.worldDraw(pWorldDraw)
  }
}

We can reuse these basic graphic drawings provided by mxdraw to realize more complex graphics and better manage operating data.

Inheritance of graphic objects to implement more requirements

In general, basic graphic objects cannot meet most business requirements. We can extend and refactor a new custom graphic object by inheriting the graphic object class.

The class of MxDbAlignedDimension aligned dimension object is restructured and extended below to make the measurement result with units.

class MyAlignedDimension extends MxDbAlignedDimension {
  // The string returned by this method is the text content rendered by the current aligned dimension object. Here, this method is directly rewritten to add a unit "M" to the measurement result.
  public getDimText(): string {
    var v2ndPtTo1stPt = new THREE.Vector3(this.point1.x - this.point2.x, this.point1.y - this.point2.y, 0);
    var fLen = v2ndPtTo1stPt.length()
    return fLen.toFixed(3) + "M"
  }

  // Because this is a new custom graphic class, each time it is rendered, it is realized by creating the class through "new".
  public create(): MyAlignedDimension {
    return new MyAlignedDimension();
  }

  // Same as the create method
  public getTypeName(): string {
    return "MyAlignedDimension";
  }
}

Before refactoring the class of a certain graphic object, you can search and view which properties and methods the corresponding graphic class has and their detailed property and method descriptions in API documentation (opens new window).

In fact, the basic graphic object class is like inheriting the custom graphic object class, because the graphic object inherits from the custom graphic object.