如何使用动力学 js 在画布中的文本上添加文本转换？答案

【问题标题】：How to add Text-transform on text in canvas using kinetic js?如何使用动力学 js 在画布中的文本上添加文本转换？
【发布时间】：2014-11-01 18:43:10
【问题描述】：

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

我也尝试过文本转换，但它不起作用。

请帮帮我。

谢谢！！

【问题讨论】：

你想要的是变形（变化的动画）还是只是转换？
我正在寻找只是将文本转换为大写。

标签： html5-canvas kineticjs css

【解决方案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();                
}

【讨论】：