我有一个画布，其中有各种div元素作为框，代表要捕获的画布区域。当捕获发生时，它并不完全像屏幕上显示的那样。我如何跟踪并响应性地捕获div出现的部分？

例如，尝试捕获大的紫色部分：

这是该组件的代码：

<template>
  <div>
    <div class="video-wrapper">
      <canvas ref="the-canvas" class="canvas">
      </canvas>
      <video class="video" ref="video" autoplay />
      <div :class="profileCenter.name" :style="profileToStyle(profileCenter)" />
      <div :class="profileTopLeft.name" :style="profileToStyle(profileTopLeft)" />
      <div :class="profileTopMiddle.name" :style="profileToStyle(profileTopMiddle)" />
      <div :class="profileTopRight.name" :style="profileToStyle(profileTopRight)" />
    </div>
  </div>
</template>

<script lang="ts">
import { Vue, Component, Watch } from 'vue-property-decorator'
import Header from '@/components/Header.vue'

@Component({ components: { Header } })
export default class Test extends Vue {
  private userMedia: MediaStream | null = null
  private winHeight: number = window.innerHeight
  private winWidth: …

目前我正在使用 Knex 查询 MSSQL 数据库。我有一张这样的表：

Meals

Id

Vegetables

Id

Meal （参考膳食表）

Fruits

Id

Meal （参考膳食表）

因此，一餐 ID 可以包含多种蔬菜或水果。我希望得到一个包含所有蔬菜数组和结果中所有水果数组的膳食 ID 的结果。现在使用knex('meals').innerJoin('fruits', 'meals.id', 'fruits.meal')，我得到了多个对象。