Question

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

我也试过了文字转换，但它没有用。

请帮助我。

谢谢！

Answer 1

在这种情况下，

string.toUpperCase()会起作用。 toUpperCase()方法将字符串转换为大写字母，最好在#chkAllCaps元素上添加鼠标单击事件并创建渲染函数。

这是jsfiddle：http://jsfiddle.net/6t7ohbnh/1/

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();                
}

如何使用kinetic js在画布上添加文本转换？

1 个答案: