I want to be able to draw boxes over a image that I get from backend - vue.js

Question

I'm trying to achieve this in Vue. I have got the offsettop value of the container in which my image is getting rendered, now based on some cordinates I thought I'll dynamically append divs of certain sizes over the image, and that they remain fixed on the image when I scroll down or up,i.e if I scroll down the boxes also get shifted with the image to top.Any help is deeply appreciated

Answer 1

I would probably approach this by wrapping the image in a container with relative positioning, have the boxes inside it below the image, and give them absolute positioning.
Then you can adjust their size, and position relative to the container.
Something like this...
new Vue({
el: "#app",
data: {},
methods: {}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<!-- PAGE CONTAINER (tall, to demonstrate scrolling behaviour)-->
<div style="height:150vh; width:150vw; padding:100px;">
<!-- IMAGE CONTAINER (height and width of desired image size, relative positioning)-->
<div style="height: 50px; width:250px; position:relative;">
<!-- IMAGE (full height and width, absolute positioning, left 0, top 0)-->
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/02/Stack_Overflow_logo.svg/250px-Stack_Overflow_logo.svg.png" alt="stackOverflowLogo" style="height:100%; width:100%; position:absolute;">
<!-- BOXES (absolute positioning, height and width relative to image container,
top/bottom for vertical positioning relative to image container,
left/right for horizontal positioning relative to image container)-->
<!-- BOX 1 OVER IMAGE (over logo)-->
<div style="position:absolute; left:0; top:0; height:100%; width:17%; border: 1px solid red;"></div>
<!-- 'BOX' 2 OVER IMAGE (underline "stack")-->
<div style="position:absolute; left:19%; bottom: -3px; height:0px; width:25%; border: 5px solid green;"></div>
<!-- BOX 3 OVER IMAGE (outline "overflow")-->
<div style="position:absolute; right:0; top: 15%; height:70%; width:50%; border: 2px solid blue;">
<!-- BOX 4 OVER IMAGE (inside BOX 3)-->
<div style="position:absolute; left:73%; top: 53%; height:8px; width:4px; background: orange; border-radius:5px;"></div>
</div>
</div>
</div>
</div>
If you are using a Vue framework like Quasar or Vuetify, I believe you can just use the image as the container though.
In Quasar would be done like so:
<q-img :src="backEndImage" style="position:relative" :height="imageHeight" :width="imageWidth" >
<div style="position:absolute; left:0; top: 0; height:100%; width:17%; border: 2px solid red;"/>
<div style="position:absolute; right:0; top: 10%; height:80%; width:50%; border: 2px solid blue;"/>
<div style="position:absolute; left:19%; bottom: 0; height:0px; width:25%; border: 4px solid green;"/>
</q-img>
A little nicer than having to render and position the container appropriately around the image.