Question

这对我来说可能很难呈现，但基本上我的画布在有时初始加载我的代码或经过一些好的尝试后刷新后呈现不正确。通常它是文本，它有时不会加载字体，或者它会在画布上定位，直到我刷新（但不总是）。

我已经尝试过把握标签的地方，把所有的代码放在本地，但是没有运气;最终它再次发生。你看到我可以改进的任何东西吗？先感谢您。

<head>
  <meta charset="utf-8">
  <title>Test</title>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <!-- fabric.js -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.5.0/fabric.min.js"></script>
  <!-- My Styles -->
  <link rel="stylesheet" href="my.css">
  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
  <!-- Google fonts -->
  <link href="https://fonts.googleapis.com/css?family=Cinzel|Monsieur+La+Doulaise|Tangerine" rel="stylesheet">
</head>

<body>
  <div class="container">
    <div class="row">
      <div class="col-md-2">
        <div class="btn-group">
          <button class="btn btn-dark btn-sm dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Choose your...</button>
          <div class="dropdown-menu">
            <h6 class="dropdown-header">Number</h6>
            <a onclick="one()" class="dropdown-item">One</a>
            <a onclick="two()" class="dropdown-item">Two</a>
            <h6 class="dropdown-header">Font</h6>
            <a class="dropdown-item" id="cinzel" style="font-family:cinzel;">Cinzel</a>
            <a class="dropdown-item" id="monsieurladoulaise" style="font-family:Monsieur La Doulaise;">Monsieur La Doulaise</a>
            <a class="dropdown-item" id="tangerine" style="font-family:tangerine;">Tangerine</a>
          </div>
        </div>
        <button onclick="window.location.reload(true)" type="button" class="btn btn-danger btn-sm">Restart</button>
      </div>
      <div class="col-md-10">
        <canvas id="c"></canvas>
      </div>
    </div>
  </div>

  <!-- My JS File -->
  <script src="verses.js"></script>
  <!-- Bootstrap JS -->
  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
</body>

</html>

canvas {
  border: 1px solid #dddddd;
  border-radius: 3px;
  margin-top: 5px;
}

a:visited {
 text-decoration: none;
}

a:hover {
  text-decoration: underline;
  cursor:pointer;
}

a.dropdown-item {
  cursor: pointer;
}

.btn {
  margin-top: 10px;
  cursor: pointer;
}

然后我得到了我的JS文件，其中有一些函数可以为画布添加形状。

var $ = function(id) {
  return document.getElementById(id)
};

var canvas = this.__canvas = new fabric.Canvas('c');
canvas.setHeight(412);
canvas.setWidth(637);

var dynamicText = new fabric.IText('', {left: 8, top: 8, fontSize: 12})
canvas.add(dynamicText);

function one() {
  dynamicText.setText('Some Text');
  canvas.renderAll();
}
function two() {
  dynamicText.setText('Some Text');
  canvas.renderAll();
}

canvas.add(new fabric.IText('Some Text', {
  left: 480,
  top: 60,
  fontFamily: 'cinzel',
  fontWeight: 'bold',
  fontSize: 27,
  hasBorders: false,
  hasControls: false,
  selectable: true,
  lockRotation: true,
  lockMovementX: true,
  lockMovementY: true,
  align: 'mid',
  originX: 'center',
  originY: 'center',
  centeredScaling: true,

//fonts
document.getElementById('cinzel').addEventListener('click', function(e) {
  canvas.getActiveObject().set("fontFamily", "cinzel");
  canvas.renderAll();
});
document.getElementById('monsieurladoulaise').addEventListener('click', function(e) {
  canvas.getActiveObject().set("fontFamily", "Monsieur La Doulaise");
  canvas.renderAll();
});
document.getElementById('tangerine').addEventListener('click', function(e) {
  canvas.getActiveObject().set("fontFamily", "tangerine");
  canvas.renderAll();
});

有什么事吗？

Answer 1

您的问题是因为您的面料在加载谷歌字体之前加载因此，刷新后，所有事情都运行良好，因为刷新时字体已成功加载。

您可以像这样检测字体加载。

document.fonts.ready.then(function () {
   alert('cinzel loaded? ' + document.fonts.check('cinzel'));  // true
});

document.fonts.onloadingdone = function (fontFaceSetEvent) {
   alert('onloadingdone we have ' + fontFaceSetEvent.fontfaces.length + ' font faces loaded');
};

在加载字体之前，您可以添加微调器，然后可以在此时加载fabricjs。

fabricjs canvas偶尔会错误地加载对象？

1 个答案: