Как я могу удалить ткань холста стрелка? - PullRequest
Новая
       9

Как я могу удалить ткань холста стрелка?

0 голосов
/ 13 сентября 2018

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

Я понял, что 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>

Ответы [ 2 ]

0 голосов
/ 24 сентября 2018

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

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

0 голосов
/ 13 сентября 2018

Поскольку вы не установили активный объект , вы не можете использовать 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>
...