Bringing objects to front/back

[derberni]

Hi,
another question, this time on the z-ordering of items.

My goal is to display an image, and then overlay a number of rectangles. Both the image and the rectangles can change. Probably code explains it better:

<fabric-canvas :selection="false" :width="canvasWidth" :height="canvasHeight">
      <FabricImageFromURL
        v-if="imagePresent"
        ref="bgimg"
        :id="'bg-img'"
        :url="imageUrl"
        v-on:image-loaded="handleImageLoaded"
        :selectable="false"
      ></FabricImageFromURL>
      <fabric-rectangle
        v-for="(roi, index) in rois"
        :key="index"
        :id="index"
        :height="roi.h"
        :width="roi.w"
        :left="roi.x"
        :top="roi.y"        
        :selectable="false"
      ></fabric-rectangle>
</fabric-canvas>

imageUrl and rois are both computed properties.

My problem now is, that the image is always drawn on top of everything else, independent of the order the elements are added to the fabric-canvas.
Is there currently any way in the wrapper to influence which item is placed in front of the other? My first try to use a BackgroundImage instead of ImageFromURL, however, the BackgroundImage currently does not redraw when the url property changes.

[bensladden]

Hi, For memory there is not anything in the wrapper to do this at this point however you can access the fabric object directly for now to achieve the desired outcome.