Googleフォントを使用してfabricjsキャンバス上のテキストを操作する方法は？

Question

私はキャンバス上のテキストを変更するボタンとしていくつかのGoogleフォントを指定できるようにしたいと思います。私はいくつかの基本的なフォントの間で変更するために何かを書くことができましたが、数時間後にGoogleのフォントを手直ししても動作させることができませんでした。

canvas = new fabric.Canvas('c'); 
 
var text = new fabric.Text("Some Text", { 
 
    fontFamily: 'helvetica neue', 
 
    fill: '#000', 
 
    fontSize: 60 
 
}); 
 
canvas.add(text); 
 

 
document.getElementById('times').addEventListener('click', function(e) { 
 
    canvas.getActiveObject().set("fontFamily", "times"); 
 
    canvas.renderAll(); 
 
}); 
 

 
document.getElementById('tangerine').addEventListener('click', function(e) { 
 
    canvas.getActiveObject().set("fontFamily", "tangerine"); 
 
    canvas.renderAll(); 
 
});

canvas { 
 
    border: 1px solid #dddddd; 
 
    border-radius: 4px; 
 
    margin: 10px 0px 0px 12px; 
 
}

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script type="text/javascript" src="https://rawgit.com/kangax/fabric.js/master/dist/fabric.min.js"></script> 
 
<script type="text/javascript" src="https://fonts.googleapis.com/css?family=Tangerine" rel="stylesheet"></script> 
 

 
<canvas id="c" width="400" height="400"></canvas> 
 
<br> 
 
<button id="times">Times</button> 
 
<button id="tangerine">Tangerine</button>

Answer 1

あなたは単にキャンバスにそれを追加した後、あなたのアクティブなオブジェクトを設定するのを忘れ除き、JavaScriptコードは、完全に正しいです：

canvas.setActiveObject(text) 

それ以外の場合は生地が知りません、あなたのアクティブなオブジェクトはそのプロパティにアクセスできません。

また、<script>タグを含むCSSファイルが含まれています。これにより、スクリプトエラーがコンソールに表示されます。マークアップが有効であることを常に確認してください。

var canvas = new fabric.Canvas('c'); 
 
var text = new fabric.Text("Some Text", { 
 
    fontFamily: 'helvetica neue', 
 
    fill: '#000', 
 
    fontSize: 60 
 
}); 
 
canvas.add(text); 
 
canvas.setActiveObject(text) // <-- see this 
 

 
document.getElementById('times').addEventListener('click', function(e) { 
 
    canvas.getActiveObject().set("fontFamily", "times"); 
 
    canvas.renderAll(); 
 
}); 
 

 
document.getElementById('tangerine').addEventListener('click', function(e) { 
 
    canvas.getActiveObject().set("fontFamily", "tangerine"); 
 
    canvas.renderAll(); 
 
});

canvas { 
 
    border: 1px solid #dddddd; 
 
    border-radius: 4px; 
 
    margin: 10px 0px 0px 12px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://rawgit.com/kangax/fabric.js/master/dist/fabric.min.js"></script> 
 
<link href="https://fonts.googleapis.com/css?family=Tangerine" rel="stylesheet" /> 
 

 
<canvas id="c" width="400" height="150"></canvas> 
 
<br> 
 
<button id="times">Times</button> 
 
<button id="tangerine">Tangerine</button>