How to change the anchor point of billboard rotation?

user_16035591 0
Viewed 166

I am trying to rotate billboard text. I want the text to be rotated at the origin point I set with verticalOrigin and horizontalOrigin. When I apply a rotation, the rotation is based on the image center, not the origin point I specified.

How do I rotate the billboard at the origin point instead?

map.entities.add({
    position : Cesium.Cartesian3.from Degrees(),
    billboard : {
        image : Cesium.writeTextToCanvas('ANCHOR POINT', {
            font : '12pt Arial, sans-serif',
            fillColor : Cesium.Color.AQUA
        }),
        rotation : Cesium.Math.toRadians(0),
        alignedAxis : Cesium.Cartesian3.UNIT_Z,
        verticalOrigin : Cesium.VerticalOrigin.CENTER,
        horizontalOrigin : Cesium.HorizontalOrigin.LEFT
    }
})

screenshot

cesiumjs
1 Answers

OP ended up filing an issue and asking a community question about this on the Cesium forums.

The answer is that there isn't a direct way to set the rotation to happen around another point, even though it makes intuitive sense that verticalOrigin and horizontalOrigin should control this. See the source of vert_shader for details.

As a workaround, you can accomplish the same thing by applying the rotation to the center, and then shifting the position of the billboard (using trig to calculate the offsets) so it is placed as if the rotation happened at the edge. The calculated offsets can be passed as an additional property on the billboard:

map.entities.add({
    position : Cesium.Cartesian3.from Degrees(),
    billboard : {
        image : Cesium.writeTextToCanvas('ANCHOR POINT', {
            font : '12pt Arial, sans-serif',
            fillColor : Cesium.Color.AQUA
        }),
        rotation : Cesium.Math.toRadians(0),
        alignedAxis : Cesium.Cartesian3.UNIT_Z,
        position : new Cesium.Cartesian3(x_offset, y_offset, z_offset)
    }
})

I've opened a feature request on GitHub to fix this.

user_86056850
Related