Html5 canvas 如何使用Dynamic 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

我想知道如何使用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',  
    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();                
}

你想要的是变形动画的变化或只是转换?我正在寻找只是转换成大写文字。