fabricjs canvasがオブジェクトを誤って読み込むことがありますか？

これは私が提示するのが難しいかもしれませんが、基本的に私のキャンバスは、コードの初期読み込みやいくつかの良い試行後のリフレッシュの後に間違ってレンダリングされます。通常はテキストですが、リフレッシュするまで（常にではありません）、フォントを読み込まないことがあります。キャンバス上での位置付けが外れることもあります。fabricjs 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ファイルを持っています。

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(); 
});

何か出ていませんか？

出典

2017-10-30 code forever

あなたの問題は、ファブリックがGoogleフォントの読み込み前に読み込まれているためです。
リフレッシュ後、リフレッシュ時にフォントが正常に読み込まれたため、すべて正常に動作しています。

このようなフォントロードを検出することができます。

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'); 
};

フォントロードの前に、スピナーを追加して、その時点でファブリックをロードすることができます。

出典

2017-10-30 02:57:53

よろしくお願いいたします。これをあらゆるフォントに適用できますか？そしてそれはフォントを強制的に読み込むでしょうか？ –

'document.fonts.ready.then'は、すべてのフォンロード終了後に呼び出されます。 –

fabricjs canvasがオブジェクトを誤って読み込むことがありますか？

答えて

関連する問題