Как удалить стрелку на тканевом полотне?

Я создал стрелку, используя функциональность группы Fabric.js, сгруппировав прямоугольник и треугольник. К сожалению, я не могу удалить его как группу.

Я понял, что getActiveObject () для одного объекта работает нормально. Вместо этого при отладке getActiveGroup () выдает ошибку.

var canvas = new fabric.Canvas('canvas');
canvas.setHeight(window.innerHeight * 0.75);
canvas.setWidth(window.innerWidth * 0.75);

//-------------------------Group - Rectangle and Triangle----------------------------------------------
window.addArrow = function() {
  var rect = new fabric.Rect({
    left: 0,
    top: 0,
    stroke: 'red',
    fill: 'red',
    width: 1,
    height: 50,
  });
  rect.hasRotatingPoint = true;
  canvas.add(rect);

  var triangle = new fabric.Triangle({
    width: 10,
    height: 10,
    fill: 'red',
    left: -4,
    top: -10
  });

  var group = new fabric.Group([rect, triangle], {
    left: 150,
    top: 100,
    angle: 90
  });

  canvas.add(group);
}

//-------------------------Group Delete----------------------------------------------
window.deleteObject = function() {
  return canvas.getActiveObject() == null ? canvas.getActiveGroup() : canvas.getActiveObject();
}

function getActiveGroup() {
  canvas.getActiveGroup().forEachObject(function(o) {
    canvas.remove(o)
  });
}

function getActiveObject() {
  canvas.remove(canvas.getActiveObject());
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.3.6/fabric.min.js"></script>
<canvas id="canvas" width="800" height="600" style="border:1px solid red;"></canvas>
<button onClick="addArrow()">Arrow</button>
<button onClick="deleteObject()">Delete</button>
1
0
121
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

Поскольку вы не установили активный объект, вы не можете использовать getActiveObject.

В этом случае вы можете использовать getObjects:

canvas.getObjects('group')  // in order to get the group
canvas.getObjects('rect')   // in order to get the rectangle

var canvas = new fabric.Canvas('canvas');
canvas.setHeight(window.innerHeight * 0.75);
canvas.setWidth(window.innerWidth * 0.75);

//-------------------------Group - Rectangle and Triangle----------------------------------------------
window.addArrow = function() {
    var rect = new fabric.Rect({
        left: 0,
        top: 0,
        stroke: 'red',
        fill: 'red',
        width: 1,
        height: 50,
    });
    rect.hasRotatingPoint = true;
    canvas.add(rect);

    var triangle = new fabric.Triangle({
        width: 10,
        height: 10,
        fill: 'red',
        left: -4,
        top: -10
    });

    var group = new fabric.Group([rect, triangle], {
        left: 150,
        top: 100,
        angle: 90
    });

    canvas.add(group);
}

//-------------------------Group Delete----------------------------------------------
window.deleteObject = function() {
    // remove group....
    canvas.getObjects('group').forEach(function(ele,idx) {
        canvas.remove(ele);
    });
    canvas.getObjects('rect').forEach(function(ele,idx) {
        canvas.remove(ele);
    });
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.3.6/fabric.min.js"></script>


<canvas id="canvas" width="800" height="600" style="border:1px solid red;"></canvas>
<button onClick="addArrow()">Arrow</button>
<button onClick="deleteObject()">Delete</button>

Спасибо за решение. Я также смог выяснить, что для прямоугольника в Arrow я добавил только прямоугольник на холст 'canvas.add (rect);'. Вот почему, когда я пытался удалить стрелку, он просто удалил треугольник.

Mili Sharma 13.09.2018 19:39

используйте подклассы в fabric.js для создания объекта стрелки, чтобы нужен был только один объект. Так обращаться будет проще.

[http://fabricjs.com/fabric-intro-part-3#subclassing impression[1]

Другие вопросы по теме