PyCS/webui/src/components/media/annotation-box.vue

<template>
  <div class="annotation-box" :style="style">
    .annotation-box
  </div>
</template>

<script>
export default {
  name: "annotation-box",
  props: ['image', 'position'],
  computed: {
    style: function() {
      const left = this.image.left;
      const top = this.image.top;
      const width = this.image.width;
      const height = this.image.height;

      return {
        left: (left + this.position.x * width) + 'px',
        top: (top + this.position.y * height) + 'px',
        width: (this.position.w * width) + 'px',
        height: (this.position.h * height) + 'px',
      }
    }
  }
}
</script>

<style scoped>
.annotation-box {
  position: absolute;
  background-color: rgba(255, 255, 255, 0.3);

}
</style>