How can I drawing by order

I want to create a drawing project But It order by vue code

<v-stage
      ref="stage"
      :config="stageSize"
      @mousemove="move"
      @touchmove="handleMouseMove"
      @mouseDown="handleMouseDown"
      @touchstart="handleMouseDown"
      @mouseUp="handleMouseUp"
      @touchend="handleMouseUp"
    >
      <v-layer ref="layer">
        <v-image
          :config="{ image: image, draggable: true, centeredScaling: true }"
        />
        <v-image :config="{ image: image2, draggable: true }" />
        <v-rect
          v-for="(rec, recIndex) in recs"
          :key="`recIndex_${recIndex}`"
          :config="{
            x: Math.min(rec.startPointX, rec.startPointX + rec.width),
            y: Math.min(rec.startPointY, rec.startPointY + rec.height),
            width: Math.abs(rec.width),
            height: Math.abs(rec.height),
            fill: 'rgb(0,0,0,0)',
            stroke: 'black',
            strokeWidth: 3,
          }"
        />
        <v-text
          ref="text"
          :config="{
            x: 10,
            y: 10,
            fontSize: 20,
            text: text,
            fill: 'black',
          }"
        />
        <v-line
          v-for="(line, lineIndex) in lines"
          :key="`lineIndex_${lineIndex}`"
          :config="{
            stroke: line.color,
            strokeWidth: line.width,
            globalCompositeOperation: line.globalCompositeOperation,
            lineCap: 'round',
            points: line.points,
          }"
        ></v-line>
      </v-layer>
    </v-stage>

My step is

1. draw red line
2. draw square
3. draw pink line

I want canvas render by drawing order, Is square up than red line I didn’t use z-index because that all change z-index but I just want after brush move up

can anyone help me ? thank

[lavrton]

In your data you should NOT have separate variables recs and lines and probably others. You just need to have one array. Like items or elements or anything you want. Then every item in that array should have type property. Type can be rectangle, line or any other type of drawing you want to have. Then on your template you will need to have just one loop over this one array

<element-component
          v-for="element in elements"
          :key="element.id"
          :element="element"
/>

Then you will have to define element-component. Where it will draw itself based on type attribute. Type is rectangle then you use v-rect for it. Type is line you use v-line for it and so on.

[mei860821]

I coding whole and it can be work , didn’t have error. thanks very much!!