Image

Below we will consider the PMI object which contains an image and allows you to insert it into a scene.

Object

Common type of the image object (TypeScript):

export type C3DViewImage = {
    type: C3DViewObjectTypes.Image
    uuid?: string
    position: C3DViewPoint
    rotation?: {
        aboutX?: number
        aboutY?: number
        aboutZ?: number
    }
    image: {
        src?: C3DViewResource
        origin?: {
            x: number
            y: number
        }
        size?: number
    }
    userData: C3DUserData
}

The properties type, uuid, and userData are described here. Additionally for this PMI object:

• type can be C3DViewObjectTypes.Image or a string "Image";

• userData object can be obtained later using the command with GetParametersTypes.AnnotationList as a type.

1. position is a point of the object in a scene.

2. rotation allows to set angles of rotation about the main axes of the object in radians.

3. image is a set of options necessary to specify an inner image:

   • src is a source data used to load an image;

   • origin is an option to align an image;

   • size is a size of image in pixels.

The position point always lies in a plane in which the image object is rendered.

The origin aligns an image:

• on the plane relative to the position of object;

• along horizontal and vertical directions via two inner parameters - x and y. x and y are measured in a range from 0 to 100%. Having values of 0% and 0% respectively defines left top alignment, while 100% and 100% – right bottom.

The size sets the equal size for an inner image and the object itself actually, as the object does not apply any padding or margin to its content.

Example

Example of the command adding a new image object (TypeScript):

view.runCommand({
    name: "AddAnnotation",
    objs: [
        {
            type: "Image",
            position: { x: 0, y: 0, z: 0 },
            rotation: { aboutX: 1.57 }, // rotate ~90 degrees along X
            image: {
                src: {
                    id: '...',
                    load: id => {...}
                },
                origin: { x: 50, y: 50 } // center alignment
                size: 32 // px
            },
            userData: {
                customField: 'custom data'
            }
        }
    ]
})