kineticjs用戶輸入來改變文字大小

我有90％的方式通過爲用戶圖像上傳和文本樣式（顏色，重量，字體樣式等）設計一個杯子的畫布，但我無法讓我的頭繞着我的代碼中的錯誤。kineticjs用戶輸入來改變文字大小

現在我正在使用kinetic.js來創建它，並且有一個文本字段，並且要將它連接到用戶輸入以調整文本的大小，我已經使用canvas，但是對於動力學來說很新，因此很容易實施這將是有益的。

HTML：

<input type="text" id="textBox" placeholder="Your Text"> 
<br>Text Size: 
<input type="range" id="textSize" min="4" max="100" step="1" value="30" />

JS：

var text = new Kinetic.Text({ 
    x: 20, 
    y: 30, 
    text: '', 
    fontSize: '30', 
    fontFamily: 'Calibri', 
    fill: 'black', 
    draggable: true 
}); 

document.getElementById("textBox").addEventListener("keyup", function() { 
    text.setText(this.value); 
    layer.draw(); 
}, true); 

var stage = new Kinetic.Stage({ 
    container: 'container', 
    width: 375, 
    height: 200 
}); 

var layer = new Kinetic.Layer(); 

    layer.add(text); 
    stage.add(layer);

這裏是完整的fiddle

我還需要有（尤達）了「的onLoad」的形象與被插入的「 imageLoader「，所以對此的幫助也會很好。（如有必要，將作爲單獨問題發佈）。

讚賞的任何提示，在此先感謝

來源

2014-04-18 user3535811

有我能想到兩個不錯的選擇：調整字體大小和調整文本元素的規模。在任何情況下都非常相似。

字體大小：

document.getElementById("textSize").addEventListener("change", function() { 
    var size = this.value; 
    text.fontSize(size); 
    layer.draw(); 
}, true);

小提琴：http://jsfiddle.net/pDW34/8/

規模：

document.getElementById("textSize").addEventListener("change", function() { 
    var scale = this.value/100*4; 
    text.scale({x: scale, y: scale}); 
    layer.draw(); 
}, true);

小提琴：http://jsfiddle.net/pDW34/9/

來源

2014-04-19 00:12:12 Greg

那一個......謝謝。我不認爲你可以幫助與上傳功能..我需要實現這個http://jsfiddle.net/influenztial/qy7h5/到我的小提琴... – user3535811

將做到這一點:) – user3535811

做上述事件偵聽器的工作字體重量，顏色等。？ – user3535811

kineticjs用戶輸入來改變文字大小

回答

相關問題