Libre Barcode 128 googleフォントがキャンバスに読み込まれない

-1

Libre Barcode 128フォントファミリをファブリックキャンバスに読み込む必要があります。バーコードはキャンバス上では表示されません。ファブリックjsキャンバスにLibre Barcode 128フォントファミリを設定するにはどうすればいいですか？Libre Barcode 128 googleフォントがキャンバスに読み込まれない

var text; 
 
var canvas; 
 
document.addEventListener("DOMContentLoaded", function() { 
 
    canvas = new fabric.Canvas('c'); 
 
    setTimeout(function() { 
 
    text = new fabric.Text("Text", { 
 
     fontSize: 70, 
 
     left: 100, 
 
     top: 0, 
 
     fill: '#sew3435' 
 
    }); 
 
    canvas.add(text).setActiveObject(text); 
 
    canvas.getActiveObject().set("fontFamily", 'Libre Barcode 128'); 
 
    canvas.renderAll(); 
 
    }, 1000) 
 
});

<html> 
 
    <head> 
 
    <link href="https://fonts.googleapis.com/css?family=Libre+Barcode+39+Text" rel="stylesheet"> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.19/fabric.js"></script> 
 
    <script src="html2canvas.js"></script> 
 
    <style> 
 
     .ss { 
 
     font-family: 'Libre Barcode 39 Text'; 
 
     font-size: 48px; 
 
     } 
 
    </style> 
 
    </head> 
 
    <body> 
 
    <div class="ss">Making the Web Beautiful!</div> 
 
    <canvas id="c" width=500 height=250></canvas> 
 
    </body> 
 
</html>

出典

2017-09-25 Nandhi Kumar

あなたが既に持っているコードを共有して、あなたがどこにいるのかわかりますか？ – JensS

を参照してください私の更新されたコード@JensS –

（それらは同じように扱われているが）実際のフォントは3-の-9フォントではなく、128であり、名前は（CSSで定義されている）であるべきである。

.set("fontFamily", "'Libre Barcode 39 Text'");

キャンバスで取り上げられる前に、DOM要素のフォントを「事前に使用する」必要があります。

更新：FabricJSはそのままの状態で入ってくる文字列を使用するように見えるので、フォントファミリ名のスペースのために内側の引用符もそこに追加する必要があります（完全性のためにここに含まれています）。私たちは、 " 'リブレバーコード39テキスト'" のように単一引用符にしてフォントファミリ名を設定する必要が

Fiddle example

出典

2017-09-26 06:41:42 K3N

参照してくださいこのフィドル、 http://jsfiddle.net/Kz7VL/39/ 私はファブリックのjsにリブレバーコード39テキストフォントファミリを使用しますが、その動作していない@ K3N –

@NandhiKumar FabricJSは、内部にスペースを含む名前の内部で引用符を適用していないようです。完全性のためにそのポイントを追加しました。 – K3N

var text; 
 
    var canvas; 
 
    document.addEventListener("DOMContentLoaded", function() { 
 
    canvas = new fabric.Canvas('c'); 
 
    setTimeout(function() { 
 
    text = new fabric.Text("Text", { 
 
    fontSize: 70, 
 
    left: 100, 
 
    top: 0, 
 
    fill: '#f00' 
 
    }); 
 
    canvas.add(text).setActiveObject(text); 
 
    canvas.getActiveObject().set("fontFamily", "'Libre Barcode 39 Text'"); 
 
    canvas.renderAll(); 
 
    }, 500) 
 
    });

<html> 
 
    <head> 
 
<link href="https://fonts.googleapis.com/css?family=Libre+Barcode+39+Text" 
 
rel="stylesheet"> 
 
<script 
 
src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"> 
 
</script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.19/fabric.js"></script> 
 
</head> 
 
<body> 
 

 
<canvas id="c" width=500 height=250></canvas> 
 
</body> 
 
</html>

、最後にそれが私のために動作します。

出典

2017-09-26 09:05:17

Libre Barcode 128 googleフォントがキャンバスに読み込まれない

答えて

関連する問題