自动更新的画布很模糊

Question

我有这个应用程序，当我对画布进行更改时自动更新，但是当我添加文本或移动静态画布周围的东西变得模糊且无法使用时。您会注意到，当您添加文本时，它在第一个画布中看起来很好，但在其他画布中，随着您移动它会变得更加模糊。它也有这种奇怪的行为，您必须单击IText对象取消选择它/停止拖动它。请参阅下面的示例：

var canvas = [];
canvas.push(new fabric.Canvas('c0'));
for (i = 1; i <= 7; i++) {
  canvas.push(new fabric.StaticCanvas('sc' + i));
}

function dropText() {
  var text = new fabric.IText('Type here...', {
    fontSize: 27,
    top: 10,
    left: 10,
    lockUniScaling: true
  });
  canvas[0].add(text);
}

var rect = new fabric.Rect({
  fill: '#ff0000',
  width: 100,
  height: 100,
  id: 1
});
var circle = new fabric.Circle({
  fill: '#ffff00',
  radius: 50,
  left: 150,
  top: 150,
  originX: 'center',
  originY: 'center',
  id: 2
});

canvas[0].on('object:added', onModified);
canvas[0].on('object:modified', onModified);
canvas[0].on('object:scaling', onModified);
canvas[0].on('object:moving', onModified);
canvas[0].add(rect, circle);

function onModified(option) {
  var ob = option.target;
  var index = canvas[0].getObjects().indexOf(ob);
  for (i = 1; i <= 7; i++) {
    if (!ob) {
      canvas[i].remove(ob);
      canvas[i].insertAt(option.target, index);
    } else {
      canvas[i].add(option.target);
    }
  }
};

$('#update').click(function() {
  var json = JSON.stringify(canvas[0]);
  for (i = 1; i <= 7; i++) {
    canvas[i].loadFromJSON(json);
  }
});

$('#save').click(function() {
  html2canvas($('#imagesave'), {
    onrendered: function(canvas) {
      var a = document.createElement('a');
      // toDataURL defaults to png, so we need to request a jpeg, then convert for file download.
      a.href = canvas.toDataURL("image/jpeg").replace("image/jpeg", "image/octet-stream");
      a.download = 'myfile.jpg';
      a.click();
    }
  });
});

body {
  margin: 0px;
  padding: 0px;
}

canvas {
  border: 1px solid #f00;
  margin: 0px;
  display: block;
}

td {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  vertical-align: baseline;
}

#imagesave {
  background-color: white;
  height: 637.5px;
  width: 825px;
  padding-left: 75px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.21/fabric.min.js"></script>
<button onclick="dropText();" class="dropdown-item">Add Text</button><button id="save">Save</button>


<div id="imagesave">

  <table>
    <tr>
      <td>
        <canvas id="c0" width="187.5" height="318.75"></canvas>
      </td>
      <td>
        <canvas id="sc1" width="187.5" height="318.75"></canvas>
      </td>
      <td>
        <canvas id="sc2" width="187.5" height="318.75"></canvas>
      </td>
      <td>
        <canvas id="sc3" width="187.5" height="318.75"></canvas>
      </td>
    </tr>
    <tr>
      <td>
        <canvas id="sc4" width="187.5" height="318.75"></canvas>
      </td>
      <td>
        <canvas id="sc5" width="187.5" height="318.75"></canvas>
      </td>
      <td>
        <canvas id="sc6" width="187.5" height="318.75"></canvas>
      </td>
      <td>
        <canvas id="sc7" width="187.5" height="318.75"></canvas>
      </td>
    </tr>
  </table>

</div>

Answer 1

您是否尝试在绘制文本或将context.imageSmoothingEnabled设置为false？

之间清除画布

Answer 2

我的坏，我没有想到这种情况。您需要在添加到其他画布之前克隆该对象。

var ob = option.target;
var index = canvas[0].getObjects().indexOf(ob);
ob.clone(function(obj){
  for (i = 1; i <= 7; i++) {
    canvas[i].insertAt(obj, index, true);
  }
});

<强> 样本

var canvas = [];
canvas.push(new fabric.Canvas('c0'));
for (i = 1; i <= 7; i++) {
  canvas.push(new fabric.StaticCanvas('sc' + i));
}

function dropText() {
  var text = new fabric.IText('Type here...', {
    fontSize: 27,
    top: 10,
    left: 10,
  });
  canvas[0].add(text);
}

var rect = new fabric.Rect({
  fill: '#ff0000',
  width: 100,
  height: 100,
  id: 1
});
var circle = new fabric.Circle({
  fill: '#ffff00',
  radius: 50,
  left: 150,
  top: 150,
  originX: 'center',
  originY: 'center',
  id: 2
});

canvas[0].on('object:added', onModified);
canvas[0].on('object:modified', onModified);
canvas[0].on('object:scaling', onModified);
canvas[0].on('object:moving', onModified);
canvas[0].add(rect, circle);

function onModified(option) {
  var ob = option.target;
  var index = canvas[0].getObjects().indexOf(ob);
  ob.clone(function(obj){
    for (i = 1; i <= 7; i++) {
      canvas[i].insertAt(obj, index, true);
    }
  });
};

$('#update').click(function() {
  var json = JSON.stringify(canvas[0]);
  for (i = 1; i <= 7; i++) {
    canvas[i].loadFromJSON(json);
  }
});

$('#save').click(function() {
  html2canvas($('#imagesave'), {
    onrendered: function(canvas) {
      var a = document.createElement('a');
      // toDataURL defaults to png, so we need to request a jpeg, then convert for file download.
      a.href = canvas.toDataURL("image/jpeg").replace("image/jpeg", "image/octet-stream");
      a.download = 'myfile.jpg';
      a.click();
    }
  });
});

body {
  margin: 0px;
  padding: 0px;
}

canvas {
  border: 1px solid #f00;
  margin: 0px;
  display: block;
}

td {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  vertical-align: baseline;
}

#imagesave {
  background-color: white;
  height: 637.5px;
  width: 825px;
  padding-left: 75px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.22/fabric.js"></script>
<button onclick="dropText();" class="dropdown-item">Add Text</button><button id="save">Save</button>


<div id="imagesave">

  <table>
    <tr>
      <td>
        <canvas id="c0" width="187.5" height="318.75"></canvas>
      </td>
      <td>
        <canvas id="sc1" width="187.5" height="318.75"></canvas>
      </td>
      <td>
        <canvas id="sc2" width="187.5" height="318.75"></canvas>
      </td>
      <td>
        <canvas id="sc3" width="187.5" height="318.75"></canvas>
      </td>
    </tr>
    <tr>
      <td>
        <canvas id="sc4" width="187.5" height="318.75"></canvas>
      </td>
      <td>
        <canvas id="sc5" width="187.5" height="318.75"></canvas>
      </td>
      <td>
        <canvas id="sc6" width="187.5" height="318.75"></canvas>
      </td>
      <td>
        <canvas id="sc7" width="187.5" height="318.75"></canvas>
      </td>
    </tr>
  </table>

</div>