Netless interactive whiteboard allows moving and zooming perspectives, as well as prohibiting operations from perspectives, and can even customize perspectives to follow.
Up to this chapter, we assume that you have installed the Netless interactive whiteboard SDK and introduced the project, and have obtained the real-time room instance room object. If not, you may have skipped the previous chapters. It is strongly recommended that you read 《Install》, 《Real Time Room》 first.
The tutorial in this chapter will only let you go through the relevant content of the perspective operation. If you want to learn more about the relevant content, you can refer to 《View and Coordinates》 after reading this chapter.
The perspective operation is based on the world coordinate system of the whiteboard. The scene of the Netless interactive whiteboard is an endless space, extending from the central origin to all directions infinitely. The coordinates of the center origin are (0, 0), the horizontal axis is the x axis, and the direction is to the right, and the vertical axis is the y axis, and the direction is downward. This coordinate system is absolute and does not change with the angle of view. If you want to know more about this, you can read 《World Coordinate System｜Viewing Angle and Coordinates》.
In practice, the screen coordinate system can be transformed into the world coordinate system through the following methods. The origin of the screen coordinate system is at the center of the whiteboard, and the zoom ratio is consistent with the coordinate system of the placeholder <div> (this coordinate system will be affected by transform).
var pointInScreen = {x: 100, y: 150};
var pointInWorld = room.convertToPointInWorld(pointInScreen);
After understanding the relationship between the world coordinate system and the screen coordinate system, as well as the conversion method, you can start to actively manipulate the perspective. For example, the following method can be used to move the center of the lens to the position of world coordinates (100, 120).
room.moveCamera({
centerX: 100,
centerY: 120,
animationMode: "immediately",
});
After performing this operation, you can see that the center of the screen is aligned with the world coordinate position (100, 120). Note that the value of the parameter animationMode is "immediately", which indicates that the action of switching the camera is completed in an instant. If you think this action is too blunt, you can adjust this parameter.
room.moveCamera({
centerX: 100,
centerY: 120,
animationMode: "continuous",
});
The adjusted shot cut process is much softer, it will broadcast a continuous animation to cut the shot over. You can also zoom in while cutting the lens in the following ways (just like pushing the lens to the screen).
room.moveCamera({
centerX: 200,
centerY: 260,
scale: 1.5,
animationMode: "continuous",
});
As a result, the screen is enlarged by 50%. Of course, we can not move the lens horizontally, but only change the zoom ratio.
room.moveCamera({
scale: 1.2,
animationMode: "continuous",
});
Even if a line of code is not written, the user can adjust the viewing angle by operating the device. For example, smart phone users can move the perspective through gestures and pinch their fingers to zoom in and out. In MacBook users can move and zoom the viewing angle through the trackpad. If the mouse has a scroll wheel, the user can use the scroll wheel to zoom in and out.
If you want users to freely change the perspective, use the following methods to prohibit these operations.
room.disableCameraTransform = true;
Of course, you can resume these operations at any time.
room.disableCameraTransform = false;
Note that when this attribute is true, only device operations are prohibited. You can still use the moveCamera method introduced in the previous chapter to actively adjust the viewing angle.
The scene of the Netless interactive whiteboard is boundless. If it is not restricted, the user's perspective does not know where it will go. Imagine the business scenario of an online classroom.
The teacher wants students to teach through PPT. We want students to focus on PPT. Students sometimes zoom in on the screen and carefully read a certain paragraph of the PPT. This operation should be allowed. However, students sometimes put the angle of view far away from the PPT, so that they can't find the PPT in a hurry. This kind of operation should be prohibited.
Once the student's perspective deviates too far from the PPT, you can call the following code to pull back the student's perspective, and the PPT will cover the student's screen again.
room.scalePptToFit("immediately");
There is another approach: limit the view of all users to the central PPT. When the user view leaves the PPT, the view will be automatically pulled back. If the size of the PPT is 1024 * 768, the following code can be used to restrict everyone's viewing angle to a rectangle centered at world coordinates (0, 0), with a width of 1024 and a height of 768.
room.setCameraBound({
centerX: 0,
centerY: 0,
width: 1024,
height: 768,
});
You can even limit the viewing angle before joining the room.
whiteWebSdk.joinRoom({
uuid: "Room uuid",
roomToken: "Room room token",
cameraBound: {
centerX: 0,
centerY: 0,
width: 1024,
height: 768,
},
});
Note that the above two operations only affect the current user, and will not affect other people in the room. If you want everyone in the room to limit the viewing angle, you need to let them call this method individually.
Finally, you can call the following method to cancel the viewing angle boundary limit.
room.setCameraBound({
centerX: 0,
centerY: 0,
width: Infinity,
height: Infinity,
});