[Vuejs]-Select next/previous item & bring it to front in fabric js

by

0👍

I tried to use your function I it works fine for me using Fabricjs 2.3.3. What version are you using?

 var canvas  = new fabric.Canvas('c');


 var rect = new fabric.Rect({
        left: 100,
        top: 100,
        fill:  "#FF0000",
        stroke: "#000",
        width: 100,
        height: 100,
        strokeWidth: 10  
    });
    
  var rect2 = new fabric.Rect({
    left: 150,
    top: 150,
    fill:  "#FF0FF0",
    stroke: "#AABBCC",
    width: 100,
    height: 100,
    strokeWidth: 10     
  }); 
  var rect3 = new fabric.Rect({
    left: 75,
    top: 75,
    fill:  "#CCCFF0",
    stroke: "#DDBBFF",
    width: 100,
    height: 100,
    strokeWidth: 10  
  });

canvas.add(rect,rect2,rect3);
console.log(canvas.getObjects());

setInterval(function(){
	selectNextItem();
},1500);

function selectNextItem() {
	console.log('Select NEXT Item');
  let activeObject = canvas.getActiveObject()

  if (!activeObject) {
    return false
  }

  let totalObjectsNumber = canvas.getObjects().length
  let currentIndex = canvas.getObjects().indexOf(activeObject)
  let nextIndex = null

  // We reached the last item, rewind to the beginning
  if (currentIndex === totalObjectsNumber - 1) {
    nextIndex = 0
  } else {
    nextIndex = currentIndex + 1
  }

  let object = canvas.item(nextIndex)
  canvas.setActiveObject(object)
  object.bringToFront() // <--- this causes problem
  canvas.renderAll()
}
<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">

    <title>React Redux Webpack ToDo App</title>
</head>

<body>
  
  <canvas id="c" width="500" height="500"></canvas>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.3.3/fabric.js"></script>
</body>
</html>

Please select an object and see the result. Please let me know if it is a right behavior.

Leave a comment