1
Bon, alors voici ce qui se passe. J'ai cette page ici qui utilise fabric.js. Vous avez tout prévu le problème est la fonction changetext(). Ce n'est pas écrire sur la toile. Je sais que toutes les variables sont passées à la fonction. Je sais que le code à l'intérieur de la fonction fonctionne. Cela ne fonctionne tout simplement pas dans la fonction.Fabric.js n'écrit pas de texte sur la toile html5
<?
include 'config/config.php';
?>
<!doctype html>
<html lang="en">
<head>
<title>
About
</title>
<meta charset="UTF-8" />
<link rel="stylesheet" href="css/main.css" type="text/css" />
<script type='text/javascript' src='http://code.jquery.com/jquery-1.7.1.js'></script>
<script src="js/fabric.js"></script>
<script>
$(document).ready(function(){
$("#card-worker-box > div").hide();
var canvas = new fabric.Canvas('cardmaker');
var font = [
'Delicious', //0
'Quake_Cyr', //1
'OdessaScript_500', //2
'CA_BND_Web_Bold_700', //3
'CrashCTT_400', //4
'DejaVu_Serif_400', //5
'Encient_German_Gothic_400',//6
'Globus_500', //7
'Modernist_One_400', //8
'Tallys_400', //9
'Terminator_Cyr', //10
'Times_New_Roman', //11
'Vampire95' //12
];
$('#addBackgroundImage').click(function(){
canvas.setBackgroundImage('http://localhost/canvas/images/alabama.png', function() {
canvas.renderAll();
});
});
$('#addText').click(function() {
changetext();
});
function changetext(){
var xPos = document.getElementById('xPos').value;
var yPos = document.getElementById('yPos').value;
var color = document.getElementById('color').value;
var mytext = document.getElementById('mytext').value;
var textObj = new fabric.Text(mytext, {
fontFamily: font[0],
left: xPos,
top: yPos,
fontSize: 12,
textAlign: "left",
fill: color // Set text color to red
});
canvas.add(textObj);
canvas.renderAll();
};
$('.toggleWidth').click(function(e) {
e.preventDefault();
var id = $(this).attr("href");
$(id).toggle();
});
jQuery.fn.extend({
slideRight: function() {
return this.each(function() {
$(this).animate({
width: 'show'
});
});
},
slideLeft: function() {
return this.each(function() {
$(this).animate({
width: 'hide'
});
});
},
slideToggleWidth: function() {
return this.each(function() {
var h = $(this);
if (h.css('display') == 'none') {
h.slideRight();
} else {
h.slideLeft();
}
});
}
});
});
</script>
</head>
<body>
<div id="card-control-box">
<div id="card-control-menu-box">
<div id="card-menu">
<ul>
<li><a href="#canvas-image" class="toggleWidth">Image</a></li>
<li><a href="#canvas-text" class="toggleWidth">Text</a></li>
<li><a href="#canvas-font" class="toggleWidth">Fonts</a></li>
</ul>
</div>
<div id="card-worker-box">
<div id="canvas-image">
<h3>Image</h3>
<input type="text" name="background-image" />
<input type="button" value="add image" name="addBackgroundImage" id="addBackgroundImage" />
</div>
<div id="canvas-text">
<h3>Text</h3>
<input type="button" value="add text" name="addText" id="addText"/>
<label>Top</label><input type="text" id="xPos" name="xPos" />
<label>Left</label><input type="text" id="yPos" name="yPos" />
<label>Color</label><input type="text" id="color" name="color" />
<label>Text</label><input type="text" id="mytext" name="mytext" />
</div>
<div id="canvas-font">
<h3>Font</h3>
</div>
</div>
</div>
<div id="card-canvas-container">
<canvas id="cardmaker" width="500" height="225"></canvas>
</div>
</div>
<div class="clearfix"></div>
</body>
</html>
cela a fonctionné pour moi –