2014-02-23 33 views
0

我想要使用單擊按鈕在畫布上添加多個文本,但是當我再次單擊該按鈕時,它會重新加載畫布並重新加載我的第一個文本,這裏是我的代碼。 ...有沒有更好的方法來做到這一點?fabric.js使用按鈕單擊添加多個文本

function text() 
{ 

var m,n; 
m=150; 
n=60; 
var tex=document.getElementById("tex"); 
var tex1=document.getElementById("tex1"); 


var te=tex.value; 
var te1=tex1.value; 



var canvas=new fabric.Canvas('can');  

var text=new fabric.Text(te ,{ 

top: m, 
left: n 

}); 

canvas.add(text); 
} 

function text2() 
{ 

var m,n; 
m=150; 
n=60; 

var tex1=document.getElementById("tex1"); 



var te1=tex1.value; 



var canvas=new fabric.Canvas('can');  


var text1=new fabric.Text(te1 ,{ 

top: m, 
left: n 

}); 
canvas.add(text1); 
} 

回答

1

最後我得到了它,我不知道我在那裏會犯錯,但最後一段該代碼爲我工作,但仍然可以在任何身體告訴我,我的錯誤

<script> 
$(document).ready(function(e) { 

    var can=new fabric.Canvas('can'); 
    $("#d").click(function(e) { 


     rect=new fabric.Text('New Text',{ 
     top:Math.floor(Math.random()*350+1), 
     left:Math.floor(Math.random()*250+1), 
     fill:'red' 


     }); 
    can.add(rect); 
    }); 
}); 

</script> 
<body> 
<canvas id="can" width="700" height="500" style=" border:0.2em solid #000;" > </canvas> 




<div class="controls"> 


    <button id="d" onclick="text()">ADD TEXT</button> 
</div> 
相關問題