4

ユーザーがキャンバスに描画し、png画像に保存できる1つのプロジェクトでfabric.jsを使用しています(canvas.toDataURL()関数を使用)。ただし、ユーザーがオブジェクトを移動して [保存] ボタンをクリックすると、以前に移動したオブジェクトの境界線と角が保存されることに気付きました (オブジェクトを移動またはサイズ変更すると、境界線は常に表示されます)。では、保存する前にオブジェクトの境界線を削除する方法が必要なのですが、それは可能でしょうか?

4

2 に答える 2

13

はい。画像を保存する前に、おそらくすべてのオブジェクトを非アクティブ化したいでしょう:

canvas.deactivateAll().renderAll();

(renderAllすべてのオブジェクトを非アクティブ化した後の実際の表示状態を更新します)

于 2012-02-06T22:43:19.130 に答える
0

ユーザーがキャンバスに描画されたパスを移動およびスケーリングするというアイデアが気に入った場合。私はカンガックスの提案に行きます。

または、動作を少し変更したい場合は、各パス要素の フィールドhasBordersとフィールドを false に設定できます。hasControls次に、コントロール/境界線が表示されないため、印刷できません。ただし、パスを回転またはスケーリングすることはできませんが、パスを移動することはできます。

または、さらに一歩進んで、パスを選択できないようにすることもできます (パスを移動できないようにします。これは、必要な場合とそうでない場合があります)。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;ます。両方必要ありません。

于 2012-04-08T10:52:49.703 に答える