Question

我的问题是，当我去打印fabricjs画布时，有时我会忘记取消选择一个对象，当它进入打印对话框时它会将控件留在它上面。有没有办法清除任何选定的对象？

目前使用以下内容打印我：

// Print
function printCanvas() {
var dataUrl = document.getElementById('c').toDataURL(); //attempt to save base64 string to server using this var  
  var windowContent = '<!DOCTYPE html>';
  windowContent += '<html>'
  windowContent += '<head><title>Print canvas</title></head>';
  windowContent += '<body>'
  windowContent += '<img src="' + dataUrl + '" onload=window.print();window.close();>';
  windowContent += '</body>';
  windowContent += '</html>';
  var printWin = window.open('', '', 'width=340,height=260');
  printWin.document.open();
  printWin.document.write(windowContent);
}

<button onclick="printCanvas()">Print</button>

从印刷对话：

提前感谢您的帮助！

Answer 1

你可以使用

canvas.discardActiveObject();
canvas.renderAll();

(function() {
    var canvas = this.__canvas = new fabric.Canvas('canvas');
  
    // create a rectangle with a fill and a different color stroke
    var rect = new fabric.Rect({
       left: 50,
       top: 50,
       width: 50,
       height: 50,
       fill: 'rgba(255,127,39,1)',
       stroke: 'rgba(34,177,76,1)',
       strokeWidth: 5
    });
    canvas.add(rect);
    canvas.renderAll();    
    $('#deselect').click(function(){
      canvas.discardActiveObject();
      canvas.renderAll();
    });
})();

<canvas id="canvas" width="150" height="150"></canvas>
<button id="deselect">deselect</button>
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.4.0/fabric.min.js"></script>

是否可以强制取消选择所有对象onclick？

1 个答案: