Как убрать границы и углы из объекта Canvas?[Fabric.js] - PullRequest
Новая
       22

Как убрать границы и углы из объекта Canvas?[Fabric.js]

3 голосов
/ 06 февраля 2012

Я использую fabric.js в одном проекте, где пользователь может рисовать на холсте и сохранять изображение в формате png (используя функцию canvas.toDataURL ()).Однако мы заметили, что если пользователь переместил объект и нажал кнопку «Сохранить», он сохраняет границу и углы ранее перемещенного объекта (границы всегда отображаются при перемещении или изменении размера объекта).Итак, нам нужен способ удаления границ объекта перед сохранением, это возможно?

Ответы [ 2 ]

13 голосов
/ 07 февраля 2012

Да. Вы, вероятно, хотите деактивировать все объекты перед сохранением изображения: 

canvas.deactivateAll().renderAll();

(renderAll обновляет фактическое визуальное состояние после деактивации всех объектов)

0 голосов
/ 08 апреля 2012

Если вам нравится идея ваших пользователей перемещать и масштабировать контуры, нарисованные на холсте.Я бы согласился с предложением Кангакса.

В качестве альтернативы, если вы хотите слегка изменить поведение, вы можете установить поля hasBorders и hasControls в каждом элементе пути в значение false.Тогда вы никогда не увидите элементы управления / границы, и поэтому они никогда не будут напечатаны.Но это также означает, что вы не можете вращать или масштабировать пути, но вы все равно можете перемещать их.

Или вы можете сделать шаг вперед и сделать пути невыбираемыми (делая их неподвижными, чего вы можете или не можете хотеть).Таким образом, вы можете установить для поля selectable в каждом пути значение false.

Чтобы упростить все это, вы можете переопределить _finalizeDrawingPath из fabric.js, добавив следующий код в свой собственный файл js послеВы включили fabric.js 

fabric.Canvas.prototype._finalizeDrawingPath = function() {

  this.contextTop.closePath();
  this._isCurrentlyDrawing = false;
  var minX = utilMin(this._freeDrawingXPoints),
      minY = utilMin(this._freeDrawingYPoints),
      maxX = utilMax(this._freeDrawingXPoints),
      maxY = utilMax(this._freeDrawingYPoints),
      ctx = this.contextTop,
      path = [ ], xPoint, yPoint,
      xPoints = this._freeDrawingXPoints,
      yPoints = this._freeDrawingYPoints;

  path.push('M ', xPoints[0] - minX, ' ', yPoints[0] - minY, ' ');
  for (var i = 1; xPoint = xPoints[i], yPoint = yPoints[i]; i++) {
    path.push('L ', xPoint - minX, ' ', yPoint - minY, ' ');
  }
  path = path.join('');
  if (path === "M 0 0 L 0 0 ") {
    return;
  }

  var p = new fabric.Path(path);
  p.fill = null;
  p.stroke = this.freeDrawingColor;
  p.strokeWidth = this.freeDrawingLineWidth;


  //Tyson Benson: 
  //Add these lines to remove borders/controls
  p.hasBorders = p.hasControls = false;

  //Or add this line to make the path unselectable
  p.selectable = false;


  this.add(p);
  p.set("left", minX + (maxX - minX) / 2).set("top", minY + (maxY - minY) / 2).setCoords();
  this.renderAll();
  this.fire('path:created', { path: p });
};

Я удалил некоторые пробелы и комментарии для краткости (пожалуйста, обратитесь к fabric.js для этих комментариев).

Вы можете установить p.hasBorders = p.hasControls = false; или p.selectable = false;.Вам не нужны оба.

...