Overview
Use the Screen Point component to define a 2D location on the online ShapeDiver viewer canvas. The location is defined according to CSS syntax, and it can be used to anchor floating containers in your App at the defined location.
First example
See here how to use the Screen Point component along with Container Properties to define the position of a Floating Container on the viewer canvas.
Properties
The component exposes just the two coordinates X and Y of the location on the screen. Both of those values accept lengths and percentages according to CSS syntax (see next section for more information).
Note that, according to the CSS convention, The X axis is horizontal, the Y is vertical, and the origin of the space is located at the top left of the container (in our case, the viewer canvas).
Both inputs include helpers in the right-click context menu with three predefined values:
-
Left (0%), Center (50%), Right (100%) for the X input
-
Top (0%), Center (50%), Bottom (100%) for the Y input
CSS Syntax
The component accepts <length-percentage> values. These values can be expressed in absolute lengths (such as px, cm, in) or relative lengths (such as em, rem, vw, vh), for example: 10px, 1.5rem. Note that the syntax allows no space between the value and the unit.
You can also use floating values followed by the % sign, for example: 33%, 100%. These values define distances relative to the size of the considered container. In our case, this is the viewer canvas; for example, set X and Y to 50% if you want to anchor the container to the center of the canvas.
Distances can be combined in calculations using the calc() function, such as calc(100% - 20px). This type of syntax is also supported by the Screen Point component, but you can also use the simplified syntax 100% - 20px; in that case, the component will automatically apply the calc() function to the expression.