好的，这就是正在发生的事情。我在这里有使用fabric.js的页面。 得到的一切问题都是changetext（）函数。它不是写在画布上。我知道所有变量都被传递给函数。我知道函数内部的代码有效。它只是在函数中不起作用。
<?
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>
答案 0 :(得分：2)
我试过，我这样得到了答案。这是我的代码：
$('#addText').click(function () {
changetext();
});
function changetext(){
var color = document.getElementById('color').value;
var mytext = document.getElementById('mytext').value;
var textObj = new fabric.Text(mytext, {
fontFamily: 'Arial',
fontSize:30,
left:10,
top:10,
fill:color,
shadow: 'green -5px -5px 3px',
});
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();
}
});
}
});
});
答案 1 :(得分：0)
你在JS中添加了字体库吗？尝试添加它们。