这对我来说可能很难呈现，但基本上，有时在初次加载代码或在几次良好尝试后刷新后，我的 Canvas 渲染不正确。通常是文本，有时它不会加载字体，或者它在 Canvas 上的位置会偏离，直到我刷新(但并非总是如此)。
我尝试过调整标签的位置，将所有代码都放在本地，但没有任何运气；最终它再次发生。你认为我有什么可以改进的地方吗？先感谢您。
<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 文件，其中包含一些向 Canvas 添加形状的函数。
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();
});
有什么突出的吗？
最佳答案
您的问题是因为您的结构在谷歌字体加载之前加载。
因此，刷新后，所有事情都运行良好，因为刷新时字体已成功加载。
您可以像这样检测字体加载。
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。
关于javascript - Fabricjs Canvas 有时会错误地加载对象？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47006655/