Navigation

    CreatiCode Scratch Forum

    • Register
    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • CreatiCode

    多摄像头展示:设置摄像头显示区域

    三维积木
    1
    1
    253
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • info-creaticode
      CreatiCode last edited by admin

      介绍

      通常,我们只在 3D 场景中使用一台摄像头,并在舞台窗口中显示该摄像头的输出。但是,有时我们可能需要显示 2 个或更多摄像头的内容。例如,我们可以使用“画中画”布局在小窗口中显示第二个摄像头的内容,如下所示:

      5df74b70-6a0a-48ef-90a4-117faa905c58-image.png

       
      为了达到这个效果,我们需要做两件事情:
      1.在场景中添加多个摄像头
      2. 设置舞台窗口内每个摄像机的显示区域。

       
       

      添加多个摄像头

      每个场景都有一个主要的摄像机,但你也可以添加新摄像机作为辅助。例如,在下面这个程序中,我们添加了 2 个摄像头,分别命名为“1”和“2”。相机 1 距离较近。当添加摄像头 2 时,它被设置为非主要摄像头,因此它不会取代摄像头 1的输出。

      b56230bd-4eb0-4c19-b3e5-490f45c833db-image.png

       
      此外,由于我们尚未定义显示区域,舞台将仅显示摄像头 1 的输出:

      76fdf0a2-3f50-4c47-ba7a-13529a03cea2-image.png

       
       

      给每个摄像头设置显示区域

      要在舞台窗口中显示多个摄像头的输出,我们需要在舞台窗口中指定一个名为“显示区域”的矩形区域,使用以下积木:

      4a89e157-dddb-4723-ac65-63ee6612c291-image.png

       

      • 摄像头名称:此输入控制将在当前区域显示哪个摄像头的输出。添加摄像头时,你需要为摄像头指定一个名称,然后在此积木中使用该名称。

      • 底部 % 和 左边 %:这2个参数控制矩形区域左下角的位置。 “底部%”是相对于舞台窗口的高度。例如,如果舞台窗口的高度为 360 个单位,而“底部%”为 50%,则左下角与舞台窗口底部边缘之间的距离将为 180。同样,“左边 %”是相对于舞台窗口的宽度。例如,如果舞台窗口的宽度为 480 个单位,并且“left %" 为 25%,则左下角距离舞台窗口的左边缘 120。

      • 宽度 %和高度 %:这2个参数控制显示区域的宽度和高度,相对于舞台窗口的宽度和高度。例如,如果“宽度 %”为 50%,舞台窗口的宽度为 480,则显示区域的宽度为 240。

      • 边框宽度和颜色:这 2 个参数控制显示区域周围边框的粗细和颜色。这个边框会让我们更容易找到显示区域的边界。

       
       

      示例 1 - 画中画

      在此示例中,我们在整个舞台中显示摄像头 1 的输出,然后在底部中心的小窗口中显示摄像头 2 的输出。覆盖窗口相对于舞台窗口的宽度和高度为 40%。

      670148b0-e055-4319-8163-a37917e2af62-image.png

       
      结果如下:

      789d4484-46c8-4af2-a406-24c40c2e492e-image.png

       
       

      示例 2 - 左右分屏

      在这个例子中,我们将舞台窗口分成左右两个显示区域。每个区域的宽度是舞台窗口宽度的 50%。

      cf9cfed0-36b8-4a0d-9007-87615522d524-image.png

       
      结果如下:
      82e75357-7ebe-498b-abdb-1c5d130ec38a-image.png

      1 Reply Last reply Reply Quote 0
      • Pinned by  info-creaticode info-creaticode 
      • First post
        Last post