Class DisplayShape

Displays a MassObject with specified style such as color, border, etc.

Displays the MassObject by filling the shape, drawing the border, and optionally drawing an image. Lastly ornaments are drawn such as a center of gravity marker, drag handles, and name of the MassObject.

Setting Display Attributes

DisplayShape has attributes to determine fill color, border color, border thickness, whether to draw a center of mass symbol, etc. There are two ways to specify these attributes:

1. Modify the style directly

Modify the DisplayShape's style directly after it has been created. Here is a typical example where the DisplayShape is created by RigidBodyObserver.

simList.add(polygon1); // RigidBodyObserver creates a DisplayShape here
var dispPoly1 = displayList.findShape(polygon1);
dispPoly1.setFillStyle('red');

2. Modify the prototype

DisplayShape allows specifying a prototype DisplayShape. When a display property is undefined, then the property is fetched from the prototype. If it is also undefined on the prototype then a default value is used.

Keep in mind that all objects with a given prototype will be affected by any changes made to the prototype.

Here is an example where we make a prototype that causes the names to be drawn.

var protoShape = new DisplayShape().setNameFont('10pt sans-serif');
var shape1 = new DisplayShape(mass1, protoShape);

See RigidBodyObserver which sets up several prototype objects.

Drawing Name of MassObject

The name of the MassObject is drawn when the setNameFont property has a valid font specifier string. There are also setNameColor and setNameRotate properties that affect how the name is drawn. Example code:

myPolygon.setNameFont('12pt sans-serif').setNameColor('gray');

Here is a script that can be executed in Terminal to show names on all DisplayShapes:

displayList.toArray().forEach(d => {
  if (d instanceof DisplayShape) {
    d.setNameFont('12pt sans-serif');
  }
})

Or, if the objects of interest have the same prototype, then you can just change the prototype object.

Drawing an Image

You can draw an image in the DisplayShape by getting an HTMLImageElement that is on the HTML page and using setImage. For example in the HTML page you would have

<img id="myImage" src="../../images/myImage.png" width="32" height="32">

Then in the JavaScript application after making the DisplayShape, you can assign the image to the DisplayShape:

myPolygon.setImage(document.getElementById('myImage'));

You can further translate, scale, and rotate the image within in DisplayShape by making an AffineTransform and using setImageAT. You can clip the image to the boundary of the MassObject by using setImageClip.

You can assign a function to setImageDraw and do the drawing within that function. The same coordinate system modifications are done in that case. The current path is the shape of the MassObject, so you can for example fill with a pattern.

Both setImage and setImageDraw can be used together. The image is drawn first, then the imageDraw function is called.

The application DoublePendulum2App has examples of

  • drawing a scaled and rotated image inside a DisplayShape
  • filling with a color gradient
  • filling with a repeating tiled pattern

Coordinate System When Drawing An Image

When drawing an image it is important to understand the several coordinate systems involved:

  • simulation coordinates uses the Y increases up convention. The origin can be anywhere, and the units can be any size.

  • JavaScript canvas screen coordinates uses the Y increases down convention, with the origin at the top-left corner of the canvas, and with each unit corresponding to a pixel. The transformation between simulation and screen coordinates is handled by a CoordMap which can be set for the SimView.

  • body coordinates rotates and translates along with a MassObject. Like simulation coordinates it uses the Y increases up convention, and has the same unit size as simulation coordinates. See Body Coordinates, and MassObject.

For drawing the MassObject, we set the canvas to be in body coordinates. But when drawing an image or text, the difference of whether the Y coordinate increases up or down can cause the image or text to be drawn mirrored upside down.

Therefore, before the image is drawn, we make additional transformations to return to something like screen coordinates with

  • Y increases down
  • each unit corresponds to a pixel
  • the origin is at top-left corner of the DisplayShape bounding box
  • but the coordinates are still oriented (rotated and translated) to align with the DisplayShape, similar to body coordinates.

The setImageAT AffineTransform can then be specified to cause the image to be appear with any combination of rotation, scaling, and positioning. See the diagram below.

There are also differences in how angles are specified in the different coordinate systems; see 'About Coordinates and Angles' in CircularEdge for more information.

The above examples of using an AffineTransform on an image were generated by altering the application DoublePendulum2App.

TO DO provide an AffineTransform for drawing the name, instead of nameRotate.

Implements

Constructors

constructor

Properties

borderDash_ dragable_ drawCenterOfMass_ drawDragPoints_ fillStyle_ imageAT_ imageClip_ imageDraw_? image_ lastColor_ massObject_ nameColor_ nameFont_ nameRotate_ strokeStyle_ thickness_

Methods

contains draw getBorderDash getChanged getDrawCenterOfMass getDrawDragPoints getFillStyle getImage getImageAT getImageClip getImageDraw getMassObjects getNameColor getNameFont getNameRotate getPosition getPrototype getSimObjects getStrokeStyle getThickness getZIndex isDragable setBorderDash setDragable setDrawCenterOfMass setDrawDragPoints setFillStyle setImage setImageAT setImageClip setImageDraw setNameColor setNameFont setNameRotate setPosition setPrototype setStrokeStyle setThickness setZIndex toString toStringShort

Constructors

constructor

Properties

Private borderDash_

borderDash_: number[]

Line dash array used when drawing the border. Corresponds to lengths of dashes and spaces, in screen coordinates. For example, [3, 5] alternates dashes of length 3 with spaces of length 5. Empty array indicates solid line.

Private dragable_

dragable_: boolean

Whether the MassObject is dragable.

Private drawCenterOfMass_

drawCenterOfMass_: undefined | boolean

Whether to draw the location of the center of mass; it is drawn as two small crossed lines.

Private drawDragPoints_

drawDragPoints_: undefined | boolean

Whether to draw the 'drag points' on the object; these are the places that a spring can be attached to for dragging the object.

Private fillStyle_

fillStyle_: undefined | string | CanvasGradient

The color or gradient used when drawing (filling) the massObject. It can be a CSS3 color value (possibly including transparency) or a ColorGradient. Set this to the empty string to not fill the massObject.

Private imageAT_

imageAT_: undefined | AffineTransform

AffineTransform to use when drawing image. The image is drawn in coordinates that are oriented like body coordinates, but are like screen coordinates in that the origin is at top left of the DisplayShape bounding box, Y increases downwards, and units are equal to a screen pixel. The imageAT AffineTransform is applied to further modify the coordinate system before the image is drawn using the command context.drawImage(this.image_, 0, 0).

Private imageClip_

imageClip_: undefined | boolean

Whether to clip the image with the shape of the MassObject.

Private Optional imageDraw_

imageDraw_?: null | ((crc) => void)

Function to draw an image, it is called after the massObject is filled, the border is drawn and the image_ is drawn. The AffineTransform imageAT_ is applied first, and the image is clipped if imageClip_ is set. The current path is the outline of the massObject.

Type declaration

    • (crc): void

    • Parameters

      • crc: CanvasRenderingContext2D

      Returns void

Private image_

image_: undefined | null | HTMLImageElement

Image to draw, after the massObject is filled and border is drawn. The AffineTransform imageAT_ is applied first, and the image is clipped if imageClip_ is set. This disables the name being drawn.

Private lastColor_

lastColor_: string | CanvasGradient

Remember the last color drawn, to keep isDarkColor_ in sync with fillStyle.

Private massObject_

massObject_: MassObject

The MassObject to display.

Private nameColor_

nameColor_: undefined | string

Color for drawing name of the object; a CSS3 color value.

Private nameFont_

nameFont_: undefined | string

Font for drawing name of the object, or the empty string to not draw the name. It should be a CSS3 font value such as '16pt sans-serif'.

Private nameRotate_

nameRotate_: undefined | number

Angle of rotation for drawing name, in radians. Rotation is relative to the position in body coordinates.

Private strokeStyle_

strokeStyle_: undefined | string

The color to use for drawing the border, or the empty string to not draw the border. It should be a CSS3 color value (possibly including transparency). The thickness of the border is set by thickness_.

Private thickness_

thickness_: undefined | number

Thickness of border drawn, see strokeStyle_, in screen coordinates. A value of 1 corresponds to a single pixel thickness.

Methods

contains

  • contains(p_world): boolean

  • Whether the DisplayObject contains the given world coordinates point.

    Parameters

    • p_world: Vector

      the point in world coordinates

    Returns boolean

    true if this DisplayObject contains the given point

draw

  • draw(context, map): void

  • Draws this DisplayObject using the given CoordMap.

    Parameters

    • context: CanvasRenderingContext2D

      the canvas's context to draw this object into

    • map: CoordMap

      the mapping to use for translating between simulation and screen coordinates

    Returns void

getBorderDash

  • getBorderDash(): number[]

  • Line dash array used when drawing the border. Corresponds to lengths of dashes and spaces, in screen coordinates. For example, [3, 5] alternates dashes of length 3 with spaces of length 5. Empty array indicates solid line.

    Returns number[]

getChanged

getDrawCenterOfMass

  • getDrawCenterOfMass(): boolean

  • Whether to draw the location of the center of mass; it is drawn as two small crossed lines.

    Returns boolean

getDrawDragPoints

  • getDrawDragPoints(): boolean

  • Whether to draw the 'drag points' on the object; these are the places that a spring can be attached to for dragging the object.

    Returns boolean

getFillStyle

  • getFillStyle(): string | CanvasGradient

  • The color or gradient used when drawing (filling) the massObject. It can be a CSS3 color value (possibly including transparency) or a ColorGradient. Set this to the empty string to not fill the massObject.

    Returns string | CanvasGradient

getImage

  • getImage(): null | HTMLImageElement

  • Image to draw, after the massObject is filled and border is drawn. The AffineTransform imageAT_ is applied first, and the image is clipped if imageClip_ is set. This disables the name being drawn.

    Returns null | HTMLImageElement

getImageAT

  • getImageAT(): AffineTransform

  • AffineTransform to use when drawing image. The image is drawn in coordinates that are oriented like body coordinates, but are like screen coordinates in that the origin is at top left of the DisplayShape bounding box, Y increases downwards, and units are equal to a screen pixel. The imageAT AffineTransform is applied to further modify the coordinate system before the image is drawn using the command context.drawImage(this.image_, 0, 0).

    Returns AffineTransform

getImageClip

getImageDraw

  • getImageDraw(): null | ((crc) => void)

  • Function to draw an image, it is called after the massObject is filled, the border is drawn and the image_ is drawn. The AffineTransform imageAT_ is applied first, and the image is clipped if imageClip_ is set. The current path is the outline of the massObject.

    Returns null | ((crc) => void)

getMassObjects

getNameColor

getNameFont

  • getNameFont(): string

  • Font for drawing name of the object, or the empty string to not draw the name. It should be a CSS3 font value such as '16pt sans-serif'.

    Returns string

getNameRotate

  • getNameRotate(): number

  • Angle of rotation for drawing name, in radians. Rotation is relative to the position in body coordinates.

    Returns number

getPosition

getPrototype

getSimObjects

getStrokeStyle

  • getStrokeStyle(): string

  • The color to use for drawing the border, or the empty string to not draw the border. It should be a CSS3 color value (possibly including transparency). The thickness of the border is set by getThickness.

    Returns string

getThickness

getZIndex

  • getZIndex(): number

  • Sets the z-index which specifies front-to-back ordering of objects; objects with a higher zIndex are drawn over (in front of) objects with a lower zIndex.

    Returns number

    the zIndex of this DisplayObject

isDragable

setBorderDash

  • setBorderDash(value): void

  • Line dash array used when drawing the border. Corresponds to lengths of dashes and spaces, in screen coordinates. For example, [3, 5] alternates dashes of length 3 with spaces of length 5. Empty array indicates solid line.

    Parameters

    • value: number[]

    Returns void

setDragable

  • setDragable(dragable): void

  • Sets whether this DisplayObject is currently dragable; has no effect on objects that are not dragable.

    Parameters

    • dragable: boolean

      whether this DisplayObject should be dragable

    Returns void

setDrawCenterOfMass

  • setDrawCenterOfMass(value): void

  • Whether to draw the location of the center of mass; it is drawn as two small crossed lines.

    Parameters

    • value: boolean

    Returns void

setDrawDragPoints

  • setDrawDragPoints(value): void

  • Whether to draw the 'drag points' on the object; these are the places that a spring can be attached to for dragging the object.

    Parameters

    • value: boolean

    Returns void

setFillStyle

  • setFillStyle(value): void

  • The color or gradient used when drawing (filling) the massObject. It can be a CSS3 color value (possibly including transparency) or a ColorGradient. Set this to the empty string to not fill the massObject.

    Parameters

    • value: string | CanvasGradient

    Returns void

setImage

  • setImage(value): void

  • Image to draw, after the massObject is filled and border is drawn. The AffineTransform imageAT_ is applied first, and the image is clipped if imageClip_ is set. This disables the name being drawn.

    Parameters

    • value: null | HTMLImageElement

    Returns void

setImageAT

  • setImageAT(value): void

  • AffineTransform to use when drawing image. The image is drawn in coordinates that are oriented like body coordinates, but are like screen coordinates in that the origin is at top left of the DisplayShape bounding box, Y increases downwards, and units are equal to a screen pixel. The imageAT AffineTransform is applied to further modify the coordinate system before the image is drawn using the command context.drawImage(this.image_, 0, 0).

    Parameters

    Returns void

setImageClip

  • setImageClip(value): void

  • Whether to clip the image with the shape of the MassObject.

    Parameters

    • value: boolean

    Returns void

setImageDraw

  • setImageDraw(value): void

  • Function to draw an image, it is called after the massObject is filled, the border is drawn and the image_ is drawn. The AffineTransform imageAT_ is applied first, and the image is clipped if imageClip_ is set. The current path is the outline of the massObject.

    Parameters

    • value: null | ((crc) => void)

    Returns void

setNameColor

  • setNameColor(value): void

  • Color for drawing name of the object; a CSS3 color value.

    Parameters

    • value: string

    Returns void

setNameFont

  • setNameFont(value): void

  • Font for drawing name of the object, or the empty string to not draw the name. It should be a CSS3 font value such as '16pt sans-serif'.

    Parameters

    • value: string

    Returns void

setNameRotate

  • setNameRotate(value): void

  • Angle of rotation for drawing name, in radians. Rotation is relative to the position in body coordinates.

    Parameters

    • value: number

    Returns void

setPosition

  • setPosition(position): void

  • Sets this DisplayObject's position in simulation coordinates of the containing SimView. Each type of DisplayObject has a different policy regarding whether this will have an effect. Generally the policies are:

    • If the DisplayObject does not represent a SimObject, then the position can be set. Examples are DisplayClock, EnergyBarGraph.

    • If the SimObject's position is dependent on other objects, then the position cannot be set. Examples are DisplayConnector, DisplayRope, DisplaySpring.

    • If the SimObject can be moved independently and isDragable is true, then the position of the SimObject is modified. Example: DisplayShape.

    Parameters

    • position: GenericVector

      this DisplayObject's position, in simulation coordinates.

    Returns void

setPrototype

  • setPrototype(value): void

  • Set the prototype DisplayShape for this object. Display parameters are inherited from the prototype unless the parameter is explicitly set for this object.

    Parameters

    Returns void

setStrokeStyle

  • setStrokeStyle(value): void

  • The color to use for drawing the border, or the empty string to not draw the border. It should be a CSS3 color value (possibly including transparency). The thickness of the border is set by getThickness.

    Parameters

    • value: string

    Returns void

setThickness

  • setThickness(value): void

  • Thickness of border drawn, see getStrokeStyle, in screen coordinates. A value of 1 corresponds to a single pixel thickness.

    Parameters

    • value: number

    Returns void

setZIndex

  • setZIndex(zIndex?): void

  • Sets the z-index which specifies front-to-back ordering of objects; objects with a higher zIndex are drawn over objects with a lower zIndex. Default is zero.

    Parameters

    • Optional zIndex: number

      the zIndex of this DisplayObject

    Returns void

toString

toStringShort

  • toStringShort(): string

  • Returns a minimal string representation of this object, usually giving just identity information like the class name and name of the object.

    For an object whose main purpose is to represent another Printable object, it is recommended to include the result of calling toStringShort on that other object. For example, calling toStringShort() on a DisplayShape might return something like this:

    DisplayShape{polygon:Polygon{'chain3'}}

    Returns string

    a minimal string representation of this object.

Settings

Member Visibility

Theme

On This Page

Generated using TypeDoc