Html5 canvas 如何使用Dynamic js在画布中的文本上添加文本转换?
我想知道如何使用kinetic js将画布中的文本转换为大写 以下是我的图形和文本画布代码:Html5 canvas 如何使用Dynamic js在画布中的文本上添加文本转换?,html5-canvas,kineticjs,css,Html5 Canvas,Kineticjs,Css,我想知道如何使用kinetic js将画布中的文本转换为大写 以下是我的图形和文本画布代码: top_text_val = "INSERT TOP TEXT"; //Default top text on meme bottom_text_val = "INSERT BOTTOM TEXT"; //Default bottom text on meme var stage = new Kinetic.Stage({ container: 'meme-img', wid
top_text_val = "INSERT TOP TEXT"; //Default top text on meme
bottom_text_val = "INSERT BOTTOM TEXT"; //Default bottom text on meme
var stage = new Kinetic.Stage({
container: 'meme-img',
width: 735, //width of container
height: 540, //height of container
});
var layer = new Kinetic.Layer(); //new object of kinetic layer
var imageObj = new Image(); //new image object to load image
var top_text;
var bottom_text;
//image onload event code
imageObj.onload = function() {
var image_shape = new Kinetic.Image({ //set image display dimensions
image: imageObj,
width: 735,
height: 540
});
top_text = new Kinetic.Text({ // Code to display top default text on meme image
x: 100,
y: 35,
text: top_text_val,
fontSize: 80,
fontFamily: 'Impact',
fill: '#fff',
align: "center",
stroke: 'black',
strokeWidth: 4,
});
layer.add(image_shape); // add the shape to the layer
layer.add(top_text); // add top text to the layer
stage.add(layer); // add the layer to the stage
};
if(image_link.trim().length>0) imageObj.src = image_link;
现在我想设置文本,并想在某个文本框的keyup事件中设置大写文本。请参阅以下代码以了解相同的信息:
$('#txtTop').on('keyup',function(){
var value = $(this).val();
top_text.setText(value);
if($('#chkAllCaps').is(':checked')){
//here i need code to set uppercase text-transform
}
layer.draw();
});
我也尝试过文本转换,但它不起作用
请帮帮我
谢谢 string.toUpperCase在这种情况下可以工作。toUpperCase方法将字符串转换为大写字母,最好在chkAllCaps元素上添加鼠标单击事件,并为render创建一个函数
这是JSFIDLE:
Javascript
$('#txtTop').on('keyup', function() {
render();
});
$('#chkAllCaps').on('click', function() {
render();
});
function render(){
var value = $('#txtTop').val();
if ($('#chkAllCaps').is(':checked')) {
top_text.setText(value.toUpperCase());
}else{
top_text.setText(value);
}
layer.draw();
}
你想要的是变形动画的变化或只是转换?我正在寻找只是转换成大写文字。