Comment utiliser Google Fonts pour manipuler du texte sur une toile Fabric?

Question

Je voudrais être en mesure de désigner quelques polices google comme des boutons pour changer le texte sur une toile. J'ai été capable d'écrire quelque chose à changer entre quelques polices de base, mais après quelques heures de bricolage avec Google Fonts n'ont pas été en mesure de le faire fonctionner.

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

Votre code Javascript est tout à fait correct, sauf que vous avez simplement oublié de mettre votre objet actif après l'avoir ajouté à la toile:

canvas.setActiveObject(text) 

Sinon tissu ne sait pas, quel est votre objet actif et ne peut pas accéder à ses propriétés.

Vous avez également inclus un fichier CSS avec une balise <script>, qui lance l'erreur de script sur la console. Assurez-vous toujours que votre balisage est valide.

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>