同一个白板房间可能会展示在各种不同的设备上。如显示器、手机、平板电脑等,这些设备尺寸不一,如何在不同的设备上展示合理恰当的画面,是在业务设计过程中需要认真考虑的问题。
Netless 互动白板通过「视角」来解决屏幕适配问题。在白板上,用户可以直接通过平台相关的操作来改变自己的视角。例如,Web 用户可以通过鼠标滚轮来放缩视角,使用抓手工具水平移动视角。移动端用户可以通过,双指放大手势来放缩视角,双指移动手势来水平移动视角。
此外,你还可以主动调用 SDK 的方法来移动、放缩视角。甚至可以锁定视角边界,这种模式下用户可以通过平台相关操作来自由移动视角,但如果视角超过了你设定的锁定边界,则会被自动拉回。
你还可以调用 SDK 的方法来禁止用户通过设备操作影响视角,从做到彻底禁锢用户视角。
以上这些,可以参考平台相关的文档了解详情。
在白板上绘制的各种图形,都有自己的坐标。我们可以用四个标量,originX
、originY
、width
、height
(左上角的 x
、y
坐标、宽、高)来描述图形在白板上的位置。这四个标量坐标,就是图形的世界坐标。
随着视角的平移和放缩,我们可以看到屏幕上绘制的图形也在平移和放缩。但我们将这种情况视为视角相对于白板在运动,而不是白板上的图形本身在运动。具体一点,这种情况下图形的视角坐标没有改变,改变的是视角的世界坐标。
视角相对白板的位置我们用三个标量来描述,centerX
、centerY
、scale
。其中 (centerX, centerY)
表示该视角下,屏幕正中心的点对准的在白板上的位置的世界坐标。scale
是放缩比例,表明该视角下,白板上的图形被放大多少倍。举个例子,当 scale=1
时,该视角下任何图形都保持原本的尺寸,scale=2
时,图形被放大到原来的 2 倍,scale=0.5
时,图形缩小到原来的 1/2 倍。
我们想象一个白板上空的一个摄像机,其中轴垂直于白板。摄像机中轴于白板平面的交点的坐标即 centerX
、centerY
。摄像机与白板平面的距离与 scale
成反比。我们在空间中移动摄像机,摄像机看到的镜像会变化,这三个标量也会跟着变化。
在上一章节中,我们描述了通过定义视角在世界坐标系中的三个标量坐标,来定位视角。该章节中,我们通过定义视觉矩形,来反向控制视角。
视觉矩形是一个抽象概念。你可以把它当作白板中的一个「看不见的矩形」,视角会自动调整,以同时满足如下条件。
视觉矩形是一个工具,它可以用来控制视角。我们可以移动视觉矩形,也可以修改它的尺寸,从而间接调整视角。我们通过关注视觉矩形,而不是视角,从而做到不同设备的适配。我们通常把视觉矩形设定成需要关注的内容(如刚好对准 PPT 的范围),从而确保不同尺寸的设备中,这个需要关注的内容(如对准的 PPT)都能显示完整。
在实时房间中,我们可以在如下三种视角模式中选择一种。
默认情况下,房间内所有用户都是自由模式,所有人都可以自由调整视角,彼此视角也不会影响。当某一个人切换到主播模式后,剩下的人会自动切换到跟随模式。当主播主动切回自由模式后,其他的跟随者回自动切回自由模式。
同一房间最多拥有一名主播。如果房间已经存在一名主播,此时某人主动切换到主播模式,则原来的主播会被自动切换成跟随模式。
所有的跟随者都会跟随主播的视角,如果某个跟随者试图调整视角,则跟随者会被自动切回自由模式。
如果你的业务场景不希望跟随者因为主动操作视角而被切回自由模式,可以禁止跟随者的视角操作。
主播会将自己屏幕所能看见的区域(这是一个矩形区域)在白板上的世界坐标和尺寸广播到整个房间,跟随者接收到这个矩形区域后,会将其当作自己的视觉矩形,以此调整视角。如此一来,主播如果主动调整视角,跟随者会立即跟随主播的调整。
有时候,我们并不希望房间内所有人都可以随意调整视角,我们希望通过某种方式将所有人的视角限制在一定范围内,并且这个范围在各种不同的设备上都以适当的形式展现。此时,我们有两种方式。
前者相对偏重内容本身,后者偏重主播的演示节奏。我们需要根据自身的业务场景,在这两种模式中选择最适合我们的方式。如果选得不恰当,可能会看到意想不到的结果。
举个例子,我们在场景中摆一张图片,我希望房间里所有人屏幕上,图片都充分展开。于是我设置了一名主播,令图片充满主播的屏幕,其他人作为跟随者。我们期待跟随者的屏幕上,图片也能充满屏幕。但实际结果却可能不如人意,如下。
可以看到,跟随者(手机)屏幕中的图片,四周都留有一段空隙,并非充满屏幕。这是因为,主播广播的矩形是主播屏幕所能看到的所有内容,这些内容包含主播看到的图片,以及图片两侧的空隙。这个矩形所包含的一切都会被原原本本地显示在跟随者的屏幕上。跟随者的屏幕也会忠实地将主播屏幕上的图片两侧的空隙显示出来,最终造成这种结果。
如上图,我们将主播屏幕中,图片两侧的空隙用蓝色标明。跟随者视觉矩形两侧的空隙用桃红标明。这样可以看得更清楚。
遇到这种情况,我们应该直接将所有人设定一个相同的视觉矩形,而不是设置主播 / 跟随者。