modèle balises Django + à l'aide de fabric.js

J'ai mis en place un site Django raisonnable pour tester et jouer avec, mais je suis ayant un temps terrible dont fabric.jsmodèle balises Django + à l'aide de fabric.js

En fin de compte, je veux utiliser le tissu. js pour prendre de petites images d'une base de données et les afficher sur une toile, mais je m'égare. Le problème que j'ai est que je ne peux pas utiliser une image png locale dans mon HTML en utilisant fabric.js - Je veux dire, le tissu est inclus (parce que je peux faire des trucs très basiques avec du tissu, comme créer des rectangles). le tutoriel n'est pas clair sur l'inclusion d'images locales.

Voici mon code terrible:

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
     <title>This is using render</title> 
    {% load staticfiles %} 
    <script scr="{% static "js/fabric.js" %}" type="text/javascript"></script> 
</head> 


<body> 


<script type="text/javascript"> 
var canvas = new fabric.Canvas('c'); 
canvas.setHeight(480); 
canvas.setWidth(640); 
var imgElement = fabric.Image.fromURL('../static/images/pitch.png', function(oImg) { 
    canvas.add(oImg); 
}); 

var imgInstance = new fabric.Image(imgElement, { 
    left: 100, 
    top: 100, 
    angle: 90, 
    opacity: 0.85 
}); 
canvas.add(imgInstance); 

</script> 


</body> 
</html>

probablement faire noobish quelque chose, donc des excuses à l'avance.

Source

2017-09-16 charliedontsurf

Ajouter un élément d'image dans votre code HTML (et obtenir par id) au lieu de le charger en utilisant fabric.Image.fromURL()

<!DOCTYPE html> 
<html lang="en"> 

<head> 
    <meta charset="UTF-8"> 
    <title>This is using render</title> {% load staticfiles %} 
    <script src="{% static "js/fabric.js" %}" type="text/javascript"></script> 
</head> 

<body> 
    <canvas id="c"></canvas> 
    <img id="imgElement" src="../static/images/pitch.png" hidden> 

    <script type="text/javascript"> 
     var canvas = new fabric.Canvas('c'); 
     canvas.setHeight(480); 
     canvas.setWidth(640); 

     var imgInstance = new fabric.Image(imgElement, { 
      left: 100, 
      top: 100, 
      angle: 90, 
      opacity: 0.85 
     }); 
     canvas.add(imgInstance); 
    </script> 
</body> 

</html>

Source

2017-09-16 10:54:22

modèle balises Django + à l'aide de fabric.js

Répondre

Questions connexes